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.

In my last article titled DIV Tags: 2 Column Template Tutorial I covered the basic steps needed to create a simple 2 column website template frame. Today I want to take that one step further and add a few extra stylings to the code.

In particular, we're going to add an image background to the header and footer, add a border to the container, hide the borders on the main content and sidebar areas and introduce Heading tags and simple UL and LI tags.

The main DIV styles that will be used are:

• Border
• Background
• list-style
• text-align

And also introducing these basic HTML/CSS tags:

• H1
• H2
• P

Step 1: The Header & Footer Background

When adding a background image to a div, you use the same background styling we used to add the blue background. What we now want to do is modify that background code to include the new image details. You will need to have already created an image to use for the header prior to doing this. You need to add the image section in the main header DIV, not the inner padding div we added later. I am also going to change the padding on all the inner padding DIVs to 5px instead of 10px, and adjust the width as necessary.

Note: The easiest way to work out the widths of padding is to remember that this formula: Width + Padding = full width of DIV. So in the case of the header which is 480px wide, if we have 5px padding on each side, then the width would need to be 470px (5 + 470 + 5 = 480).

The change to the code is highlighted in red.

<div style="background: #000066 url(http://www.succeed2k.com/images/divheaderbg.jpg); width: 480px; height: 80px; border: 0px solid #000000; margin: 0pt auto;">
<div style="width: 470px; padding: 5px;">
<strong>HEADER</strong>
</div>
</div>
<div style="width: 480px; margin: 2px auto 2px;">
<div style="width: 373px; height: 100px; float: left; border: 1px solid #000000;">
<div style="width: 363px; padding: 5px;">
<strong>MAIN CONTENT AREA</strong>
</div>
</div>
<div style="background: #FFFF99; width: 100px; height: 100px; float: right; border: 1px solid #000000;">
<div style="width: 90px; padding: 5px;">
<strong>SIDEBAR</strong>
</div>
</div>
<div style="clear: both;">
</div>
</div>
<div style="background: #000066 url(http://www.succeed2k.com/images/divfooterbg.jpg); width: 480px; height: 30px; border: 0px solid #000000; margin: 2px auto;">
<div style="width: 470px; padding: 5px;">
<strong>FOOTER</strong>
</div>
</div>

Note: When using an image as the background, it is recommended that you use a path relative to your current page. ie. "url(/images/image.jpg). I used the full domain URL in this example for display purposes only.

You will notice I also changed the height of the Header and Footer DIVs to match the images I used for each. I also removed the border, as it was no longer needed as the images I used include their own border. You can simply just delete the border style altogether instead of changing it to 0 like I did.

The result:

Step 2: Container, Content and Sidebar Borders

The next step is to change the borders of the container, main content and sidebar. We want to remove the current border on the main content, change the sidebar so only the left border shows and add a new border to the container, that we had previously hidden. While at it, we're also going to change the background color of the sidebar to match that of the new footer image.

<div style="background: #000066 url(http://www.succeed2k.com/images/divheaderbg.jpg); width: 480px; height: 80px; border: 0px solid #000000; margin: 0pt auto;">
<div style="width: 470px; padding: 5px;">
<strong>HEADER</strong>
</div>
</div>
<div style="width: 480px; margin: 2px auto 2px; border: 1px dashed #000000;">
<div style="width: 373px; height: 100px; float: left;">
<div style="width: 463px; padding: 5px;">
<strong>MAIN CONTENT AREA</strong>
</div>
</div>
<div style="background: #FFFFCC; width: 100px; height: 100px; float: right; border-left: 1px dashed #000000;">
<div style="width: 90px; padding: 5px;">
<strong>SIDEBAR</strong>
</div>
</div>
<div style="clear: both;">
</div>
</div>
<div style="background: #000066 url(http://www.succeed2k.com/images/divfooterbg.jpg); width: 480px; height: 30px; border: 0px solid #000000; margin: 2px auto;">
<div style="width: 470px; padding: 5px;">
<strong>FOOTER</strong>
</div>
</div>

The result:

Step 3: Adding Sidebar Bullets, Formatting & Adding Content

The last thing we need to do is add content to the different DIVs. We are going to use the H1 tag in the header, as H Tags (header Tags) show search engines that the phrase within this tag is a headline. Then, we need to use the H2 tag in the main content and sidebar as headings, add bullets to the sidebar formatting to look square rather than round and lastly, change the footer text so that it is smaller (H4) and centered within that DIV. We also need to remove the HEIGHT styling from the main content and sidebar DIVs as the current height restrictions will not work once content scrolls further than the height restriction.

In the code below I have used 4 different colors to explain the 4 different areas:

• Header: Red
• Main Content: Blue
• Sidebar: Green
• Footer: Pale Blue

<div style="background: #000066 url(http://www.succeed2k.com/images/divheaderbg.jpg); width: 480px; height: 80px; border: 0px solid #000000; margin: 0pt auto;">
<div style="width: 470px; padding: 5px;">
<h1>PPM Site</h1>
</div>
</div>
<div style="width: 480px; margin: 2px auto 2px; border: 1px dashed #000000;">
<div style="width: 373px; float: left;">
<div style="width: 363px; padding: 5px;">
<h2>Welcome To My Web Site</h2>
<p>This is a paragraph of text</p>
<p>Paragraph #2</p>
<p>Etc</p>
</div>
</div>
<div style="background: #FFFFCC; width: 100px; float: right; border-left: 1px dashed #000000;">
<div style="width: 90px; padding: 5px;">
<h2>Menu</h2>
<ul style="list-style:square outside; margin-left:0; padding-left:1em;">
<li>Bullet #1</li>
<li>Bullet #2</li>
<li>Bullet #3</li>
<li>Bullet #4</li>
<li>Bullet #5</li>
<li>Bullet #6</li>
</ul>
</div>
</div>
<div style="clear: both;">
</div>
</div>
<div style="background: #000066 url(http://www.succeed2k.com/images/divfooterbg.jpg); width: 480px; height: 30px; border: 0px solid #000000; margin: 2px auto;">
<div style="width: 470px; padding: 5px; text-align: center;">
&copy; 2010 succeed2k.com
</div>
</div>

The end result:

That's it, you're very own CSS website built around a series of styled DIV Tags.

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.