This web site is about Cascading Style Sheets as a means to separate the presentation from the structural markup of a web site, and it will help you answer some of those frequently asked Questions, explains some of the Basics of CSS, gives you tips and tricks for tackling the problems with Netscape 4, offers you a tutorial about Positioning with CSS (CSS-P, web design without tables). There is also a page with interesting Links.
This page uses CSS to present the content in the best possible manner. If you can see this message, then CSS (or JavaScript) is not enabled in your browser, and the page will not appear as the designer intended.
I like to position the navigation absolutely, and the other areas "in relation" to the navigation.
There are probably many other ways to position those elements, and the reason why I choose to use this example is simple: it works (and never fix what is working...).
The CSS declaration for the Navigation is as follows:
.Navigation {/*The navigation on the left side, positioned absolutely*/
position: absolute;
top: 100px;
left: 3px;
width: 135px;
height: auto;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height : 110%;/*line-height set to 110% in order to*/
} /*have the navigation elements better separated*/
The declaration is very clear, and in plain English it says:
"I want this box for the navigation - 100 pixel from the top, 3 pixel from the left side of the document. This box is 135 pixels wide, and as long as it needs to be (defined by the content of the box). If anything is written in this box, I want it to be the Verdana-font (or the named substitutes), and I want the line height to be 10% bigger than it is defined by the font-size alone."
Now you see the letters ABCDE in dark blue, Verdana font, default size (the font-size is not yet defined anywhere), and positioned about 100px from the top, 5px from the left of the window. See an example (with the styles in the <head> section).
Go back to the stylesheet and change the top declaration of the .Navigation class, to 0px for example.
And then to 50px. And now change the color declaration in the BODY style to: #00FF33; the background-color to: #000000; or insert a background-color: #FF0000; in the .Navigation class, and change the height: auto; to height: 150px;, and now we change the font-family, and the background here and the color there...
Hey - what do we need any more declarations: let's copy and paste some text and put it beneath the closing </div> of the navigation and let's see what happens...
The text fills the <BODY>, with all the style declarations you've applied, and slides under the navigation. That means, you have to define the area where you want your main content to sit, to prevent it from interfering with the navigation.
Let's change everything back to the styles listed above,
take a deep breath
and go to the next position: the Main Area.