Slice and code a layout Tutorial
As a registered user you can publish your own tutorials on this site, these tutorials will be published as so called Guest tutorials. When the tutorial is published a link to your own site will be added on the specific tutorial's page to boost your unique visitors and search engine ranking, so the more tutorials you add the more back-links you get from this well ranked site. Register an account and start publishing your tutorials!
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.
