Hallo,
ich möchte in meinen 3 spaltigen CSS Aufbau in den oberen Bereich einen Top Bereich einbauen, der über die ganzen 3 Spalten geht. Dieser Top Bereich sollte eine Breite haben von 760 Pixel, also so breit wie der gesamte Content und eine Höhe von 150 Pixel. Das ganze sollte aber so sein, dass sich nicht der Rest nach unten verschiebt (soweit hatte ich das auch schon) und dann Scrollbalken entstehen, sondern die Höhe soll dann wieder 100% des Browserfensters einnehmen ohnen Scrollbalken.
Wie kann ich das machen.
Hier der Quelltext:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>unbenanntes Dokument</title>
<style type="text/css">
html {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
width: 100%;
height:100%;
text-align: center /* Zentrierung für den IE */
background-color:#333333;
}
#content {
margin: 0 auto; /* Zentrierung andere Browser */
width: 760px;
height:100%;
text-align: left; /* Schriftausrichtung in allen Browsern linksbündig */
background-color:#ffffff;
}
#content #menue {
margin: 0;
width: 150px;
height:100%;
float: left;
background-color:#55442f;
}
#content #news {
margin: 0;
width: 150px;
height:100%;
float: right;
background-color:#cc552f;
}
#content #inner {
margin: 0 150px;
height:100%;
background-color:#fff;
}
* html #content #inner {
position: absolute;
margin: 0;
width: 460px;
</style>
</head>
<body>
<div id="content">
<div id="menue">Menue</div>
<div id="news">News</div>
<div id="inner">
<p>Übersicht</p>
<p>Impressum</p>
</div>
</div>
</body>
</html>
Gruss
Thomas