CSS Tutorial: Captioned Images

In todays Web2.0 world, images are as vital to a good Website as the content itself. But how do you take a regular image and turn it into something “more”? A great way to use images within your content is to make them captioned, giving the reader not just the visual, but also a short text description.

In this article I hope to show you the basics of adding captioned images to your Website, including these CSS styling attributes; float, border, margin, padding, and background.

Note: In this example I am going to be using CSS styling in the content directly. If you are familiar with <style> tags or the use of CSS files please feel free to use them accordingly.

Step 1: Image inside a DIV

The key to creating a captioned image is to wrap your image inside a DIV tag. The DIV is used to hold the image and also to align and style the captioned area.

The basic code is as follows:

<div>
<img src=”http://www.succeed2k.com/pics/ds.jpg”>
</div>

This would not look any different than just dropping an image on your page, so you need to add the necessary styling.

Step 2: Style the DIV

To make this image look right, you need add styling to the DIV. In this example we’re needing to make sure the image is aligned to the right of the page, so we need to use the “float: right” command. We also want to add a small frame around the image and caption. Changes to the code are in red.

<div style=”float: right; border: thin solid silver; text-align: center; margin: 2px; padding: 5px;”>
<img src=”http://www.succeed2k.com/pics/ds.jpg”>
</div>

As you can see, the result is the image surrounded by the silver frame.

Step 3: Add the caption

Dallas Stars Logo

Now we just need to add the caption to the image. We’re going to use a styled paragraph <p> tag to do this and will have our text centered and in italics.

<div style=”float: right; border: thin solid silver; text-align: center; margin: 2px; padding: 5px;”>
<img src=”http://www.succeed2k.com/pics/ds.jpg”>
<p style=”text-align: center; font-style: italic; font-size: smaller; text-indent: 0;”>Dallas Stars Logo</p>

</div>

By adding the text, we have extended the frame and created the captioned image look

Step 4: Advanced Styling

Dallas Stars Logo

One last small step that you can do to make your captioned image look even better is to add a background colour to the text part of the caption. This can really enhance the look and feel of the caption and is great for making the text stand our from the rest of the page. To do this, you could either add a 2nd DIV and wrap the <p> text part inside it, or as I am doing below, simply use a styled DIV instead of the <p>.

<div style=”float: right; border: thin solid silver; text-align: center; margin: 2px; padding: 5px;”>
<img src=”http://www.succeed2k.com/pics/ds.jpg”>
<div style=”border: thin solid silver; background: #ffffcc; padding: 2px; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;”>Dallas Stars Logo</div>

</div>

The wonderful thing about styling a captioned image is that you can make it do virtually anything you want. If you wanted the caption at the top of the image rather than the bottom you would simply take that 2nd DIV section and put it at the top above the image code. Want a different background, simply change the code. Need the whole thing left aligned instead of right? Simple, just change float: right to float: left in the main DIV.

Likewhys, if you wanted to use an object rather than an image, you could do that using the same technique as listed above. Try creating a captioned, right aligned YouTube video and see how it works. Just replace the image code with your YoutTube video embed link.

Lastly, don’t forget to have fun while trying new designs.

If you’re wanting to learn more, we strongly recommend the Web Design Mastery Course.

Web Design Mastery is a complete Internet Marketers Reference Guide. Not only will you learn how to design a professional website, but you’ll also learn in the easiest possible fashion.

It is a fantastic product that will teach you all you need to know about Web Design.

Share This:

Comments

comments