Zur Navigation

Volle Höhe des Elternelements

1 NeoMiC (Ex-Mitglied)

Hallo,

ich habe vor kurzer Zeit wieder mit HTML und CSS angefangen, nun habe ich ein Problem was ich nicht lösen kann...


		<div style="background-color:#DCDCDC">
			<div style="background-color:#000000;width:200px;float:left;height:inherit;">
				<div style="margin:10px;">
					<div style="background-image:url([dir]/images/gradient3.png);padding:5px;">
						kalender
					</div>
					<div style="background-color:#AAAAAA">
						[kalender]
					</div>
				</div>
				
				[template_switch]
			</div>
			<div style="background-color:#000000;width:200px;float:right;height:inherit;"> 
			</div>
			<div style="margin-left:200px;margin-right:200px;padding:10px;height:inherit;">
				[index]
			</div>
			<div style="clear:both"></div>
		</div>

Nun bekomme ich es nicht hin das alle 3 div Container mit dem "height:inherit" so groß sind wie das div darüber, sodass die backgroundcolor auf der vollen fläche sichtbar ist :(

für einen besseren überblick:

http://www.brainless-gaming.de/v2/

14.08.2008 21:33

2 Jörg

Wenn du die Gesamthöhe des kompletten Anzeigebereiches ausschöpfen möchtest, musst du für alle Elternelemente eine Höhe von 100% definieren:
html, body {
height:100%;
}

... ebenso beim äußersten div:
<div style="background-color:#DCDCDC; height:100%">

... dann sollten die Hintergrundfarben bis zum unteren Rand des Browserfensters durchgehen

14.08.2008 22:19

3 NeoMiC (Ex-Mitglied)

Das habe ich gemacht, aber jetzt ist der Kasten so groß wie der gesamte body und überschneidet den footer:

http://www.brainless-gaming.de/v2/

15.08.2008 00:33

4 Jörg

Naja, du hast wie gewünscht die "volle Höhe des Elternelements". In dem Fall macht diese Vorgabe aber wohl wenig Sinn, da die Höhe von Header und Footer noch hinzukommen und die Gesamthöhe damit mehr als 100% beträgt.

Wenn es dir darum geht, dass der graue Hintergrund unabhängig vom Inhalt bis zum Footer reicht, kannst du den Hintergrund auch dem übergeordneten Element zuweisen. Wenn du eine (1 pixel hohe) Hintergrundgrafik nimmst, kannst du mithilfe der Eigenschaft background-position den linken Rand für die Navigation freilassen. Anschließend überdecken Header und Footer mit ihren Hintergrundfarben den grauen Bereich und die Navigation liegt über dem Bereich, der nicht grau ist

15.08.2008 09:35 | geändert: 15.08.2008 09:36

5 NeoMiC (Ex-Mitglied)

Klappt das dann auch wenn die Navi höher ist als der Content?

15.08.2008 12:10

6 Jörg

Ja. Du kannst das auch so machen, dass das übergeordnete Element zwei Hintergrundfarben hat. Mit background-color definierst du die Hintergrunbdfarbe der Navigation. Mit background-image und background-position definierst du wie oben beschrieben den Hintergrund des Contentbereichs. Wie hoch der Navigationsinhalt oder der Inhalt des Contentbereicha sind, ist egal, da die Hintergründe zum Eltern-Element gehören, welches mindestens so hoch ist, wie das höhere Element von beiden.

15.08.2008 12:26

7 NeoMiC (Ex-Mitglied)

K, ich versteh nur noch nicht ganz wie ich das mit background-position machen soll und wie groß das Bild sein soll...

Weil bei repeat ist bei mir alles voll :>

<div style="background-color:#DCDCDC;background-image:url([dir]/images/gradient1.png);background-position:200px 0px;">
	<div style="width:200px;float:left;">
		<div style="margin:10px;">
			<div style="background-image:url([dir]/images/gradient3.png);padding:5px;">
				kalender
			</div>
			<div style="background-color:#AAAAAA;">
				[kalender]
			</div>
		</div>
		
		[template_switch]
	</div>
	<div style="width:200px;float:right;"> 
	</div>
	<div style="margin-left:200px;margin-right:200px;padding:10px;">
		[index]
	</div>
	<div style="clear:both"></div>
</div>


http://www.brainless-gaming.de/v2/

15.08.2008 16:29

8 Jörg

ich versteh nur noch nicht ganz wie ich das mit background-position machen soll

Bei "background-position:200px 0px;" sollten die ersten 200 Pixel auf der linken Seite in der Hintergrundfarbe #DCDCDC angezeigt werden - weiter rechts stattdessen die Hintergrundgrafik.

und wie groß das Bild sein soll

1 pixel hoch und so breit wie der Contentbereich

Weil bei repeat ist bei mir alles voll

Ja, das hatte ich noch vergessen - es sollte sich natürlich nur vertikal wiederholen:

background-repeat:repeat-y;

15.08.2008 16:40

9 NeoMiC (Ex-Mitglied)

<div style="background:#000000 url([dir]/images/background1.png) repeat-y 200px 0px;">

so jetzt klappt alles, ich danke dir :)

16.08.2008 01:34

... 2 Jahre und 7 Monate später ...

10 keksi (Gast)

Leider helfen diese Hintergrundbildertricks mit den "unechten" Spalten nicht bei einem variablen Seitenaufbau über Prozent-Angaben :(

15.04.2011 15:14

Beitrag schreiben (als Gast)





[BBCode-Hilfe]