 |
|
|
 |
Web page Layout Using CSS
|
||||||||||
Nearly all new websites today using CSS (cascading Style Sheets) for both formatting and layout.
Sites by professional designers will almost invariably use CSS.
Here we will look at how to use CSS (cascading Style Sheets) for web page layout.
To illustrate it i am going to create the same layout using CSS as I use on this page with a table.
This is the layout.
| Table for logo | |
| Navigation | Content |
| Table for Footer Navigation | |
It uses 3 tables the centre table holds the side navigation and content and is a table with 2 columns. You can consider it to consist of 5 boxes.
I am going to create the same structure using CSS.
|
You need to note that we would normally be editing two pages The Web page itself and the style sheet page. If you are doing this yourself I would use an Internal style sheet and you don't need to keep changing pages. Here is the initial page that you can use as a start. You should also note that the code is HTML and so you will need to go to code or source mode in your web page editor!!! |
Using CSS you create the boxes using the div tag so here are my 5 boxes.
<div class="container"> !.. Outer wrapper
<div class="logo">
</div>
<div class="navigation">
</div>
<div class="content">
</div>
<div class="footer">
</div>
<div> !.. Close outer wrapper
This is what it looks like
You should notice the outer wrapper and the 4 internal boxes one above the other.
Now the logo and footer boxes are ok we just need to move the content to the right side of the navigation. To do that we use a single statement (float: left;) in the navigation style.
.navigation{float: left;}
Here is what the page now looks like.
Simple enough but not quite finished. If we start adding text to the content area look what happens.
This we fix by setting a column width for the Navigation column and then setting a margin greater than the column width for the content column. I have also added a clear:both; statement to the footer.
If you don't use this it won't display correctly in Firefox.
Here is the style sheet with the modifications and I've taken out the background colouring as it was only for illustration.
|
.container { width:300px; text-align:center; } .logo .content .footer |
You should note that I've missed out everything that wasn't essential. You will need to add margins, fonts etc to complete the style sheet, but the actual two column layout structure is done with very little coding.
If you want to use it and modify it yourself here is the HTML template and here is the external style sheet used by the template.
Resources:
Newsletter
|
 |
