nicht angemeldet
Height:100% bezieht sich nicht auf Elternelement
Ich will ein Layout machen, dass ungefähr so wie folgt aussieht. Dabei soll alle 3 divs bündig mit dem Viewpoint enden:
____________________________
| |_________3__________| 1+2 div#links
| 1 | |
|- - - -| | 3 div#rechtsoben
| | 4 |
| 2 | | 4 div#rechtunten
| | |
|_______|____________________|
1 und 2 ist zusammen ein Div-Container. Die 1 soll schwarz sein und die 2 ein Farbverlauf von schwarz zu blau sein (gezogenes Bild 3 x 800px).
Dem Container habe ich height:100% zugewiesen, sowie dem Bild im Bereich 2. Das Bild zieht es jetzt aber über den Div-Container nach unten hinaus (Firefox) oder den gesamten Container zieht es auf über 100% (IE).
Was habe ich falsch gemacht?
Quellcode:
<style type="text/css">
html {
width:100%; height:100%;
}
body {
width:100%; height:100%;
background-color:none;
color:black;
}
div#links {
margin-top: 0px; margin-left: 0px;
float: left;
width: 162px; height: 100%;
padding: 0px;
border: 1px solid red;
}
div#rechtsoben {
margin-top: 0px; margin-left:170px; margin-right: 0px;
height: 100px;
padding: 0px;
border: 1px solid red;
}
div#rechtsunten {
margin-top: 10px; margin-left: 170px;
margin-right: 0px; margin-bottom: 50px;
height: 100%;
padding: 0px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="links">
<div style="background-color:black; height:200px; width:100%; padding:0px; margin:0px"></div>
<img src="pics/vertical.gif" style="width:100%; height:100%" alt="">
</div>
<div id="rechtsoben">
<img src="pics/horizontal.gif" style="width:100%; height:100%" alt="">
</div>
<div id="rechtsunten">
<p>INHALT<br>INHALT<br>INHALT</p>
</div>
-
Ich will ein Layout machen, dass ungefähr so wie folgt aussieht. Dabei soll alle 3 divs bündig mit dem Viewpoint enden:
____________________________
| |_________3__________| 1+2 div#links
| 1 | |
|- - - -| | 3 div#rechtsoben
| | 4 |
| 2 | | 4 div#rechtunten
| | |
|_______|____________________|So eine Kontruktion ist mit einfachem CSS nicht wirklich möglich, da es nahezu unmöglich ist, 2 <div>s bündig abschließen zu lassen. Beschränke dich daher darauf, dass es so aussieht, als wären da die 4 Boxen und verlange z.B: vom <div id="links"> garnicht, dass es bis unten geht, sondern lass es z.B: über ein Hintergrundbild des <body> so aussehen.
-
So eine Kontruktion ist mit einfachem CSS nicht wirklich möglich, da es nahezu unmöglich ist, 2 <div>s bündig abschließen zu lassen. Beschränke dich daher darauf, dass es so aussieht, als wären da die 4 Boxen und verlange z.B: vom <div id="links"> garnicht, dass es bis unten geht, sondern lass es z.B: über ein Hintergrundbild des <body> so aussehen.
Und was ist mit schwerem CSS? :)
Wenn ich jetzt aber ein Riesen-Hintergrundbild realisiere, nimmt das noch ziemlich viel Platz weg und bis das geladen ist, denk ich mal, dauert das auch ziemlich lange.
-
Und was ist mit schwerem CSS? :)
Das können einige Browser wie IE nicht. ;)
Wenn ich jetzt aber ein Riesen-Hintergrundbild realisiere, nimmt das noch ziemlich viel Platz weg und bis das geladen ist, denk ich mal, dauert das auch ziemlich lange.
Naja. Wenn es sich nur um einfarbige Flächen handelt, werden die im png-Format sehr gut komprimiert. Natürlich musst du mit background-repeat und background-position das bild entsprechend anpassen, ausrichten und sich wiederholen lassen.
-
Wenn ich jetzt aber ein Riesen-Hintergrundbild realisiere, nimmt das noch ziemlich viel Platz weg und bis das geladen ist, denk ich mal, dauert das auch ziemlich lange.
Naja. Wenn es sich nur um einfarbige Flächen handelt, werden die im png-Format sehr gut komprimiert. Natürlich musst du mit background-repeat und background-position das bild entsprechend anpassen, ausrichten und sich wiederholen lassen.
Naja eigentlich handelt es sich um zwei "Leisten" mit Schwarz-Blau-Farbverlauf jeweils oben und links.
Aber da könnte man doch mit JavaScript nachhelfen, oder?!
Davon habe ich zwar nicht so wirklich Ahnung, aber schon eine Idee. Da gibt es doch sein einen Befehl mit dem man den Viewpoint herausbekommt. Und dies könnte man dann doch als Grundlage für die Breiten und Höhenangabe nehmen. (Müsste ich mich bloß mal in JavaScript reindenken...)-
Ich hab es jetzt so hinbekommen, wie ich es mir vorgestellt habe. Dazu musste ich allerdings das Layout ein bisschen ändern:
____________________________
|______________1_____________|
| | |
| | |
| 2 | 3 |
| | |
| | |
|_______|____________________|Bereich 1 habe ich auf 100% Breite gesetzt. Mit Javascript habe ich dann die Breite in Pixel Bereich 3 vererbt und dann die Höhe in Pixel von Bereich 3 zu Bereich 2 vererbt.
Jetzt passt sich die 1 und somit auch die 3 der Fensterbreite an und Bereich 2 hört mit Bereich 3 bündig auf.
-
-
-
-