CSS Zibaldone

[ Home ] - [ Articoli ] - [ Traduzioni ] - [ Altro ] - [ Appunti sui CSS ] - [ L'autore ]

Sei qui: Home > Altro > CSS Articles > Styling an image gallery with CSS

Styling an image gallery with CSS

In this article I'll explain how to create and stylize an image gallery by using CSS.

Table of contents

The markup

We start with the following markup:

Listing 1. Markup for an image gallery

  1. <div id="gallery">
  2. <h2>Kurt Cobain</h2>
  3. <ul id="main">
  4. <li>
  5. <p><img src="../img/1.jpg" alt="Kurt Cobain 1" /></p>
  6. <p class="desc">Kurt 1</p>
  7. </li>
  8. ...omission...
  9. </ul>
  10. </div>

View the example

As you can see, we use an unordered list to wrap the six images. Each image is contained inside a paragraph and has its own description.

General styles

The first styles are really simple.

Listing 2. General styles

  1. #gallery {
  2. padding: 2em 0;
  3. margin: 0 auto;
  4. width: 600px;
  5. font: small Verdana, sans-serif;
  6. }
  7. #gallery h2 {
  8. margin: 0;
  9. border-bottom: 1px solid #666;
  10. }
  11. #gallery #main {
  12. width: 100%;
  13. margin: 0;
  14. padding: 1em 0;
  15. list-style: none;
  16. }
  17. #gallery #main li p {
  18. margin: 0;
  19. }

View the example

We've centered the main container through its horizontal automatic margins, set a base font size and resetted all margins of the elements and used padding to add some space between the children of the main container.

The title

We want to use a background image for the gallery's title, so our code will be the following:

Listing 3. The title

  1. #gallery h2 {
  2. width: 100%;
  3. height: 40px;
  4. background: transparent url("../img/title.png") no-repeat 0 0;
  5. text-indent: -1000em;
  6. }

View the example

We've used an enormous amount of negative text indent to replace the text of the h2 element with our background image. Now it's time to start with positioning and formatting of the elements.

Positioning and initial formatting

We'll use the float property to horizontally align our image. The code is the following:

Listing 4. Positioning and initial formatting

  1. #gallery #main {
  2. padding-left: 20px;
  3. }
  4. #gallery #main li {
  5. float: left;
  6. width: 160px;
  7. margin: 0 40px 0 0;
  8. }
  9. #gallery #main li img {
  10. display: block;
  11. width: 100%;
  12. }

View the example

To make floats appear on a new line, we set a global width for each list item that is equal to 200 pixels (160 pixels width plus 40 pixels of right margin). Since the container has a global width of 600 pixels, there is no room available for more than three floats per line. The last rule is very important and deserves a further discussion. As you can see, we've set a width in percentages on each image after turning it into a block-level element. What does it mean? Simply put, now the images will take the dimensions of their containing block. This technique works well only when the intrinsic dimensions of the images are greater (or equal) than those of their containing block. In this case, our images are 320 pixels wide and 240 pixels high, so this technique can be successfully applied. Keep in mind that percentages are always computed in pixels, so you should be very careful when using this tecnique with elements that have intrinsic dimensions (such as images).

Backgrounds and colors

Finally, we set backgrounds and colors on each list item.

Listing 5. Backgrounds and colors

  1. #gallery #main li {
  2. background: #def url("../img/tl.png") no-repeat top left;
  3. color: #333;
  4. margin-bottom: 0.5em;
  5. }
  6. #gallery #main li p {
  7. padding: 0.5em 1em;
  8. }
  9. #gallery #main li p.desc {
  10. background: transparent url("../img/br.png") no-repeat bottom right;
  11. font-style: italic;
  12. }

View the example

We've set a bottom margin on each list item in order to keep boxes separated. Then we've applied a background image (a rounded corner) to each list item and to the paragraph containing the textual description. To make room for the background color and images, we've set some padding on the paragraph that wraps each image. Note how each image fits its containing block thanks to the dimensions expressed in percentages.

See also

Download examples

examples.zip