BHS DESIGN - CSS layout model

Page Info

Page Title: CSS layout model
Description: Fixed width 750px template
Author: Dumb Genius
Submission Date: 02-06-2006 20:14

Rating & Comments

View or add comments:

(0)
Average members rating:

Wonder how to obtain a CSS template with a header, a footer, a left menu and some content on the right?
Here is some code that you can start with.

Remember the content is changed in HTML and CSS deals with the style of your web page.
If you want to adjust the width, the colors, the text, etc... it's in style.css !!!

HTML

Save the following code as index.html

Code :
// hide source code
// hide line numbers



 1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 3  <head>
 4  <title>Fixed width at 750, header/left menu/content/footer.</title>
 5  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 6  <style type="text/css">
 7  @import url("style.css");
 8  </style>
 9  </head>
10  
11  <body>
12  
13  <div id="conteneur">
14  
15        <div id="header">fixed width header: 750px</div>
16  
17        <div id="gauche"><p>menu</p>
18        <p>fixed width: 150px</p>
19            
20          <ul class="menugauche">
21          <li><a href="">Menu 1</a></li>
22  
23          <li><a href="">Menu 2</a></li>
24          <li><a href="">Menu 3</a></li>
25          <li><a href="">Menu 4</a></li>
26          </ul>
27          
28        </div>
29        
30        <div id="centre">
31          central part that "pushes" columns down.<br />
32  
33          part with content occupying rest of width<br />
34          part with content occupying rest of width<br />
35          part with content occupying rest of width<br />
36          part with content occupying rest of width<br />
37          part with content occupying rest of width<br />
38          part with content occupying rest of width<br />
39  
40          part with content occupying rest of width<br />
41          part with content occupying rest of width<br />
42          part with content occupying rest of width<br />
43          part with content occupying rest of width<br />
44          part with content occupying rest of width<br />
45          part with content occupying rest of width<br />
46  
47        </div>
48        
49        <div id="pied">fixed width footer: 750px </div>
50  </div>
51        
52  
53  </body>
54  </html>

CSS

Save the following code as style.css

Code :
// hide source code
// hide line numbers



 1  body {
 2  font-family:Verdana, Arial, Helvetica, sans-serif;
 3  font-size: 0.8em;
 4  margin: 0;
 5  padding: 0;
 6  }
 7  #header {
 8  height: 100px;
 9  background-color: #99CCCC;
10  }
11  #conteneur {
12  position: absolute;
13  width: 750px;
14  left: 50%;
15  margin-left: -375px;
16  background-color:#CCCCFF;
17  }
18  #centre {
19  background-color:#9999CC;
20  margin-left: 150px;
21  }
22  #gauche {
23  position: absolute;
24  left:0;
25  width: 150px;
26  }
27  #pied {
28  height: 30px;
29  background-color: #99CC99;
30  }
31  
32  .menugauche {
33  list-style-type: none;
34  margin: 0;
35  padding:0;
36  }
37  .menugauche li {
38  margin-bottom: 5px;
39  }
40  .menugauche a {
41  margin: 0 2px;
42  color: #000000;
43  text-decoration: underline;
44  }
45  .menugauche a:hover {
46  text-decoration: none;
47  }
48  p {margin: 0 0 10px 0;

Donation:

If you like our free quality work, make a donation by using Paypal and tell us what you would like to see improved on our site for the next few months.