Constructing CSS photo gallery layout

Question

Hi,
I'm on DW CS4 with an intel Mac. I am one (1) table away from having my site be purely CSS without tables.
I have painstakingly placed each thumbnail manually and resized all the heights etc.  My Gallery actually looks good in IE 6, much to my surprise.
But in Safari and Firefox, it looks like it's out of the container (Content div) - but I've got this gallery class Div in the editable area of my template in the Content Div, so I don't know what I've done wrong.
http://www.frankbright.com/index1.htm
It would be really great if I could get this past me. I hope I've given enough information. Many Thanks for any assistance,
Frank B.

Answer 1

Firstly I would make all your thumbnails the same dimensions 135px x 108px. This will allow you to wrap all the images in one ul tag and center them on the page. If you use multiple ul tags then you will have to assign each one a different class and give each one a specific width to get it to center the images.
Example of css where the images are all wrapped in one ul tag.
<style type="text/css">
<!--
#mainContent, #navcontainer {
overflow: hidden;
.gallery {
list-style: none;
width: 725px;
margin: 0 auto;
padding: 0 0 0 10px;
.gallery li {
float: left;
width: 140px;
margin: 0;
padding: 0;
.gallery li a {
float: left;
display: block;
margin: 10px 10px 0 0;
-->
</style>
html showing images wrapped in one ul tag, add the others to the sequence.
<div id="mainContent">
<ul class="gallery">
<li><a href="pages/photoname.htm"><img src="thumbnail.jpg" alt="image description" width="135" height="108" border="0" /></a></li>
<li><a href="pages/photoname2.htm"><img  src="thumbnail2.jpg" alt="image description" width="135" height="108"  border="0" /></a></li>
<li><a href="pages/photoname3.htm"><img  src="thumbnail3.jpg" alt="image description" width="135" height="108"  border="0" /></a></li>
<li><a href="pages/photoname4.htm"><img src="thumbnail4.jpg" alt="image description" width="135" height="108" border="0" /></a></li>
<li><a href="pages/photoname5.htm"><img  src="thumbnail5.jpg" alt="image description" width="135" height="108"  border="0" /></a></li>
<li><a href="pages/photoname6.htm"><img  src="thumbnail6.jpg" alt="image description" width="135" height="108"  border="0" /></a></li>
</ul>
</div>