18 novembre 2005

Serasera gets Tableless

It has been advocated many times that tables shouldn't be use in HTML for layout purposes", and table should be only used for data display. That's why I leaned bit by bit to tableless layout for serasera. Basing myself on what is explained in http://www.w3.org/2002/03/csslayout-howto I tried to create my 3/2 collumns layout for namana.serasera.org
I've tested it on Firefox 1.0.7 and IE 6.0. Comments and suggestions are welcome.
This is the code.

<style type="text/css">
<!--

body    {
text-align: center;
padding: 10px 0 10px 0;
}

*>html body,*>html td,*>html th body.fixedwidth{font-size:11px}

#nav {
    width: 160px;
    float: left;
    margin-left: 5px;
}
#wrapper{
    width: 780px; 
    text-align:left;
}

#content {
    width: 600px; 
    float: right;
    top: 0px;
    margin: 5px;
}

#head {
    clear: both;margin:0;padding:0 0 .5em 0;
}

#leftblock {
    width: 410px; 
    float: left;
    margin: 2,5px;
    padding: 0;
}
#rightblock{
    width: 180px; 
    float: right;
    margin: 2,5px;
    padding: 0;
}
#foot {
    clear: both;
    margin:0px;
    padding:0 0 .5em 0;
}
-->
</style>
<div id="wrapper">
    <div id="head">
    head
    </div>
    <div id="nav">
    nav
    </div>
    <div id="content">
        <div id="leftblock">
        left (or main)
        </div>
        <div id="rightblock">
        right
        </div>
    </div>
    <div id="foot">
    foot
    </div>
</div>

Aucun commentaire: