Tutorial 01: The basics of a CSS layout (part 2)
Okay, so we have the skeleton. Now what's left is adjusting everything so that in the end it will look like here.
We start from body again. Let's look at what we already have:
body {
background: #cccccc;
margin: 0;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 23px; /* changed from 20px, personal preferences */
}
First off, color #cccccc is too dark, so we change is to #f0f0f0 which is light gray (darkest version of lightest gray to be exact), and then add the background image bg.jpg
background: #f0f0f0 url('images/bg.jpg');
The default background repeat is along x and y axis, and that's what we want so we leave it just like that. The background color is defined in case the background image didn't load or was loading too slow, and since in a moment we will have container background color white and default body bgcolor is white too, so container wouldn't be visible.
Okay, one more change in body and we're done here. That will be margin. We need margin at the top of the page and at the bottom, so we add:
margin-top: 50px; margin-bottom: 50px;
There are a few variation of this:
margin-top: 50px; margin-bottom: 50px; margin: 0;
it is correct, but I don't like using such, overwriting general margin with specific ones within the same brackets.
or:
margin-top: 50px; margin-right: 0; margin-bottom: 50px; margin-left: 0;
now, that's better.
OR my personal favorite:
margin: 50px 0 50px 0; /* the order goes: top right bottom left (clockwise) */
You're free to choose whichever version you want, all are correct, I would be using the last one, since it needs only one line. Many webdesigners I know prefer to write 4 separate lines to be sure which one is which, I have no problem with remembering the order so I prefer one line instead of four. For you, though, it's better o write 4 lines, and that's why for your sake I'm gonna make this tutorial this way *sob sob* (I just don't like it...)
So, the body now look this way:
body {
background: #f0f0f0 url('images/bg.jpg');
margin-top: 50px;
margin-bottom: 50px;
margin-left: 0;
margin-right: 0;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 23px;
}
Finally, we can go to container, whew. Now let's make it quick.
div#container {
background: #ffffff; /* changed from #bbbbbb - too dark */
margin: 0 auto;
text-align: justify; /* it's convenient to add it here, so it will be valid for all nested divs */
width: 620px;
}
Margin with value auto means that the layout will be centered. IE6 (IE7 probably too) accepted centering by adding text-align: center; to body, but don't use it, sometimes I use it just in case so that I know everything will be fine on IE, but that's not necessary.
No changes to div#top and div#nav (this one will be edited later).
The next one is div#content, here we add padding - the inner margin, so the text will be moved from the edges. I usually set it seprately for p element, but it's safer this way, in case you forget to take something into <p></p>.
div#content {
padding-left: 10px;
padding-right: 10px;
padding-top: 0;
padding-bottom: 0;
width: 600px;
}
ATTENTION! The width changes! Is you simply add two side paddings you will see the width changed, so in order to leave it the way it was it is: 620px - (10px + 10px) = 600px. That's VERY VERY VERY important to remember about here. (That's why I prefer to set it for p, then p uses margins, and margins are relatively harmless).
We're almost done! Only footer and menu are left. Footer comes first since there's less to do
div#footer {
background: #ffffff url('images/footer.jpg') right top no-repeat;
height: 82px; /* the height of footer image */
text-align: center;
width: 610px; /* leaving the space from the right edge of the container as it's not done in the image itself */
}
Since I don't want to add padding here, to avoid situation like in content div, we define p element for footer:
#footer p {
margin: 0; /* there is margin defined by default, so we set it to zero */
padding-top: 20px; /* default padding is zero, so it's okay to write only one line */
}
This way we're coming into defining elements, so we can add here a few more lines for good look.
#footer p {
color: #787878;
font-style: italic;
letter-spacing: 1px;
margin: 0;
padding-top: 20px;
}
Similarly, look of the links is defined
#footer a {
border-bottom: 1px dotted #cccccc;
color: #676767;
text-decoration: none;
}
#footer a:hover {
border-bottom: 1px dotted #aaaaaa;
color: #121212;
}
I expanded .html file by adding a few additional lines to the footer so that it doesn't look that empty.
And the last thing, that is: menu. Menu is done with using ul list. And all the secret is lying into properly styling it. But first we go to our div#nav which is the following:
div#nav {
background: #aaaaaa;
height: 70px;
text-align: center;
width: 620px;
}
And we pretty much remove it. The background isn't needed since there already is general background for container and we don't need to overwrite it, height also won't be needed. Leave the last two lined that is text-align and width.
That's all for this div definition. The magic must be done to the list itself.
First of all, remember lists have it's own margin and padding (about what I forgot a few times and couldn't figure out why Firefox, Opera, Safari, etc. work okay, but IE7 doesn't - or any of IE family, doesn't mean which in this case, same everywhere). So first we clear them:
#nav ul {
line-height: 35px;
margin: 0;
padding: 0;
}
I already added line-height for this element, the meaning of this is such that is "replces" div's height that's been removed. The value for that has to be set either way (general 23px would be too small for the font and that would cause problems in IE), so we can remove height since it has no meaning. Hint: you can change the value of line-height and see what happens. Such checks are sometimes necessary, to check if something is working, I usully add one more digit, so 2-digit number turns into 3-digit number, and unless you change 99 to 100 and such the difference will be visible, ex. 35px -> 235px or 350px.
Now, the list, default list is vertical, but this one here is horizontal, that's done thanks to display: inline atribute for li.
#nav ul li {
display: inline;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-style: italic;
}
The background in this case using paddings for a element. Hint: if you add padding to ul li then that will be the spacing between element of the list (in this case, from the look we can call them blocks, even though technically speaking - they are not blocks); if you add this padding to a you will get the look of blocks. Put padding into ul li and see what will happen (but remove it from a at that time!)
#nav ul li a {
background-color: #fafafa;
border-bottom: 1px solid #e0e0e0;
color: #53b1d6;
padding-top: 5px;
padding-bottom: 2px;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
}
#nav ul li a:hover {
background-color: #f7f7f7;
border-bottom: 1px solid #53b1d6;
color: #53b1d6;
text-decoration: none;
}
This way we reached the end of this tutorial! Thanks for your attention!
I hope it was helpful to you. The very basics of creating a simple CSS layout. I will post a few more lines of CSS here, which are for "cosmetic" purposes only, no connection with the construction of the layout itself. So I won't be explaining them, sorry ^^;;;
#content p {
margin-top: 10px;
margin-bottom: 25px;
margin-left: 0;
margin-right: 0;
}
#content h2 {
border-bottom: 1px dotted #cccccc;
color: #e8a4ae;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
font-style: italic;
font-weight: normal;
letter-spacing: 2px;
margin-top: 20px;
margin-bottom: 15px;
margin-left: 70px;
margin-right: 20px;
text-align: right;
text-transform: capitalize;
}
The end!
Check out my other tutorials! (: