Design layout and CSS code
Before you proceed, it's useful to have an idea about page's sections.
Copy and paste this code into style.css file:
/* ------------------------------
PAGE STRUCTURE
------------------------------ */
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}
/* main part */
#main{width:auto; display:block;}
#main_left{width:560px; margin-right:20px; float:left;}
#main_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 part */#footer{width:auto; display:block; height:24px;}
PAGE STRUCTURE
------------------------------ */
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}
/* main part */
#main{width:auto; display:block;}
#main_left{width:560px; margin-right:20px; float:left;}
#main_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 part */#footer{width:auto; display:block; height:24px;}
The basic page structure is ready! In the next lesson we will format index.html file, adding layer using style.css file.
gsadg
ReplyDeleteI want to know adding layer using style.css file.
ReplyDelete