1) Create the structural elements using pre-defined elements like h1 and div containers you wish to distribute on the page.
2) Name the containers. I use the name box and give them a number, following the hirarchical logic.
- I usually ad a bit of blind text and one or two empty images to the containers to have a minimum context.
- This example uses h1, box 2, box 3 and a wrapping container see example 1 and table 1 below).
3) Create the wrapping container and do wrap it around box 2 and box 3.
see example 2
This container defines the scroll area and is ONLY needed in layouts with fixed elements.
see example 3
<h1> |
background-color: #3cf; |
</h1> |
<div id="wrapper"> |
background-color: #cff; |
|
<div id="box2"> |
background-color: #09f; |
</div> |
<div id="box3"> |
background-color: #0ff; |
</div> |
</div> | ||
Your structural markup looks like this: |
<h1 >How to ...</h1> <div id="wrapper"> <div id="box2"> </div> <div id="box3"> </div> </div> |
Now you have created the structure of your page and it is time for CSS.
- Use CSS override internal browser settings, set margin, padding and border to 0 for all elements:
* { margin: 0; padding: 0; border: 0}
2) Set the font declarations in body, which apply for the whole page. This page uses the following definitions:
body { color: black; background-color: #fff; font-size: 100.01%; font-family: Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;}
3 Set IE declarations for body:
* html body { width: 100%; height: 100%; overflow: hidden }
4) Create the CSS ID-styles and set background-colors and borders to set the structural elements apart.
h1, #box1, #wrapper, #box2, #box3{ background-color: #value; border: strength, color, style;}
5) Apply the necessary CSS for the fixed element h1 (Position: absolute is for IE; positon fixed is for the other browsers) and the scroll area:
h1 { margin-right: 16px; padding: 2%; position: fixed; z-index: 3; top: 0; right: 0; left: 0; width: 100%; height: auto;} * html h1 { position: absolute } * html body #wrapper { width: 100%; height: 100%; overflow: auto }
6) Set padding-top for the wrapping container to make the begin of box 2 and 3 visible when the page is loaded:
/*the wrapper*/ #wrapper { padding-top: 15%; }
7) Box 2 needs a value for width (otherwise it covers 100% of the screen), I want it to float left and I want a padding of 2% for all elements inside the box .
#box2 { padding: 2%; width: 10%; float: left;}
8) Adjust IE settings and correct 3px: bug of IE. It is simple:
*html div#box3{ height: 1em }
9) Now you are almost done with the positioning. Adjust margins and paddings for the three boxes according to your wishes with CSS and that is it. Your basic page Layout.
* { margin: 0; padding: 0; border: 0} body { color: black; font-size: 100.01%; font-family: Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; background-color: #fff; } * html body { width: 100%; height: 100%; overflow: hidden } h1 { background-color: #3cf; margin-right: 16px; padding: 2%; position: fixed; z-index: 3; top: 0; right: 0; left: 0; width: 100%; height: auto; border-bottom: 5px double #009 } * html h1 { position: absolute } /*the wrapper*/ #wrapper { background-color: #cff; padding-top: 15%; padding-bottom: 10% } * html body #wrapper { width: 100%; height: 100%; overflow: auto } /*content*/ #box2 { background-color: #09f; margin-right: 2%; padding: 2%; width: 10%; float: left; border: dotted 2px #c00 } #box3 { background-color: #0ff; padding: 2% 2% 2% 5%; border: dashed 2px #f3570c } *html div#box3{ height: 1em }
10) A few extras: I used CSS declarations for letter-spacing in my h elements, pre, p table and td in box 3. You can find these aditional settings in the internal stylesheet.