Css Based Photo Gallery Code Fluid design for layout

[jlhaslip 4]

Fluid Design Photo Gallery

 

There are quite a few Topics here on the Xisto Forum about how to set-up and use Photo Galleries and about the link code for getting from a Thumbnail Image to a full size Image and all that stuff, so I would like to take this "Photo Gallery" concept one step further without covering what others have already supplied instruction for. Usually, when there is a solution posted here for the code on "how-to-do-this", there are tables involved and the Links are placed inside Table cells.

 

Tables are not neccesarilly a bad thing, but they were not originally intended to be used as structural elements in html or on the web. So here is an example of a Gallery which does not use Tables: Gallery link

 

The trick is in the CSS code used for the layout of the list of links. For those of you who understand CSS, there will be little need for an explanation. For those of you just learning, here is an explanation.

 

The CSS and comments:

#imagelist { 
	list-style-type: none;  // removes the list images from the li's
	}
#imagelist li { 
	float: left; // floats the li to the left with margins as follows
	margin-right: 6px; 
	margin-bottom: 10px;
	padding-bottom:6 px;
	font: bold 0.8em Arial, Helvetica, sans-serif; // set font information as a single line
	color: #333333; //forecolour is set here
	}
#imagelist img { 
	display: block; // display as block so the description is below the Image
	border: 1px solid #333300; // sets border size, shape and colour
	}

 

When you view the file, notice how the image layout changes to accomodate the window width? and no Horizontal scroll bar?

Size the thumbnails according to the size and shape of the full sized pictures, unless you like distortion.

 

So maybe now we will see fewer Table-based Photo Gallery designs?

 

Tested in FF, Opera8, IE5 and IE5 iMac

 

I hope this is helpful.

[Tyssen 0]

It looks nice and neat at the moment cos your images are all the same size, but you may want to give your <li>s a height & width when you start adding images of different shapes.

[Dragonfly 0]

That is cool because it will fit to all kinds of screen resolution and monitor resolution visitors are using. The pictures will just slip down when more pictures cannot be viewed in the same row, otherwise if one uses table it will give horizontal bar which I really dont' like. The only problem with the CSS based photogallery of yours is the size of the pictures, one may want to alter the size of the pictures according to the sources..

[Avalon 1]

It looks nice and neat at the moment cos your images are all the same size, but you may want to give your <li>s a height & width when you start adding images of different shapes.

222096[/snapback]

Yes, once you start using different size thumbnails it will start to look messy. I think you will need to set the li element size to something bigger than your largest thumbnail. If you do this, will it run the risk of showing the dreaded horizontal scroll bar if viewed at different screen resolutions? I guess you could resize the thumbnails to a set width and let the height of the thumbnail be determined by the size ratio of the image, this will still look a little messy I think.