home | tutorial | css | 3 spalten, header, footer layout
hier nun ein beispiel zum klassischen layouts einer seite mit 3 spalten,
header und footer. ich habe es nicht auf ganz alten browsern
getestet. es sollte aber ab ie 5 funktionieren. das ganze ist bewußt
einfach gehalten. damit ihr dann selber die farben, hintergründe, usw ändern
könnt. es ist quasi nur als grundbaustein gedacht. das ganze ist zentriert,
falls ihr es linksbündig haben wollt einfach mal 'text-align:center;'
im body rauslöschen...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>3 spalten, header, footer, made by kapetanov</title>
<style type="text/css">
<!--
body{
text-align:center;
margin:0;
padding:0;
}
#container{
width:760px;
margin:0 auto;
text-align:left;
}
#header{
width: 760px;
background-color: #FFFFCC;
}
#content{
width:440px;
float:left;
background-color: #CCFF99;
}
#sub-content{
width:160px;
float:left;
background-color: #CCFFFF;
}
#navigation{
width:160px;
float:left;
background-color: #33FFCC;
}
#footer{
clear:both;
background-color: #CCFFCC;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">dein header</div>
<div id="navigation">deine navigation</div>
<div id="content">dein content</div>
<div id="sub-content">dein sub-content</div>
<div id="footer">dein footer</div>
</div>
</body>
</html>