Images and captions

See more about:

Where are we?

You know how to put images on a page. And you know about the box model. Now let’s put them together, so captions float around with their images.

This lesson’s goals

You’ll learn that:

  • Captions can be above or below images.
  • An image and a caption can be wrapped in a <div>, making a single block.
  • An image-caption block can be floated left and right.
  • You can add borders to image-caption blocks.

Caption options (say that five times fast)

Some images on Web sites have captions. Here’s an example:

Bulldog

Bulldog

There’s an <img> tag and some text. But we want them to stay together. That’s what this lesson is about.

Let’s talk about some formatting options:

  • Caption position
  • Image block position
  • Borders.

Caption position

This one’s easy. Is the caption above or below the image?

Like this:

Bulldog

Bulldog

Or like this:

Bulldog

Bulldog

Here’s the code for the latter:

<p><img src="bulldog.jpg" alt="Bulldog"></p>
<p>Bulldog</p>

Image block position

Wrap the image and caption in a block, and you can position them in the page. For example, this image and caption are kept together on the left of the page:

Bulldog
Bulldog

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

The image and caption float together, as a single unit.

Here’s the code.

.image_caption_left {
  float:left;
  text-align:center;
  margin-right:10px;
}
...
<div class="image_caption_left">
<img src="/content_media/lessons/clientcore/web_page_with_images/bulldog.jpg" alt="Bulldog"><br>
Bulldog
</div>

<p>Blah blah blahity blah. Blahity blah blah. Blah! 
Blah blah blahity blah. Blahity blah blah. Blah! 
Blah blah blahity blah. Blahity blah blah. Blah! 
Blah blah blahity blah. Blahity blah blah. Blah! </p>

A <div> wraps the image and caption (lines 7 to 10). It keeps the image and caption together. When we move the <div> around, we move the image and caption as a single unit.

float: left; (line 2) positions the block to the left of the content. margin-right:10px; (line 4) leaves a small gap between the block and the blah blah blah.

Now let’s look inside the block. A <br> (end of line 8) puts the image and caption on different lines. text-align:center; (line 3) centers the image and caption within the block. text-align applies to the contents of the block, not the block itself.

Changing line 9 to this:

<em>Bulldog</em>

makes it easier for the user to see that the caption is not part of the regular text. Here’s what it looks like:

Bulldog
Bulldog

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Of course, you can float to the right as well:

Bulldog
Bulldog

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Here’s the code.

.image_caption_right {
  float:right;
  text-align:center;
  margin-left:10px;
}
...
<div class="image_caption_right">
<img src="/content_media/lessons/clientcore/web_page_with_images/bulldog.jpg" alt="Bulldog"><br>
Bulldog
</div>

<p>Blah blah blahity blah. Blahity blah blah. Blah! 
Blah blah blahity blah. Blahity blah blah. Blah! 
Blah blah blahity blah. Blahity blah blah. Blah! 
Blah blah blahity blah. Blahity blah blah. Blah! </p>

The easiest thing of all is to center the image:

Bulldog

Bulldog

Here’s the code.

.center {
  text-align:center;
}
...
<p class="center"><img src="/content_media/lessons/clientcore/web_page_with_images/bulldog.jpg" alt="Bulldog"></p>
<p class="center"><em>Bulldog</em>

Borders

Let’s add a border to the image-caption block.

Bulldog
Bulldog

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Here’s the code.

.image_caption_left {
  float:left;
  text-align:center;
  margin-right:10px;
  padding:5px;
  border:1px black dotted;
}
...
<div class="image_caption_left">
<img src="/content_media/lessons/clientcore/web_page_with_images/bulldog.jpg" alt="Bulldog"><br>
<em>Bulldog</em>
</div>

<p>Blah blah blahity blah. Blahity blah blah. Blah! 
Blah blah blahity blah. Blahity blah blah. Blah! 
Blah blah blahity blah. Blahity blah blah. Blah! 
Blah blah blahity blah. Blahity blah blah. Blah! </p>

Lines 5 and 6 are new. Line 5:

padding:5px;

adds whitespace between the image and caption, and the border. Line 6:

border:1px black dotted;

adds the border. Of course, you can change the thickness, color, and style of the border.

Summary

  • Captions can be above or below images.
  • An image and a caption can be wrapped in a <div>, making a single block.
  • An image-caption block can be floated left and right.
  • You can add borders to image-caption blocks.

What now?

A cool thing you can do with Web pages is to add background images. Let’s take a look.


How to...

Lessons

User login

Log in problems? Try here


Dogs