Setting Up a Gallery with HTML & CSS

The first step in setting up a gallery is selecting a group of photos, and then resize them in photoshop so they are all the same dimension. This insures a neat, professional looking gallery. Next enter the following code into your CSS, removing all the italicized text in the parenthesis.

.gallery  {

display: inline;     ( – This keeps the photo in the display box on the same line)

list-style: none;

width: 525px;     ( – Set at the maximum width for your photos)

min-height: 400px;     (- Set at the minimum height for your photos)

float: left;

margin: 10px 10px 10px 10px;   (- The margin you want between photos)


Once you’ve set up your css, then its time to put in the HTML. Simply copy this code into the body of your page.

<ul class=”gallery”>

<li><a href=”IMAGEFILE“><img src=”IMAGEFILE“/></a>        <br /></li> (repeat this line for as many photos as you desire)


replace the bold text with the image file you wish to use, and us the second line of code repetitively, changing the file of course, to select all of your images before closing the code with the </ul> seen below. When you upload all of your images, html, and css to your server, your end result should look something like this!


~ by danmaida on December 14, 2010.

%d bloggers like this: