Thanks Max,
You are going to die when you see how simple the actual layout is. In a nutshell you create your site in divisions (that's what the div
tag is for).
So the basic HTML layout of my entire site without the content is simply this...
(I didn't add HTML brackets because the forum tries to implement the code)
div id="container" [this is the entire box containing my site]
div id="top" [the header with my logo]
div id="leftnav" [My left navigation]
div id="sidebar" [My right sidebar]
div id="content"[My main text]
div id="footer" [My footer]
That's the layout for my entire site. And what you do with CSS is you define the attributes for each of those ID's in your style sheet.
So my "container ID" (which is the entire box my content sits in) is 850 pixels wide with a background of that pinkish color, etc. All that is declared in the style sheet so if I ever wanted to change the width of my site, I just change that one number in my style sheet.
My left nav is 140 pixels wide with the gray background, 14pt font, bold etc. etc.
So you use your style sheet to define all the parameters for each section. And how you get everything on the left and right is you tell the 's to "float" left or right. So that's how the "sidebar" (my right column) got over to the right side, etc.
So once you have your layout in div's you go to your style sheet and tell div's how to behave.
The dashed line around my columns is part of CSS. So for my "leftnav ID" section in my style sheet, I tell it to have a dashed line border on the right and bottom of the container. Yes, you can even get as specific as to what sides the border appears on. Notice the dashed line doesn't go all the way around.
That's why Dreamweaver is so helpful because it lets you know all the different attributes you can use for CSS. I didn't even know you could use dashed (or dotted) lines until I did this site. You can literally control every single aspect... even the spacing between my paragraphs and line height can be controlled.
Truly amazing.
|