Tutorial 01: The basics of a CSS layout
Wanna learn how to make a cross-browser compatible nice-looking CSS-based design? It's really not that difficult. In fact, it's a lot easier than you may think ;)
Our point is to make a layout like the one here, what means the layout consists of 5 main divs:
div#container - this is the div that includes all the other ones; here we define if the layout should be centered, aligned to left or right, the width of the layout and the background
div#top - the header of our layout, can be also called div#header but top is simply shorter name; here we usually put some graphical header, do that this div requires setting width and height
div#nav - the navigation div, main menu
div#content - the div where the text goes
div#bottom - div#footer optionally, personally I use bottom, I just learned that way; in the footer div I usually put copyright and validation info
Download tutorial files pack
You will need the images for the example layour shown in this tutorial. It's good to heave the code as well.
We will need 2 files: one .html file and one .css file. The most basic .html file will like like that:
<html> <head> <title>Example</title> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="container"> <div id="top"> </div> <div id="nav"> <ul> <li><a href="">link 1</a></li> <li><a href="">link 2</a></li> <li><a href="">link 3</a></li> </ul> </div> <div id="content">
// the text goes here
</div> <div id="bottom"><p>© 2009 Justyna Fryczak<br /> Valid XHTML 1.0 and CSS 2.1</p></div> </div> </body> </html>
Here, I used id tag for divs. To learn more about div's id and class check my other tutorial.
Before defining divs it would be a good idea to define body, just like in the following example:
body {
background: #cccccc;
margin: 0;
}
Here, in body we can also add definition of the font for the entire website, then the code lookes this way:
body {
background: #cccccc;
margin: 0;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px; /* optionally font-size: 8pt; we can define fonts in pixels or points,
I find pixels more suitable, others prefer points, it doesn't really matter */
line-height: 20px;
}
Now, we can go to defining the divs. Here I'll be using fixed widths because they are more appropriate in case of defined graphic headers than flexible widths which should be used very carefully by people who have a bit more experience in CSS. It's nothing wrong to use flexible widths, however there are a few things to remember (and cross-browser is more difficult in some cases). Also, the graphical layout must be adapted to fixed widths.
Let's begin with the container div - that will be the most outside div, containing the entire layout (as you may have noticed looking at HTML code).
div#container {
background: #bbbbbb;
margin: 0;
width: 620px;
}
Nothing difficult here, right? Onto header now^^
div#top {
background: #ffffff url('images/main.jpg') no-repeat;
height: 250px;
width: 620px; /* or 100% I prefer to write in pixels 'cause it's not always true for 100%,
depending on the graphics, again */
}
You can also define background another way, instead of one general tag for background you can use separate:
background-color: #ffffff;
background-image: url('images/top.jpg');
background-repeat: no-repeat;
And the same goes with navigation, content and footer divs:
div#nav {
height: 70px;
text-align: center;
width: 620px;
}
div#content {
width: 620px;
}
div#footer {
background: #ffffff url('images/footer.jpg') right top no-repeat;
height: 70px;
text-align: center;
width: 620px;
}
As you may have noticed, one more value was aded to background - this is the position of background which also may be defined as
background-position: right top;
Position takes two values: horizontal (x-axis) and vertical (y-axis). Default if left and middle.
Now with all the divs defined you have simple one-column layout. Fill the content part with text and we're all set and ready to go to another part of this tutorial which will be formatting these divs :D
You can preview my WIP files here: .html (.txt version) & .css. Doesn't look very impressive, huh? That's gonna be corrected in a moment (: