Simple CSS photo gallery

Adapting to page width, this simple unordered list is suitable for most photo galleries…

<style>
.gallery li {
 display: inline;  list-style: none;
 width: 150px; min-height: 175px;
 float: left; margin: 0 10px 10px 0;
 text-align: center;  }
</style>

<h3>Gallery</h3>
<ul class="gallery">
<li><a href="/images/image.jpg"><img src="/images/image_tn.jpg" alt="image" /></a>
   <br />Image Caption</li>
<li><a href="/images/image.jpg"><img src="/images/image_tn.jpg" alt="image" /></a>
   <br />Image Caption</li>
<li><a href="/images/image.jpg"><img src="/images/image_tn.jpg" alt="image" /></a>
   <br />Image Caption</li>
</ul>

Found on the net…

I also found this nifty example: http://joshuaink2006.johnoxton.co.uk/templates/gallery/. Cool if you have simplicity in mind.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s