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
No comments:
Post a Comment