Designing a CSS based template - part VI

Now we will add the content part of our webpage. Next week we’ll be adding the (favorite) links under our navigation and I’ll also explain how to create a footer.

First we add a new id selector in our styles and we give it the width 514px (692px - 178px):

1. #content {
2. width: 514px;
3. float: left;
4. }

Since the navigation "floats" on the left, we need to add a "float: left" to our "left" id. But we also need to add it to our "content" id selector because it also floats left within our main id container:

1. #left {
2. width: 178px;
3. float: left;
4. }

We add this to our XHTML code:

1. this is the right

If the above doesn't make any sense to you, I'm sure you'll find these very helpful:

• More about Float basics
• Floatutorial

Still, our content now sticks to the navigation on the left, we want a bit of space of course so we add some padding to our style of the content container:

1. #content {
2. width: 479px;
3. float: left;
4. padding-top: 15px;
5. padding-right: 0;
6. padding-bottom: 10px;
7. padding-left: 20px;
8. }

Or we can use the shorter version:

1. #content {
2. width: 479px;
3. float: left;
4. padding: 15px 0 10px 20px;
5. }

This is exactly the same: the first value defines the padding for the top, the 2nd for the right, the 3rd for the bottom and the 4th for the left. If we add the padding we need to edit the width of our container since the actual width has now increased with 20px padding (20px left, 0 for the right). We need to change this to 494px. But since we want some space on the right (so that the text doesn't stick to our right border) we deduct it with 15 and use 479px instead.

You could argue with me on the last part and say "hey, why don't you just stick to "width: 494px" and use "padding-right: 15px"? Aha good point! Yes I tried that at first and all looked well in Safari, FireFox and Mozilla, but it didn't in Internet Explorer. The entire content jumped underneath my navigation (underneath my "left" id container). Apparently there wasn't enough space left for I.E. to make it fit on the right. This is actually the only explanation I have for this. By using my little trick everything is still perfect in every browser.

Adding the title

To create our title we add a header tag in our XHTML code:

1. This is the title

Now we will add a style for this tag to define the look of it:

1. #content h2 {
2. font: normal 18px Georgia, Times New Roman, Times, serif;
3. color: #80866A;
4. background: transparent url(images/bullet_title.gif) no-repeat;
5. width: 454px;
6. padding: 0 0 0 30px;
7. margin: 0;
8. }

We use #content h2 which means we give a style to the header 2 element (h2) within our content id. It means that all h2 elements within the content div will be viewed in this style. We could also just use "h2" without the id preceding, this would mean that this style would be applied to all h2 tags within the webpage. Adding this id in front can be handy if you want to use another styled h2 in the left container (#left h2) for example.

1. all h2 tags here will have this style

The first line of our CSS sets the style for the font: the font-weight (normal), the font-size (18px) and the font-family. Again, just like the padding, this is the short version, it sets all these values for the different font properties in 1 line of code. Next we have the color of the text, third the values for the background which is our bullet. Again I've used the short version, I define the background-color (transparent), the background-image (url to the image) and the background-repeat (no-repeat) just in 1 line. Last with the total width of our header and the padding (top, right, bottom and left).

Adding the text

This is the style for the text of the content:

1. .text {
2. font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
3. color: #5B604C;
4. margin-bottom: 10px;
5. }

We use a class now (dot in front) since we will use this style repetitively in our webpage. The first line sets the style for the font, starting with the font-size (11px) and line-height (18px) followed by the font-family. In the 2nd line we define the color of the text. And last but not least we add some space between paragraphs by adding a margin-bottom of 10 pixels.

In our XHTML code we add a paragraph tag under the h2 tag that holds our text and we apply the class "text" to it.

1. Here comes the text

-Adding the image

This is the style for the image that is aligned right:

1. .imageright {
2. float: right;
3. padding: 7px;
4. background-color: #ffffff;
5. border: 1px solid #bac1a3;
6. }

Again we use a class for this since we should be able to apply this style a couple of times within our webpage. Our image floats right within our text div container, so we add "float:right". Next we set a padding of 7px around the image and we add a white background. This will create a white area of 7px around the image. Next, we add a 1 solid pixel border in a specified color. The last line is again the short version of border-width (1px), border-style (solid) and border-color (#bac1a3). You can add another class for the left aligned images and call it ".imageleft" and use the same properties and values except for the floating part, you change "float: right" to "float: left".

Here is the final result

from www.veerle.duoh.com