Tableless css design with sample code

Untitled Document

home page | free web templates | free logo templates | free webmaster resources

Tableless css design sample

Table-less CSS web design is the most efficient form of accessible site design. Using external Cascading Style Sheets to position the elements on the page while removing the unfriendly table tags, the unadulterated text can be read effectively by a range of different browsers. Here is the sample code;


	download sample file

Style

<head>
< style type=text/css>
#main {
width: 600px;
margin: auto;
align:center
}
#top {
height: 100px;
background: #eee;
border: 1px solid #999;
margin-bottom: 5px;
}
#middle {
margin: auto;
background: #fff;
}
#left {
float: left;
width: 400px;
height: 350px;
border: 1px solid #999;
background: #eee;
}
#right {
float: right;
width: 195px;
height: 350px;
border: 1px solid #999;
background: #eee;
}
#bottom {
clear: both;
height: 30px;
background: #eee;
border: 1px solid #999;
margin-top: 5px;
}
#title h1 {
font-size:14px;
font-family:tahoma;
margin-top:10px;
padding-left:5px;
padding-right:5px;
padding-top:2px;
padding-bottom:2px;
}
#text h5 {
font-size:12px;
font-weight: normal;
font-family:tahoma;
margin-top:10px;
padding-left:5px;
padding-right:5px;
padding-top:2px;
padding-bottom:2px;
}
#menu {
font-size:12px;
font-weight: normal;
font-family:tahoma;
margin-top:10px;
padding-left:5px;
padding-right:5px;
padding-top:2px;
padding-bottom:2px;
}

a.sitelinks { color:#c00; }

</style>
< /head>

Html

< body>
< div id="main">
<div id="top"></div>
<div id="middle">
<div id="left">
<div id="title"><h1>Sample Title</h1></div>
<div id="text"><h5>Sample Text</h5>
</div>
</div>
</div>

<div id="right">
<div id="menu">
<a class="sitelinks" href="#sample">Sitelinks_1</a><br />
<a class="sitelinks" href="#sample">Sitelinks_2</a><br />
<a class="sitelinks" href="#sample">Sitelinks_3</a><br />
<a class="sitelinks" href="#sample">Sitelinks_4</a><br />
<a class="sitelinks" href="#sample">Sitelinks_5</a><br />
<a class="sitelinks" href="#sample">Sitelinks_6</a><br />
</div>
</div>
<div id="bottom">
</div>
< /div>
< /body>

Untitled Document