Position DIV elements horizontally (CSS & HTML) -
i have been trying create 6 button navigation system using images. each image 159x159px (though, may change). page width 1024, allowing 10px gaps between images. issue comes when try position images horiztonally , have div on each of them, code follows:
.strand-container { /* colour strands container */ background-color: #333; /* size of strands container */ width: 1024px; height: 179px; /* position strands container */ margin: auto; } .strand-container img { /* size of strands */ width: 159px; height: 159px; /* space boxes */ padding-top: 10px; padding-left: 10px; float: left; /* layer position */ z-index: 1; } .strand-container ul,li { /* hide bullet points */ list-style: none; /* position */ margin: 0px; padding: 0px; } .strand-text { width: 159px; height: 159px; position: absolute; background-color: #000; text-align: center; margin: 10px; } .strand-text hr { width: 80%; } .strand-text:hover { background-color: #ff0000; }<html> <head> <title>title</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="strand-container"> <ul> <li> <img src="image.jpg"> <div class="strand-text"> <h1>strand</h1> <hr> <h2>text</h2> </div> </li> <li> <img src="image.jpg"> <div class="strand-text"> </div> </li> <li> <img src="image.jpg"> <div class="strand-text"> <h1>strand</h1> <hr> <h2>text</h2> </div> </li> <li> <img src="image.jpg"> <div class="strand-text"> <h1>strand</h1> <hr> <h2>text</h2> </div> </li> <li> <img src="image.jpg"> <div class="strand-text"> <h1>strand</h1> <hr> <h2>text</h2> </div> </li> <li> <img src="image.jpg"> <div class="strand-text"> <h1>strand</h1> <hr> <h2>text</h2> </div> </li> </ul> </div> </body> </html>i have feeling going use kind of position tag, i've tried few different things- none worked. basically, wish each div float on top of images , when hovered on change whatever styles put css.
- add
position: relative,float: left<li>tags. - remove
float: left<img>. - add
top: 0.strand-text
i change float: left in step 1 display: inline-block. in case need make sure there no whitespace between </li> , next <li> otherwise you'll additional space (probably 4px) between them.
.strand-container { /* colour strands container */ background-color: #333; /* size of strands container */ width: 1024px; height: 179px; /* position strands container */ margin: auto; } .strand-container img { /* size of strands */ width: 159px; height: 159px; /* space boxes */ padding-top: 10px; padding-left: 10px; /* layer position */ z-index: 1; } .strand-container ul, li { /* hide bullet points */ list-style: none; /* position */ margin: 0px; padding: 0px; } .strand-container li { position: relative; float: left; } .strand-text { width: 159px; height: 159px; position: absolute; background-color: #000; text-align: center; margin: 10px; top: 0; } .strand-text hr { width: 80%; } .strand-text:hover { background-color: #ff0000; }<html> <head> <title>title</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="strand-container"> <ul> <li> <img src="image.jpg"> <div class="strand-text"> <h1>strand</h1> <hr> <h2>text</h2> </div> </li> <li> <img src="image.jpg"> <div class="strand-text"> </div> </li> <li> <img src="image.jpg"> <div class="strand-text"> <h1>strand</h1> <hr> <h2>text</h2> </div> </li> <li> <img src="image.jpg"> <div class="strand-text"> <h1>strand</h1> <hr> <h2>text</h2> </div> </li> <li> <img src="image.jpg"> <div class="strand-text"> <h1>strand</h1> <hr> <h2>text</h2> </div> </li> <li> <img src="image.jpg"> <div class="strand-text"> <h1>strand</h1> <hr> <h2>text</h2> </div> </li> </ul> </div> </body> </html>
Comments
Post a Comment