If your new to css, this tutorial will be ideal for you, I wont pretend that this method is 100% correct, however it does work, but bare in mind this website is completley fixed, and is not ideal for accessibility as it will not scale text easily or will make the content fall out of the containers. However this will give you an idea of how CSS can work for creating a simple template, and get you started learning CSS.
Lets start with what we will create:
HEADER
LEFT COLUMN | CENTER COLUMN | RIGHT COLUMN
FOOTER
This is a standard three column website, in sort of a ‘newspaper’ style. Although I have critisied this design in the first instance, it is 100% practical, and can be used, or even modified for your own use, it will also support all browsers, from Internet Explorer 6 to 8, firefox 2 & 3, and even Safari.
First lets look at how this will be achieved, and remember that CSS is a series of containers Called Div’s. Divs are XHTML tags.
So here’s the basic Structure Please put this within the <body> </body> of your pages:
<div align="center">
<div style="width:900px; height:900px;">
<div style="width:900px; height:150px; float:left;"> HEADER AREA </div>
<div style ="width:300px; height:600px; float:left;"> LEFT COLUMN </div> <div style ="width:300px; height:600px; float:left;"> CENTER COLUMN</div> <div style ="width:300px; height:600px; float:left;"> RIGHT COLUMN </div>
<div style="width:900px; height:35px; float:left;"> FOOTERAREA </div>
</div>
</div>
Ok lets start by explaining what this is, its a basic layout, with nothing fancy at all, it would work as it is, but it would look pretty crap. Infact, you wouldnt see anything at all, no borders have been designed, so it would appear completely blank, 1 issue is that any borders, or padding, are ADDED on top of your width. So we hit a problem, and for the sake of this tutorial, we will just use simple work arounds such as reducing width, or increasingthe width of the page, of course this isnt ideal but the point of this is for your to learn the basics of css and layouts.
What the above contains is 7 divs.
1. Containing Div which aligns everything center.
2. Inner Container which contains the header, columns and footer
3. Header Container
4. Column 1
5. Column 2
6. Column 3
7. Footer
Its important to remember how css layouts work. They are all containers. Its also important to note that I am using the style command (style=”width:150px;”) this is a way of containing css information within the div itself. I tend to personally do this first, then move it to a class, then move it to a external stylesheet, this may be backwards, but its a process I prefer to do and hasn’t failed me yet.
Lets Add some Style:
<div align="center">
<div style="width:920px; height:900px">
<div style="width:900px; height:150px; float:left; border-bottom:1px solid #000;"> HEADER AREA </div>
<div style ="width:295px; height:600px; float:left; border-right:1px dashed #000;"> LEFT COLUMN </div>
<div style ="width:295px; height:600px; float:left; border-right:1px dashed #000;"> CENTER COLUMN </div>
<div style ="width:300px; height:600px; float:left;"> RIGHT COLUMN </div>
<div style="width:900px; height:35px; float:left; border-top:1px solid #000;"> FOOTERAREA </div>
</div>
</div>
I havent gone crazy with style, but just have a look at what this has done, obviously what this template needs is content, but this certainly gives you an idea on how css templates can work, and hopefully you can use this to experiment.
I do stress again that this is not the correct method to create a template, it is fixed pixel widths and heights, so is not ideal. But use this to learn the basics. Have fun.
Next tutorial we will look how to make those styles into css classes, and then move them to an external stylesheet.
Thanks
Wuup Team
