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
CSS
Save the following code as style.css
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
// 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
// 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. |
![]() |
No comments yet













Page Info













