displaying photos properly

http://www.theartshole.com/art/

i've never really tried doing this, what's the most common way to simply layout a bunch of photos without haven't them touch each other?

also, i think i'll want to have text under all of them. when you click each one it will open a new window with a larger photo. this is simple enough to do so i don't think i need help on this...

 

For the class, art_pics, just adding margin and padding to each image:

.art_pics {
padding: 10px;
margin: 2px;
}

 

i'm trying a different approach, just going to inline ul the whole thing..

 

You could float the li's. I don't normally use lists for images but I saw Gary do it once for a slideshow. Like this:

    <ul>
      <li>
        <p>wallpaper:<img src="testguisy.gif" alt="thumb"><a href="foomanchu_1600_1200.jpg">1600 x 1200</a><a href="foomanchu/_1200_900.jpg">1200 x 900</a><a href="foomanchu/_800_600.jpg">800 x 600</a></p></li>
etc...
</ul>
[code]

If the li's are floated, they are also made into blocks. In this example, the word "wallpaper" was on top, and then there were three links underneath (also set to display: block I think) and sometimes a description.  Worked nicely.  You might want to make each li the same height (as tall as the tallest image) so that when the edge of the browser window forces a new line of floats, they all line up instead of sitting as high as they can underneath shorter images (IE can do this, just watch it).

Code (markup):

 

that li height tip was really helpful, thanks

 

There are times when equalizing heights is not feasible. For those times, you can make an inline-block gallery of images.

cheers,

gary