nicht angemeldet
Hallo Leute,
ich bin am Ende mit meinen Nerven. Den halben Tag versuche ich jetzt ein HTML-Layout basierend auf divs aufzubauen. Habe ne Menge gelesen (vermutlich noch nicht genug!) aber werde nicht wirklich schlauer ...
Das Archiv habe ich bereits ebenfalls durchforstet, aber für mich keine praktikable Lösung gefunden.
Vielleicht könnt ihr mir weiter helfen?
Layout würde so aussehen
+---+-------------------------------+----------+
| 1 | 2 | 3 |
| | | |
| | | |
| +-------------------------------+ |
| | 4 | |
| | | |
| +-----+-------------------+-----+ |
| | 5 | 6 | 7 | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
|---+-----+-------------------+-----+----------+
1 = Logo
2 = Head
3 = Advertisement / Werbung
4 = Subhead
5 = Navigation
6 = Content
7 = Info
Soweit so gut. Der Aufbau ansich war einfach ... mehr oder weniger.
Aber sobald ich div 5-7 100% Höhe angebe, kommt nur Mist raus.
Es wird immer die Höhe von div 2 und 4 hinzugerechnet.
Wie löse ich dieses Problem?
Quellcode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
html {
height:100%;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #000000;
height:100%;
}
.id1 {
background-color: #FFFFFF;
height: 100%;
width: 984px;
}
.id2 {
height: 100%;
width: 802px;
float: left;
}
.id3 {
height: 100%;
width: 180px;
float: right;
background-color: #bebec3;
}
.id4 {
background-color: #000000;
height: 100%;
width: 40px;
float: left;
}
.id5 {
height: 100%;
width: 760px;
float: right;
}
.id6 {
height: 160px;
width: 760px;
float: none;
background-color: #000000;
margin-bottom: 2px;
}
.id7 {
height: 300px;
width: 760px;
}
.id8 {
background-color: #bebec3;
height: 56px;
width: 760px;
margin-bottom: 2px;
}
.id9 {
height: 100%;
width: 760px;
}
.id10 {
height: 100%;
width: 621px;
float: left;
}
.id11 {
background-color: #ebebec;
height: 100%;
width: 137px;
float: right;
}
.id12 {
background-color: #ebebec;
height: 100%;
width: 137px;
float: left;
}
.id13 {
background-color: #ebebec;
height: 100%;
width: 482px;
float: right;
}
-->
</style></head>
<body style="height:100%">
<div class="id1">
<div class="id2">
<div class="id4" style="height:100%"> </div>
<div class="id5" style="height:100%">
<div class="id6"> </div>
<div class="id7" style="height:100%">
<div class="id8"> </div>
<div class="id9" style="height:100%">
<div class="id10" style="height:100%">
<div class="id12" style="height:100%"> </div>
<div class="id13" style="height:100%"> </div>
</div>
<div class="id11" style="height:100%"> </div>
</div>
</div>
</div>
</div>
<div class="id3" style="height:100%"> </div>
</div>
</body>
</html>