Monday, 8 October 2007

Conceptual design for site's layout

This post explains how to organize the HTML code to design index.php page's layout using the default.css file created previously; (for other informations about this argument see this post about the website structure, and this post about the page's layout using CSS).

Step 1: HTML code
First step, we create a file called index.php in the site root; in the previous post we have added a link to CSS file (default.css) in the index.php <head> tag and now, we use it to create the page's layout structure wich will be like this:



All pages will be loaded into main section using URL variables. Open index.php and copy and paste this code into the <body> tag:

<body>
<div id="container">
<div id="topbar"> ...topbar content... </div>
<div id="navbar"> ...navbar content... </div>
<!-- the main section where all pages will be loaded using URL variables and PHP include() function -->
<div id="main">
<div id="column_left"> ...column left content... </div>
<div id="column_right"> ...column right content... </div>
<!-- this layer solve some issue about the css design, forced the #main layer height equal to height of two column layer (#columnt_left and #column_right) inside itself -->
<div class="spacer"></div>
<!-- close #main content -->
</div>
<!-- close #container -->
</div>
</body>


Step 2: CSS file

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 graphic result will be like this:




Now, our site structure is ready to be completed adding other elements that we will see in the next lessons.

No comments:

Post a Comment