Building A Photo Gallery With CSS

Posted by Neville on July 19, 2011 under Blogging, How To, Training | Comments are off for this article

My Home Town

A Photo Gallery Using CSS








This gallery uses the float property to hold the photos in place.

How To:

Add the following code to the stylesheet:

.gallery {
float: left;
width: 180px;
height: 180px;
margin: 5px;
padding: 5px;
}

.gallend {
clear: left;
}

 

Use this (or similar) in the html code for the post.

<img class=”gallery” src=”http://domain.com/imgfolder/image01.jpg” alt=”” />
………………………………………………………………………….
<img class=”gallery” src=”http://domain.com/imgfolder/image08.jpg” alt=”” />

Add this code to end the gallery:

 <p class=”gallend”>Add some optional text in here or leave blank.</p>

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Comments are closed.