Easy Gallery

An unordered list can be better than a table for displaying a group of pictures for a few reasons.

  1. The mark-up is a lot simpler and easier to understand.
  2. If you have a fluid layout the pictures flow easily when the browser is resized.
  3. I'm sure there are more than two reasons...

You can easily change this to a fixed style, like this.

CSS
ul#gallery {
margin:0 auto;
padding:0;
list-style-type:none;
width:90%;
font-family: Monotype Corsiva, Harlow Solid Italic, serif;
}
ul#gallery li {
float: left;
margin:5px;
}
ul#gallery li p {
text-align: center;
margin:5px 0;
}
HTML
<h1>Easy Gallery</h1>
<ul id="gallery">
<li><img src="party/1.jpg" height="95" width="144" alt=""/><p>Steve</p></li>
<li><img src="party/2.jpg" height="95" width="144" alt=""/><p>Steven and Steve</p></li>
<li><img src="party/3.jpg" height="95" width="144" alt=""/><p>Four doctors</p></li>
<li><img src="party/4.jpg" height="95" width="144" alt=""/><p>Bunch of people</p></li>
<li><img src="party/5.jpg" height="95" width="144" alt=""/><p>Guys and girls</p></li>
<li><img src="party/6.jpg" height="95" width="144" alt=""/><p>Miyuki and Duncan</p></li>
<li><img src="party/7.jpg" height="95" width="144" alt=""/><p>Tomoko and Duncan</p></li>
<li><img src="party/8.jpg" height="95" width="144" alt=""/><p>Ladies</p></li>
<li><img src="party/9.jpg" height="95" width="144" alt=""/><p>The peace sign</p></li>
<li><img src="party/0.jpg" height="95" width="144" alt=""/><p>Exchanging addresses</p></li>
</ul>
<div class="clear"></div>
<p>An unordered list can be better than a table for displaying a group of pictures for a few reasons.</p>
<ol id="gallerypoints">
<li>The mark-up is a lot simpler and easier to understand.</li>
<li>If you have a fluid layout the pictures flow easily when the browser is resized.</li>
<li>I'm sure there are more than two reasons...</li>
</ol>
<p>You can easily change this to a fixed style, like <a href="br.php?page=gallery">this</a>.</p>

Comments

#1
2005-02-16 Carol W says :

Oh, Bon Rouge, I was looking at your Easy Gallery the other day, and was so disoriented I didn't quite realize what it was! Wow; I'm saving this! Bookmark! Imitate! Even copy! Just lovely! THANKS!

For a hard gallery, see

http://www.coherentdog.org/z0galry01.htm

I can't begin to describe the sweat I went through with that, knowing nothing, and changing from tables!

Wed, 16 Feb 2005 12:23:34 (PST)
Carol W

#2
2005-02-17 Jonathan Wold says :

Thanks a ton! Much appreciated smile

#3
2006-02-12 James says :

You can't imagine how helpful that's been, i was scratching my head trying to think of a way around that.

#4
2006-02-12 BonRouge says :

Good to hear. smile

#5
2006-03-15 Ana says :

Nice work, very kind to share.

And I love your logo!! Here's to the red wine!!

#6
2006-09-01 James says :

Yes, simply stunning and I love it love it love it.

However, when there's more text than fits on one line in the <p></p> tags, it drops the next image onto the next line. If I was a better man, I would know how to solve this, but I'm not, so I don't. Perhaps I should go out and better myself.

#7
2006-09-02 BonRouge says :

That's not difficult to fix (example).

#8
2007-09-19 PZ says :

I want to set it up to make each image a seperate page. The problem is I want to make it so when I add new images to the beginning of the photo gallery, I dont have to go threw each page and change the "previous" and "next" image links. Is there any easy way to do this?

#9
2009-11-05 JR says :

This a great, simple way of making a gallery! But what to do if some of the pictures are portrait and I want to align them to the bottom (in other words: keep the captions in one line)? An example is on this page where I found no other way then to use a table :-)

Can't figure it out, so I am stuck

#10
2011-05-09 Nail Yener says :

Hi,

I am trying to combine this with PHP but it gets messed up with the footer.

#11
2012-07-11 Franco says :

Best solution ever!! thank you very much!!

#12
2012-12-30 Nicole says :

OMG you have NO IDEA what a friggin' GOD send this post was to me! I've been googling all night trying to find just a simple very basic way to display a photo gallery on my tumblr blog using pages but COULD NOT FIND ANYTHING that would WORK! Then I came across this and tried it and Wa-la! It worked! Exactly what I needed, thank you SO much, really, you're awesome!

#13
2016-12-29 Ciara says :

Hi I wondering where abouts in the CSS file this code would go? Sorry I am a newbie to coding!

Comment on this page
Comment form

Please type the word 'sexy' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url