CSS Hintergrund stetig gleichfarbig

PdZ

Mitglied
Hallo liebe Leute,

ich versuche eine Webseite zu realisieren, die ziemlich simpel ist, aber ich hänge an einem dummen Problem fest, was ich einfach nicht gelöst bekomme und mich aufregt.
Und zwar habe ich meine seite in simplem CSS aufgebaut. Linke navigation von oben bis unten und soll rot sein. Rechte seite soll weiss sein und den Inhalt tragen.

Das problem nun ist, ich habe die Div Boxen definiert und mit hintergrundfarben belegt aber die Navigations-Div-CSS-Box will einfach nich ganz rot bleiben.

Code:
<div style="display:block; width:1000px; height:100%;padding:0; margin:0; border:0; position:relative;">
 
	 <div style="float:left;display:block; width:396px; background-color:#ca0411; height:100%; padding:0; margin:0; border:0; position:relative;">

Wenn die Bildschirmauflösung nun 800x600 beträgt, und man deshalb scrollbalken bekommen und dann nach unten scrollt, ist genau die Fläche weiß die von anfang an QUASI bedeckt war bzw. nicht sichbar war. Also der untere Teil.
Wenn ich "height:100%" mache dann taucht dieses Problem auf. Wenn ich "height:auto" mache, dann macht er nur den Hintergrund bis zum Ende des Navitextes rot.

Hier ein Screenshot:
Bild
Ich habe absichtlich mal das Bild schwarz umrandet, damit man sieht, wo der Bereich ist, der weiß bleibt..

Ich benutze Internet Explorer 6.0 2800. 1106


Kann mir da wer helfen? :(
 
Hi,

da mir der übrige Seitenaufbau und dessen CSS-Formatierungen nicht bekannt sind, empfiehlt sich in dem Codesnippet im Elternelement eine Hintergrundgrafik einzubinden, die die Breite, sowie den gewünschten Hintergrund des Navigationblocks besitzt, und darin vertikal wiederholt wird. Die Angabe zur Hintergrundfarbe entfällt somit im Nachfolgeelement:
CSS:
html,body { height:100%; }
Code:
<div style="display:block; width:1000px; min-height:100%; height:auto !important; height:100%; padding:0; margin:0; border:0; position:relative; background:url(nav_background.png) repeat-y;">

         <div style="float:left;display:block; width:396px; padding:0; margin:0; border:0; position:relative;">


mfg Maik
 
Zurück