nicht angemeldet
höhenangabe eines div innerhalb eines div
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>
-
Hi,
Das Archiv habe ich bereits ebenfalls durchforstet, aber für mich keine praktikable Lösung gefunden.
zwar nett gemeint, aber Du brauchst Dich hierbei wirklich nicht vorsorglich entschuldigen. ;-)
Aber sobald ich div 5-7 100% Höhe angebe, kommt nur Mist raus.
Ich würde eher sagen: sobald Du überhaupt eine Höhe eingibst und hierdurch seitenintern Scrollbalken generiert werden, ist das schon Mist. Bei so vielen Elementen solltest Du generell mit Scrollbalken rechnen und besser der Seite "freien Lauf" lassen.
Ansonsten wäre die Seite für einige Besucher noch weniger benutzerfreundlich als ein Frameset, welches Du offenbar nachbilden willst.freundliche Grüße
Ingo-
Hi Ingo,
Das Archiv habe ich bereits ebenfalls durchforstet, aber für mich keine praktikable Lösung gefunden.
zwar nett gemeint, aber Du brauchst Dich hierbei wirklich nicht vorsorglich entschuldigen. ;-)na ja jedes Forum hat so seine Eigenheiten, und gelegentlich sind einige pissed, wenn man die Frage zum 2. Mal stellt ;-)
Aber sobald ich div 5-7 100% Höhe angebe, kommt nur Mist raus.
Ich würde eher sagen: sobald Du überhaupt eine Höhe eingibst und hierdurch seitenintern Scrollbalken generiert werden, ist das schon Mist. Bei so vielen Elementen solltest Du generell mit Scrollbalken rechnen und besser der Seite "freien Lauf" lassen.
Ansonsten wäre die Seite für einige Besucher noch weniger benutzerfreundlich als ein Frameset, welches Du offenbar nachbilden willst.Ich versuche mal mein Problem etwas detallierter zu beschreiben:
Die Seite möchte ich als Template für ein CMS verwenden. Den Gedanken es mit Frames aufzubauen hatte ich auch schon in Erwägung gezogen. Fand es aber "galanter" ohne auszukommen - dumme Idee im nachhinein ;-)Die einzelnen Layer sollten Quasi als Container für den generierten Inhalt dienen. Es werden zwar nur Layer 12 und 13 für den Inhalt gebraucht, aber der ganzseitige Einsatz erschien mir strukturierter und flexibler. Ich bin eigentlich ein "Table-Fan", aber man will die eines Tages aufwachen und plötzlich ist alles anders ... ;-)
Wenn ich mein Problem richtig verstanden habe, wird bei einer Höhenangabe von 100% der sichtbare Bereich im Fenster verwendet. Also rendert der Browser für div 5-7 die komplette Fensterhöhe als Layerhöhe. D.h. div 5-7 haben die gleiche Höhe wie 1 und 3 jedoch sind oberhalb 5-7 noch zwei Layer mit der Gesamthöhe von 220px.
Und genau das ist mein Problem. Layer 5-7 erzeugen einen sch.... Überhang von 220px. Und ich weiss nicht wie ich das sonst lösen könnte.Danke und schönen Gruß,
Boris-
Hi,
Die einzelnen Layer sollten Quasi als Container für den generierten Inhalt dienen. Es werden zwar nur Layer 12 und 13 für den Inhalt gebraucht, aber der ganzseitige Einsatz erschien mir strukturierter und flexibler.
Ist es aber nicht. So wie Du es angedacht hast, würden je nach Inhalt und Fenstergröße drei bis 5 seiteninterne Scrollbalken nötig werden. Warum willst Du den Boxen ihre Höhe vorschreiben, zumal Du den Platzbedarf für den Inhalt ja gar nicht kennst?
Wenn es Dir nur um das Spaltenaussehen geht, kannst Du dieses (jedenfalls bei festen Beiten) über eine Hintergrundgrafik optisch umsetzen.freundliche Grüße
Ingo
-
-