✔ Layoutproblem

Status
Nicht offen für weitere Antworten.
S

sente

Erfahrenes Mitglied
Hallo,

habe wiedermal ein kleines Problemchen mit den Divs. :-)
Und zwar geht es darum, dass die Navigation links und der Header oben die komplette Seite (also 100%) ausfüllen sollen.
Bis jetzt hab ich immer nur eines von beidem gebraucht und das über einen einheitlichen Hintergrund gelöst, aber nun steh ich an. :confused:

Zur Veranschaulichung hab ich mal den Entwurf dazugehängt.

Bin für jede Hilfe dankbar.
MfG
Chris
 

Anhänge

  • entwurf.jpg
    entwurf.jpg
    53,4 KB · Aufrufe: 14
Hallo,
Die Navigation soll in der Vertikale und der Header in der Horizontale verlaufen, aber eben über 100% des Fensters.

(Beim Entwurf hab ich paar Details raus genommen, da es ja nur ums wesentliche geht - im HTML und CSS File sind die jetzt jedoch natürlich noch drinnen.)
Momentan realisier ich die 100%-Länge der linken Navibar über den Hintergrund, wodurch der Header dann oben logischerweise nicht 100% der Breite abdeckt.

HTML:
HTML: 
<body>
	<div id="Container_all">
		<div id="Container_top">
			<div class="HeaderLeftTop"></div>
			<div id="Container_HeaderLogo">
				<div class="HeaderLogo"></div>
			</div>
		</div>
		<div id="Container_Content">
			<div id="Menu"></div>
			<div id="Content"></div>
		</div>
	</div>
</body>

CSS:
Code: 
body{ margin:0px; padding:0px; background-image:url(../images/BackgroundMenu.jpg); background-repeat:repeat-y; background-color:#e8e6f2; }

div#Container_all{
	width:auto;
	height:auto;
}
div#Container_top{
	width:auto;
	height:181px;
}
div.HeaderLeftTop{
	width:182px;
	height:181px;
	background-image:url(../images/BackgroundLeftTop.jpg);
	background-repeat:no-repeat;
	float:left;
}
div.HeaderBackground{
	width:818px;
	height:181px;
	background-image:url(../images/BackgroundHeader.jpg);
	background-repeat:repeat-x;
	float:left;
}
div#Container_HeaderLogo{
	width:818px;
	height:181px;
	float:left;
	background-image:url(../images/BackgroundHeader.jpg);
	background-repeat:repeat-x;
}
div.HeaderLogo{
	width:428px;
	height:78px;
	margin-left:auto;
	margin-right:auto;
	margin-top:70px;
	background-image:url(../images/LRLogo.jpg);
	background-repeat:no-repeat;
}
div#Container_Content{
	width:auto;
	height:auto;
}
div#Menu{
	width:182px;
	height:100%;
	min-height:100%;
	float:left;
	background-image:url(../images/BackgroundMenu.jpg);
	background-repeat:repeat-y;
}
div#Content{
	width:auto;
	height:auto;
	float:left;
}
 
Im Prinzip sollte das folgendermaßen funktionieren:

Code: 
html,body {
        height:100%;
}

div#Container_all{
        width:100%;
        min-height:100%;
        height:auto !important;
        height:100%;
        background:url(../images/BackgroundMenu.jpg) repeat-y;
}

div#Container_top{
	width:100%;
	height:181px;
}

div#Menu{
	width:182px;
	float:left;
}
 
Genau, danke, nur was war an meiner Denkweise jetzt genau der Fehler?
War doch das gleiche nur umgekehrt? (Also Navi u. Header vertauscht)

MfG
 
Du hast dem DIV #Menu eine 100%-Höhe verpasst, was zur Folge hätte, dass die Seite (ohne jeglichen Inhalt) um die Höhe des Headerbereichs nach unten gescrollt werden kann.

Desweiteren würde sich der Menühintergrund nicht nach unten fortsetzen, wenn der Inhalt im DIV #Content zunimmt und höher ist, als der Anzeigebereich des Browserfensters bzw. der Menüspalte.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück