Images and captions

See more about:

Table of Contents

Where are we?
This lesson’s goals
Caption options (say that five times fast)
Caption position
Image block position
Borders
Summary
What now?

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

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

Or like this:

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

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

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

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

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.

Printer-friendly version

CoreDogs

Images and captions

Where are we?

This lesson’s goals

Caption options (say that five times fast)

Caption position

Image block position

Borders

Summary

What now?

How to...

Lessons

User login

Feedback