Hey all, am making a picture gallery, and have laid it out in 4 columns for images, given each image a container using list items etc.

 

Anyways its fixed size, and the image will either be max height or width as 150px so at least one dimension of the thumbnail will fit the container.

 

Basically at the mo I can only get the horizontal alignment working on portrait pictures. The landscape pictures are at the top of the container. (Link at bottom of post)

 

HTML

<ul class="gallery">
<li><a href="index.php?view=view_image&img=25"><img src="thumbimage.php?img=25" width="150" height="120" border="0"></a></li>
</li>

 

CSS

.gallery{
margin:0; padding:0;
overflow:hidden;
width:100%;
list-style:none;
}
.gallery li{
float:left;
display:inline;
width:23.8%;
margin:0 0 10px 1%;
padding:10px 0;
height:158px;
position:relative;
}
.gallery a,
.gallery img{
display:block;
}

a img{ border:none; }

.gallery a:link,
.gallery a:visited,
.gallery a:focus,
.gallery a:hover,
.gallery a:active{
padding:3px;
background:#eeefef;
width:150px; height:150px;
border:1px solid #c2c3c3;
margin: auto auto auto auto;
}
.gallery a:hover{
border-color:#ff0000;
}

.gallery{
border-bottom:2px solid #000;
padding-bottom:10px;
margin-top:10px;
}

 

Can someone point me in the right direction? My brain is dead from coding layout + image database stuff today

 

Link Below :

- http://mort.86degrees.com/sites/gallery/in...p?view=gallery2

what you could do (if PHP is more your forte) is add padding to the image in the thumbnail generation section. Basically just resize the image to be width + height of 150px (is that right?)

images are not fixed size, just the containers they are in, so dont think what you mean would work

yes, it would. you merely pad the images till they are the size of the container.