Using nested divs, each div has a background image, I want the images side-by-side
I am trying to put stars side-by-side.
here is my html & css code
<body>
<div class="rate-stars">
<div class"star" id="s5"><pre> </pre>
<div class"star" id="s4"><pre> </pre>
<div class"star" id="s3"><pre> </pre>
<div class"star" id="s2"><pre> </pre>
<div class"star" id="s1"><pre> </pre>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
My CSS:
.star
{
background-image: url("star-off.png");
float: left;
border: 0px;
width: 20px;
height: 20px;
margin: 0px;
padding: 20px;
}
Demo
Your first problem is you're missing the = in all of your class assignments:
<div class"star"
^ missing =
With those fixed, this CSS will do it:
.star
{
background-image: url("star-off.png");
background-repeat:no-repeat;
width: 20px;
height: 20px;
margin-left:25px;
}
You can do the following :
HTML can written as :
<div id="rate-stars">
<img id="star1" src="img/star1.png">
<img id="star2" src="img/star2.png">
</div>
Css :
#star1 {
left: 20px;
position: absolute;
top: 100px;
}
#star2 {
left: 60px;
position: absolute;
top: 100px;
}
Try this css
.star
{
background-image: url("star-off.png") no-repeat top left;
border: 0px;
padding-left: 20px;
height: 20px;
margin: 0px;
}
Related
I am trying to move a div to the right of the page to make something more complex, i.e. to have an image inside of it.
I want to make this image touch the right of the page but it always leaves a space. When I try to use position, it creates a side bar on the side and continues to have the space.
Here is an image of the space
Here is my code:
body {
background-image: url('wallpp.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
z-index: 0;
font-family: 'Comfortaa';
}
#logo1-div {
position: relative;
text-align: center;
}
.saudacoes {
position: relative;
color: white;
width: 700px;
left: -30px;
}
.saudacoes-text {
position: absolute;
top: 10px;
left: 112px;
text-align: center;
font-size: 18px;
}
#index {
text-align: left;
position: relative;
left: -60px;
}
.nossahistoria {
margin-top: 50px;
float: right;
}
.nossahistoria-text {}
<div id="logo1-div">
<img src="logo1.png" width="250">
</div>
<div class="saudacoes">
<img src="retangulo2.png" width="700">
<div class="saudacoes-text">
<h3>Olá bem vindo ao site oficial do Paula Cakes.</h3>
<a>Aqui você poderá encontrar:<br></a>
<div id="index">
•Nossa História.<br>
•Nossos produtos.<br>
•Redes sociais.<br>
•Onde pode nos encontrar.<br>
•Informações sobre a criação deste site.
</div>
</div>
</div>
<div id="nossahistoria-index" class="nossahistoria">
<img src="retangulo2.png" width="600" height="1000">
<div class="nossahistoria-text">
<h2>Nossa História</h2>
</div>
</div>
<div id="nossosprodutos-index">
</div>
<div id="redessociais-index">
</div>
<div id="ondepodenosencontrar-index">
</div>
<div id="infosdosite-index">
</div>
Maybe you have to add margin: 0 and padding: 0 attribute to body selector.
body {
margin: 0;
padding: 0;
...
}
I have a container with 3 divs inside. I'm making use of the full page. So I'm busy, all percentage, and when I crop my screen, only the first div resizes.
Here's the code:
#topnews {
margin-left: 1%;
margin-top: 10px;
}
#topnews_bg {
background-color: #F4F4F4;
width: 30%;
height: 187px;
margin-top: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
overflow: hidden;
}
#container_djbanner {
height: 187px;
width:30%;
top:10px;
left: 31.7%;
position: absolute;
}
#container_login {
float: right;
margin-right: 1%;
height: 187px;
width: 31.7% !important;
margin-top: -187px;
background-color: green;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
<div id="topnews">
<div id="topnews_bg">
<div id="slider">
<div id="sliderContent">
<div class="sliderTopstory" style="background: url(assets/img/top3.png);height:187px;">
<div id="topnews_opacity">
<span id="topnews_info">
<b>3e bericht</b><br/>En dan hier weer iets :p
</span>
<a href="#">
<div id="topnews_button">Meer info!</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="container_djbanner">
<img src="assets/img/testdj.png" style="-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;" />
</div>
<div id="container_login">
ds
</div>
Why does only the first box resize?
The divs are resizing correctly, if the problem is that the image is not resizing you could fix it with this css:
#container_djbanner img{
max-width: 100%;
}
Check out this codepen.
*Avoid using inline css in your html (is not a good practice).
I'm learning html and css, but I have some troubles.
Right now I'm making a site that has a small images with different w sizes.
The point is that, when you hover on them they show up clickable elements, and I can't get the right position on them.
What I have:
What I want:
Part of code for this:
<div class="photo">
<img src="http://placekitten.com/400/300" alt="image"/>
<div class="zoom">
</div>
<div class="all">
</div>
<div class="link">
</div>
<div class="info">
</div>
<div class="like">
</div>
</div>
CSS:
.photo img {
float:left;
width:auto;
height:auto;
}
.photo:hover {
display: block;
opacity:0.6;
}
.photo:hover .zoom {
position: absolute;
background-image:url(http://www.kolazhgostar.com/images/small-img05.png);
background-repeat:no-repeat;
width:46px;
height:50px;
background-position:center;
http://jsfiddle.net/zzu87/
You need to add some positioning to each image if you use position: absolute. Try something like this:
.photo:hover .zoom {
position: absolute;
top: 50%;
left: 200px;
background-image: url(http://www.kolazhgostar.com/images/small-img05.png);
background-repeat: no-repeat;
width: 46px;
height: 50px;
background-position: center;
}
This should get you where you want to go. (JS fiddle)
css
.photo {
display:block;
position:absolute;
background-image: url('//placekitten.com/400/300');
background-repeat: no-repeat;
width:400px;
height:300px;
}
.photo>.container {
display:none;
}
.photo>.container>div {
display:inline;
}
.photo:hover>.container {
display:block;
margin-left: 85px;
margin-top: 200px;
}
html
<div class="photo">
<div class="container">
<div class="zoom">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="all">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="link">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="info">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="like">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
</div>
</div>
First float the parent div left and set the position to relative. Then you'll have better control over the positioning of any child elements.
.photo {
float:left;
position:relative;
}
After, padding, margin, bottom, left, right, and top can be used to achieve the specific location desired inside the parent div. Here I used left and top...
.photo:hover .zoom {
position: absolute;
background-image:url(http://www.kolazhgostar.com/images/small-img05.png);
background-repeat:no-repeat;
width:46px;
height:50px;
background-position:center;
left:50%;
top:50%;
}
Here is the FIDDLE.
Interesting question. I solved the problem by making more div containers for the photo and its contents. Also, I worked under assumption that your photo images are 400x300. Modify the code as you like! :)
I think the interesting part about my solution is that I used only position: relative; which lifts up the hover menu above your images so it plays together nicely:
.photo-menu {
position: relative;
left: 0px;
top: -300px;
}
Thus, most of the horizontal position is accomplished using margin: 0 auto; instead of playing too much with absolute or relative position. Generally speaking, those can be avoided most of the time. It depends.
The result can be also viewed from the following: js fiddle example or from this jsfiddle example if cat images are removed sometime later.
Linking also relevant code below:
HTML:
<div class="photo-container">
<div class="photo">
<img src="http://placekitten.com/400/300" alt="image"/>
<div class="photo-menu">
<div class="upper-menu"></div>
<div class="lower-menu">
<div class="all"></div>
<div class="link"></div>
<div class="info"></div>
<div class="like"></div>
</div>
</div>
</div>
<div class="photo">
<img src="http://placekitten.com/400/300" alt="image"/>
<div class="photo-menu">
<div class="upper-menu"></div>
<div class="lower-menu">
<div class="all"></div>
<div class="link"></div>
<div class="info"></div>
<div class="like"></div>
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0px;
padding: 0px;
}
.photo-container {
width: 800px;
}
.photo {
float: left;
width: 400px;
}
.photo, .photo-menu {
width: 400px;
height: 300px;
}
.photo:hover {
display: block;
opacity: 0.6;
}
.photo-menu {
position: relative;
left: 0px;
top: -300px;
}
.photo .photo-menu {
display: none;
}
.photo:hover .photo-menu {
display: block;
}
.photo-menu .upper-menu {
background-image: url("http://www.kolazhgostar.com/images/small-img05.png");
background-repeat: no-repeat;
background-position: center;
width: inherit;
height: 200px;
margin: 0 auto;
}
.photo-menu .lower-menu {
width: 280px;
margin: 0 auto;
height: 100px;
}
.photo-menu .lower-menu div {
min-width: 40px;
width: 24.9999%;
height: 40px;
background-repeat: no-repeat;
background-position: center;
float: left;
}
.photo-menu .lower-menu .all {
background-image: url("http://placehold.it/40/ff0000");
}
.photo-menu .lower-menu .link {
background-image: url("http://placehold.it/40/00ff00");
}
.photo-menu .lower-menu .info {
background-image: url("http://placehold.it/40/0000ff");
}
.photo-menu .lower-menu .like {
background-image: url("http://placehold.it/40/c0ff33");
}
Note: I used placehold.it to place dummy images for the icons.
Cheers.
i have problem witn an icon (Loop icon) who goes out the screen when i resize the browser and that's create a white margin left , i'm using bootstrap and less , i i putted a Link to the page for you to see my problem and this is the code too
HTML
<body>
<header class="top-header">
<div class="container">
<div class="row">
<div class="span6">
<h1 class="logo">
Caspevi
</h1>
<h2>Le Moteur de recherche</h2>
</div>
<div class="span6"></div>
</div>
</div>
<!-- end container -->
</header>
<!-- Recherche générale -->
<section>
<div class="section-form1">
<div class="container">
<form action"/" method="post" class="genaral-form">
<p class="contour">
</p>
</form>
</div>
</div>
</section>
<!-- recherche personaliser -->
</body>
CSS
.section-form1 {
background: url('../image/background_top.png') no-repeat center;
background-color: #000;
width: 100%;
height: 694px;
a {
background: url('../image/forme_serche.png');
width: 61px;
height: 61px;
position: absolute;
top: -40px;
left: 413px;
&:hover {
background: url('../image/forme_serche_hover.png');
}
}
}
.contour {
position: relative;
height: 239px;
border: 1px solid white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-left: 120px;
margin-right: 120px;
margin-top: 80px;
}
I advise that you need to change the position from absolute to relative. You can then use a float:left and a width-margin that is a percentage.
You have just to replace this line. The absolute position have to be from right :
.section-form1 a {
...
left: 413px;
}
by
.section-form1 a {
...
right: -27px;
}
Regards
Like the above answer, it is just problem with position: absolute. I would recommend you to not use position: "absolute" or "fixed" just in special cases. You will have a lot of problems with responsive/fluid designs.
CSS
div_p {
}
.img_block {
display: inline-block;
position: relative;
}
.img_o {
width: 100px;
height: 100px;
float: left;
}
.img_i {
position: absolute;
top: 0px;
right: 0px;
width: 50px;
height: 50px;
}
HTML
<div>
<div class="img_block gwd-div-0pxe">
<img class="img_o" src="images/scene1.jpg">
<img class="img_i" src="images/scene2.jpg"><span style="position:absolute; top:10px;right:10px;">100</span>
</div>
<div class="div_p"><p>hi hello how are you</p></div>
<div class="img_block">
<img class="img_o" src="images/scene2.jpg">
<img class="img_i" src="images/scene3.jpg"><span style="position:absolute; top:10px; right:10px;">100</span>
</div>
<div class="div_p"><p>hi hello how are you</p></div>
<div class="img_block">
<img class="img_o" src="images/scene4.jpg">
<img class="img_i" src="images/scene5.jpg"><span style="position:absolute; top:10px; right:10px;">100</span>
</div>
<div class="div_p"><p>hi hello how are you</p></div>
</div>
i need to bring the text of class div_p to the right of the images but currently its placed below the image by this code.
Set the images to float left.
.img_block {
float: left;
}
try it
<div class="img_block">
<img class="img_o" src="images/scene2.jpg">
<img class="img_i" src="images/scene3.jpg"><span style="position:absolute; top:10px; right:10px;">100</span>
<div class="div_p"><p>hi hello how are you</p></div>
</div>
Try this:
.div_p p {
float: right;
max-width: 80px;
min-width: 80px;
}
.img_o {
float: left;
max-width: 400px;
min-width: 400px;
}
And use max-width to limit its width so that it would not come in the container of the text. And the text will stay there.
Here is fiddle: http://jsfiddle.net/afzaal_ahmad_zeeshan/e2u4y/1/
you should apply
.div_p {
float: left;
}
or
.div_p {
position: absolute;
right: 10px; /* or whatever you want */
}
and then style it how you want to