Positioning images in rows

[POPDUM]

Hi,

I am trying to position images, 4 to a row in 3 rows. I have defined the following divs:

container {width:800px; height:450px;position:relative}
firstrow {width:600px; height:130px;position:relative;top:0px}
secondrow {width:600px; height:130px;position:relative;top:140px}
thridrow {width:600px; height:130px;position:relative;top:280px}

However, when I display the images, they are all displayed one after the other, with a gap between what were supposed to be rows.

Can anybody tell me what might be wrong? I tried display:inline as well as display:block, but with no success.

Any help will be greatly appreciated!

[boogyman]

create an unordered list for each row and apply some CSS

<div id="container">
     <ul class="photoAlbum">
          <li><img src="row1image1" width="__width__" height="__height__" alt="__alt_description__"></li>
          <li><img src="row1image2" width="__width__" height="__height__" alt="__alt_description__"></li>
          <li><img src="row1image3" width="__width__" height="__height__" alt="__alt_description__"></li>
          <li><img src="row1image4" width="__width__" height="__height__" alt="__alt_description__"></li>
     </ul>
     <ul class="photoAlbum">
          <li><img src="row2image1" width="__width__" height="__height__" alt="__alt_description__"></li>
          <li><img src="row2image2" width="__width__" height="__height__" alt="__alt_description__"></li>
          <li><img src="row2image3" width="__width__" height="__height__" alt="__alt_description__"></li>
          <li><img src="row2image4" width="__width__" height="__height__" alt="__alt_description__"></li>
     </ul>
     <ul class="photoAlbum">
          <li><img src="row3image1" width="__width__" height="__height__" alt="__alt_description__"></li>
          <li><img src="row3image2" width="__width__" height="__height__" alt="__alt_description__"></li>
          <li><img src="row3image3" width="__width__" height="__height__" alt="__alt_description__"></li>
          <li><img src="row3image4" width="__width__" height="__height__" alt="__alt_description__"></li>
     </ul>
</div>

ul.photoAlbum {
     display: block;
     margin: 0 0 .5em 0;
     padding: 0;
}
ul.photoAlbum li {
     display: inline;
     list-style-type: none;
     padding: 0 1em 0 0;
}
ul.photoAlbum li img {
     border: none;
}

ul.photoAlbum {
     margin: 0 0 1em 0;
     padding: 0;
}

provides "gutter" space between the rows. This will give a 1 capital M character spacing as rendered by the browser.

ul.photoAlbum li {
     margin: 0;
     padding: 0 1em 0 0;
}

provides "gutter" space between the images.


assigning the unordered lists a class, allows for 1 rule to be applied to all three of the rows, thus allowing for faster download, which consequently will mean your images will be shown faster.
I left out the width and height attributes because those will be automatically determined by the size of the images within.

Edit: Automating the process

if you would like to automate the process, or in other words make this more dynamic, you can create an array of photo values and auto parse the lists. This would allow you to have more control over how many rows there are and how many images are in each row.
If you have alot of images, you might want to look into a database, which you could than grab out using some server-side language like PHP to create the loop, but this would still be possible with a client-side script like JavaScript using just an array

[mikee.jk]

<div id="imgs">
<ul>
<li><img src="images/img-event.gif" width="110px" height="61px" alt=""></li>
<li><img src="images/prayer-img.gif" width="110px" height="61px" alt=""></li>
<li><img src="images/support-img.gif" width="110px" height="61px" alt=""></li>
</ul>
</div>
<!--
<div id="img1">
<img src="images/img-event.gif" alt="Peace Blessing Church Ministries - Events"/>
</div>

<div id="img2">
<img src="images/prayer-img.gif" alt="Peace Blessing Church Ministries - Prayer"/>
</div>


<div id="img3">
<img src="images/support-img.gif" alt="Peace Blessing Church Ministries - Support"/>
</div>
-->

<!--



<div class="txts">
<div id="text1">
Events
</div>
<div id="text2">
Prayers
</div>
<div id="text3">
Support
</div>
</div>-->
<div id="txts">
<ul>
<li>Events</li>
<li>Prayer</li>
<li>Support</li>
</ul>
</div>
</div>