Today's lesson will explains how to design page's layout for your site using a css file. In the previous lesson we have seen a typical website structure which we can use to project our site. In the css folder create a new css file called default.css where insert the css code to design the page's elements.
Now, open index.php and put this code into <head> tag:
<link href="css/default.css" rel="stylesheet" type="text/css" />
In this way index.php will get all informations about the page's design from the CSS file default.css
Page layout and CSS code
Before you proceed, it's useful to have an idea about page's sections. I suggest to use this layout (2 column fixed size):
Copy and paste this code into default.css file:
/* ------------------------------
PAGE STRUCTURE
------------------------------ */
/*
#container has an absolute width (780 pixel)
The width of inner elements is set to auto,
in this way all inner elements have the same
width of the element which contains them
*/
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
/*
div.spacer, solve an issue with #container height
in css 2 column layout.
*/
div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; height:24px;}
PAGE STRUCTURE
------------------------------ */
/*
#container has an absolute width (780 pixel)
The width of inner elements is set to auto,
in this way all inner elements have the same
width of the element which contains them
*/
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
/*
div.spacer, solve an issue with #container height
in css 2 column layout.
*/
div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; height:24px;}
The basic page structure is ready! In the next lesson we will format index.php file, adding layer using default.css file.
Related Posts
Optimize CSS files to improve code readability
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Old Comments
Good work and nice design for this blog!
Thanks for your comment :)
Ola Antonio, very usefull post!
This helps me a lot! Thank you!
Thanks for the help in showing others what you know. Much appreciated
this is best updated css from the web, I learn a lot from the example, thanks for the sharing such knowledge with us !!!.
Yi Mao
thanks for sharing.. very helpful.. keep posting
Thanks a lot, So nice tutorial
#column_right{width:200px; float:left;}
should be
#column_right{width:200px; float:right;}
Love the pencil drawing layout and labeling! Thanks and many blessings!
This kind of exampls every one can learn css and html
I don't get it.. CSS file? Where? How?
Thanx. Love this blog!
That very good of tutorial! Thank you.
I like your sketch style
where is the next lesson ?