nicht angemeldet
CSS-Seitenlayout. 3-spaltig, dynamischer Mittelteil.
Hab da mal was in CSS gebastelt... hoffentlich läuft es auf allen Browsern.
Kann man das Layout unten so verwenden?!?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Layouttest</title>
<style type="text/css">
* { margin:0;padding:0;}
#header{
display:block;
background-color:#fcc;
}
#menu{background-color:#cff;float:left;
width:170px;
height:400px;
}
#main{display:block;}
#addon{
background-color:#fcf;
float:right;
width:170px;
height:400px;
}
#footer{
display:block;
background-color:#cfc;
clear:both;
}
#content{
padding:2px;
background-color:#f99;
margin-left:170px;
}
#torso{}
#topnav{
float:right;
background-color:#ccf;
}
#tabnav{
padding-left:170px;
background-color:#ffc;
}
#breadcrumbs{background-color:#0fc;}
</style>
</head>
<body>
<div id="torso">
<div id="header"><div id="topnav">Top-Navigation</div>this is<br /> the header
<div id="tabnav">Tab-Navigation</div>
</div>
<div id="menu">menu <br />menu <br />menu <br />menu <br />menu <br />menu <br />menu <br />menu <br />menu <br /></div>
<div id="main">
<div id="addon">Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon Addon </div>
<div id="breadcrumbs">breadcrumbs breadcrumbs breadcrumbs breadcrumbs </div>
<div id="content">main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main </div>
</div>
<div id="footer">footer </div>
</div>
</body>
</html>
-
Hallo,
]... hoffentlich läuft es auf allen Browsern.
für Netscape 4 (4.8 beim Test) sieht es besser aus wenn die margin-Angabe
bei content per CSS-Weiche versteckt wird, z.B.:#content{
padding:2px;
background-color:#f99;
}
* #content {margin-left:170px;}Bei viel Text im Content geht es irgendwann unter Addon weiter,
stört aber vielleicht nicht, eher vielleicht die Höhen von 400px(?).Grüsse
Cyx23