folgendes ist wirklich dahin-gehackt und sicherlich optimierungsfähig, vor allem die Schachtelung in "top" ist auf die Schnelle geschehen und gefällt mir noch nicht. Wenn in "top" nur ne Grafik rein soll ist das als Hintergrundbild machbar und dann mit padding-top auf das darin/darunterliegende DIV anzupassen. Nur grob getestet in IE6 und Opera7.54.
Code:
<html>
<head>
<title>TEST </title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body {
text-align: center;
font-family: "Verdana", "Arial", sans-serif;
font-size: 100.01%;
line-height: 1.45; /*keine Einheiten, da diese sonst kaskadieren*/
background-color: #CCCCCC;
color: #000000;
height: 100%;
text-align: center;
}
#frame {
width:790px;
background-color: #AAAAAA;
margin: auto;
}
#top {
float:left;
width: 420px;
background-color: #DDDDDD;
padding-top: 80px;
/*BG-Image mit background-repeat: no-repeat einsetzen*/
}
#logobanner {
width: 178px;
height: 480px;
float:left;
background-image:url(res/e2_logo.gif);
background-repeat: no-repeat;
background-color: #BBBBBB;
}
#container2 {
height: 400px;
width: 185px;
float: left;
background-color: #FFFFFF;
border-left: 8px solid #000000; /*Wahlweise als border-right am container1*/
}
#main {
height: 370px;
width: 100%;
overflow: auto;
background-color: #ABDCEF;
}
#pagetitle { /*jetzt als ID*/
background-color: #AABBFF;
width: 100%;
/*margin entfernt, wenn drumrumliegendes DIV nen border braucht,
kannst Du den auch direkt den beiden DIVS pagetitle und content verpassen*/
border: 1px dotted #FFFF00;
border-bottom: none;
}
#content { /*jetzt als ID*/
width: 100%;
background-color: #FF00FF;
border: 1px dotted #FFFF00;
border-top: none;
}
</style>
</head>
<body>
<div id="frame">
<div id="top">top
<div id="main">
<div id="pagetitle">Pagetitle</div>
<div id="content">Content</div>
</div>
</div>
<div id="logobanner">logo, darunter Banner möglich</div>
<div id="container2">
container2 für Navi
Hier kann man auch 2 weitere DIVS einbauen, wenn die Navi so unterteilt werden muss, das geht aber auch mit z.B. 2 Listen
eine für die "mainnav" und eine für die "pagenav"
</div>
</div>
</body>
</html>
Schau mal rein, ich hab einiges ausgemistet und zur Verständlichkeit immer BG-Farben angebeben, einige Kommentare findest Du im CSS.
Wichtig ist, DIVs immer eine Breite mitzugeben. Wenn Du Hintergrundbilder benutzt ist eine BG-Farbe für das entsprechende DIV auch sinnvoll, es gibt ja auch langsame Internet-Verbindungen...
Desweiteren hab ich global alle paddings und margins auf 0 gesetzt (abweichende Anpassungen geschehen dann im entsprechednen Bereich) und den von ulle oder toschi (?) favorisierten body-style eingegeben. Der Kommt jedenfalls aus diesem Forum.
Ebenfalls bedenkenswert ist eine relative Breite (in %), einzelne DIVs, die an Grafiken angepasst sind, kannst Du darin ja fix machen.