In this post I'm going to show you how to create a simple image gallery using CSS and the brand new HTML5 elements that mark up images and their related content. First of all, we have to make sure that Internet Explorer 8 and lower will recognize such HTML5 elements. For that purpose, we'll use the HTML5 enabling script by Remy Sharp and we'll insert it in our page through a conditional comment:
<head> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head>
Now we can build up our HTML5 structure. We'll use the figure and figcaption elements:
<div id="gallery">
<figure>
<img src="1.jpg" alt="" />
<figcaption>Building 1</figcaption>
</figure>
<!--other figures here-->
</div>
Remember that browsers are not currently able to assign a default display role to these elements, so we should take care of this aspect too:
#gallery {
margin: 2em auto;
width: 60%;
padding: 1em;
background: #a40;
border-top: 1em solid #e40;
border-bottom: 1em solid #e40;
height: 100%;
overflow: hidden;
}
#gallery figure {
float: left;
display: block;
width: 25%;
}
#gallery figure img {
display: block;
width: 90%;
margin: 0 auto;
padding: 0.5em;
background: #f50;
}
#gallery figure figcaption {
display: block;
margin: 0.5em auto;
width: 90%;
padding: 0.3em;
background: #fff;
font: italic small Arial, sans-serif;
text-align: center;
}
As you can see, this is a classic image gallery made with floats. You can see the demo below.