Slice and code a layout Tutorial
Interested in advertising? Well, we have been in the Tutorial field for quite some time now (4 years to be exact). We receive ±1300 unique visitors per day which totals a monthly average of 39000 unique visitors, so advertising with us will definitely get your site exposed to many tutorial lovers. Head on over to the Advertise page so you can familiar yourself with more details.
Step 13:
Below the "}" of the footer add the following code. Again it contains explaning comments.
background:url("images/lm_top.jpg");
width:203px;
height:38px;
/* We change the default page font to the following */
font-family:Arial, Helvetica, sans-serif;
text-align:center;
/* With line-height you can adjust the text or images in div's, I adjusted it to 28px which is perfect for this design */
line-height:28px;
/* change the color of the text so we can see it! Default text is darker because the main content and menu boxes have a light gray color so text needs to be dark obviously. */
color:#D9DEE2;
}
/* The rest is self explanatory */
.content_top_bar{
background:url("images/c_top.jpg");
width:555px;
height:38px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
line-height:28px;
color:#D9DEE2;
}
.right_top_bar{
background:url("images/rm_top.jpg");
width:202px;
height:38px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
line-height:28px;
color:#D9DEE2;
}
Step 14:
Your probably wondering what about the gradient images? Well if you followed this tutorial you know a bit about div's already and it probably won't be to hard for you to do it yourself. But me being Celox I'll show you how I would do it 
.
Just make a new div like so
It'll look like this in the left container
<div class="left_top_bar">LEFT TOP BAR</div>
left menu
<div class="gradient"></div>
</div>
If you need more just copy them. And if you need your text to be centered use a div that centers the whole deal at once, making you code cleaner.
The CSS looks like this for the gradient
background:url("images/gradient.jpg");
width:198px;
height:2px;
/* margin 2px so it doesn't hugs the text. If you use margin and have an image background and the width of that image in the divs width, you'll need to double the margin in this case 4, and get it off the width of the div.
So for example, when you have a margin of 2px, we have 4 extra px's in the div so the image doubles itself after 202px's, making the div's total width 206px's. So we take these 4px's margin off the total width of the div making the divs width 198px. */
margin:2px;
}
Well.. That's it for this slicing,CSS and xHTML tutorial, I hope you learned a lot here today.
See my live final result.
Download template, with images, CSS and HTML.