This tutorial will explains how to design page's layout for your site using a css file. In the previous tutorilas 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.
Design page layout using CSS
This tutorial will explains how to design page's layout for your site using a css file. In the previous tutorilas 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;}
The basic page structure is ready!
|
