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:

DIV Tags: Styling and Finishing the 2 Column Template

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
Please note: that while this article does show specific CSS styling, you can and should be encouraged to attempt new things and try different styles.

We will begin with the same basic code that we ended with in the last article. Let’s get started.

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:

HEADER

MAIN CONTENT AREA

SIDEBAR

FOOTER

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:

HEADER

MAIN CONTENT AREA

SIDEBAR

FOOTER

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:

PPM Site

Welcome To My Web Site

This is a paragraph of text

Paragraph #2

Etc

Menu

  • Bullet #1
  • Bullet #2
  • Bullet #3
  • Bullet #4
  • Bullet #5
  • Bullet #6

© 2010 succeed2k.com

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.

Share This:

DIV Tags: Basic Styling and Usage

Over the years there have been many forms of Web Design that have since become “old school”, irrelevant or simply out-dated. Often, they are replaced with far better methods that provide faster loading, better SEO and improved styling, such as the replacement of <b> with <strong> and <i> with <em>.

Another such feature are Tables <table>. While still heavily used by some people, they are slowly being used less and less across the Internet, and are being replaced by the Division or DIV tag <div>. Simply put, DIV allows you specify divisions within your document, much like a table would do with rows, columns and cells.

I’ve found the most common reason people don’t use DIVs is because they don’t understand how. I hope to shed a little light on DIVs in this article and show you how to add them to your site, style them as necessary and make them look great.

Basic Usage

As with every tag in HTML, DIV tags have both an open and close tags that wrap around the specific content.

<div>Content inside the DIV tag</div>

Any content you add within your DIV tags will be controlled by any styling you specify in your DIV (see below).

Styling a DIV can be done 3 ways:

  1. Use of an external CSS file
  2. Adding CSS styling to the header of the webpage
  3. Adding CSS styling directly to the DIV

In this example we are going to focus only on #3; adding CSS directly to the DIV tag.

There are many styling options you can use with tags. In the following examples we are going to focus only on a few of them, which include: width, border, background, padding, float and margin.

Styling

To style a DIV tag, you need to add the styling commands to the opening DIV tag. This is done as follows:

<div style=” “>
</div>

The style commands go within the ” ” section. If you wanted your DIV to be 75% wide, with a black border you would use something like this:

<div style=”width: 75%; border: 1px solid #000000;”>
DIV Content
</div>

Notice that after each style command you need a semicolon “;” and the styling is wrapped within the ” “. Your width can be fixed (ie. 500px) or fluid (ie. 50%). This DIV would look like this:

DIV Content

As you can see, this looks very basic. Now we’re going to add some padding between the text and the border, make the background of the DIV grey and center the entire DIV on the screen.

<div style=”width: 75%; border: 1px solid #000000; padding: 10px; background: #cccccc; margin: 0 auto;”>
DIV Content
You can add any HTML / PHP as required within here
</div>

By adding this extra styling we now have a DIV that looks like this:

DIV Content
You can add any HTML / PHP as required within here

It’s important to know that in order to center the DIV, you need to use the “margin: 0 auto” tag. This tells the DIV that the top and bottom margins are 0 and the left and right are auto, which in industry-standard browsers will cause the DIV to be centered on the screen. In Internet Explorer, this margin style may not work however. This is due to Microsoft not following industry standard styling with the Internet Explorer browser. I believe if you want a browser that displays pages correctly, you should be using Firefox, Chrome, Safari and Opera.

You can also add DIVs inside DIVs. What we’re going to do now is add a new box inside the current one that is aligned to the right. This will have a white background and a dashed border. To do this, we need to add a second section of DIV tags, styled to our needs. We will remove the margin tag from the new DIV and replace it with “float: right;” which will align the DIV to the right side of the current DIV.

<div style=”width: 75%; border: 1px solid #000000; padding: 10px; background: #cccccc; margin: 0 auto;”>
<div style=”width: 25%; border: 1px dashed #000000; padding: 5px; background: #ffffff; float: right;”>
Floating Right DIV
</div>
DIV Content
You can add any HTML / PHP as required within here</div>

This would result in this:

Floating Right DIV

DIV Content
You can add any HTML / PHP as required within here

There you have it, basic DIV styling using CSS.

Tomorrow I will post part 2 of this series which covers how to build a website template using the methods mentioned here.

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:

Beginners Guide to building a CSS Website – Videos #6 and #7

After a lengthy hiatus, we are back with 2 new videos in our beginners guide to building your own CSS website. In the latest 2 videos we show you how to use CSS driven image-bullet menus using the UL and LI functions, and also show you how to pull your template apart and re-build it using individual PHP files and the very handy PHP Require statement.

The videos:

CSS Tutorial to build your own CSS website – Part 6

CSS Tutorial to build your own CSS website – Part 7

You can also find our videos on YouTube at: http://www.youtube.com/user/trueblue55

Share This:

CSS Tutorial to build your own CSS website

CSS TutorialAs promised, the first 3 videos are live, with an added bonus of a 4th video covering how to create a CSS file, duplicating your page and getting your website started.

Part 1 begins with the basic CSS code, and defining the parameters that will make up your website. View all 4 of the videos in the video section.

Video #1 can be found here

Continue reading

Share This: