Easy Gallery
Steve
Steven and Steve
Four doctors
Bunch of people
Guys and girls
Miyuki and Duncan
Tomoko and Duncan
Ladies
The peace sign
Exchanging addresses
An unordered list can be better than a table for displaying a group of pictures for a few reasons.
- The mark-up is a lot simpler and easier to understand.
- If you have a fluid layout the pictures flow easily when the browser is resized.
- 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 #2Thanks a ton! Much appreciated 
You can't imagine how helpful that's been, i was scratching my head trying to think of a way around that.
Good to hear.
Nice work, very kind to share.
And I love your logo!! Here's to the red wine!!
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.
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?
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
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