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.