CODEWITHSUNDEEP
htmlcss
Ashley Briscoe
Ashley Briscoe

Reputation: 737

How to build a grid of images if they have to be relatively positioned

I am trying to build a grid of images. The elements are relatively positioned so float: left doesn't seem to stack them. Is there a better way to do this? Heres the code:

CSS:

#master {

    width: 940px;
    outline: solid 1px #000;

}

#img_grid1 h2 {

    font-family: Tahoma, Geneva, sans-serif;
    position: relative;
    font-size: 16px;
    top: 50px;
    left: 20px;
    color: #000;
    z-index: 20;
    width: 100px;
}



img.off {

    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;

}

img.on {

    position: absolute;
    left:0; top: 0;

}

ul#img_grid1 { position: relative; }

ul#img_grid1 li {

    position: relative;
    list-style-type: none; 


}

.copy { 

    position: relative; 
    width: 200px; 
    top: 70px; 
    left: 40px;

}

.copy p { color: #FFF; }

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

HTML:

<div id="master">

<br />

<ul id="img_grid1">

  <li><a href="#" style="text-decoration: none;"><img class="off" src="images/img1.jpg" alt=""/><img class="on" src="images/img1over.jpg" alt=""/><h2>Heading 1</h2><div class="copy"><p>Love walking? Check out our fantastic range of quality walking gear. Plus... find out more about our FREE boot fitting service or check our brand new gear guide.</p></div>
 </a></li>
 <li><a href="#" style="text-decoration: none;"><img class="off" src="images/img1.jpg" alt=""/><img class="on" src="images/img1over.jpg" alt=""/><h2>Heading 1</h2><div class="copy"><p>Love walking? Check out our fantastic range of quality walking gear. Plus... find out more about our FREE boot fitting service or check our brand new gear guide.</p></div>
 </a></li>


</ul>

Not sure if its possible. I have tried floating the elements and that hasn't worked.

Upvotes: 0

Views: 51

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157334

Line up the li using display: inline-block;

Demo

CSS

ul {
    width: 1000px;
}

ul li {
    display: inline-block;
    margin: 10px;
    border: 1px solid #000;
}

HTML

<ul>
    <li><img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /></li>
    <li><img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /></li>
    <li><img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /></li>
</ul>
<ul>
    <li><img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /></li>
    <li><img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /></li>
    <li><img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /></li>
</ul>

Upvotes: 1

Related Questions