✔ Div Layout - Hintergrundproblem

Status
Nicht offen für weitere Antworten.
S

sente

Erfahrenes Mitglied
Hey, habe wieder mal ein Problem mit der Realisierung eines Layouts und Div's. :mad:

Geplant ist oben ein Header der über 100% der Breite geht und unten ein Footer, der über 100% der Breite geht. Nur will das ganze nicht wirklich so wie ich will. :/
Der obere BG des Headers wird richtig dargestellt und der Footer ist leider nicht Unten, sondern klebt ganz Oben. :confused:

Sources:
HTML:
HTML: 
<body>
	<div id="Container_all">
		<div id="Bottom"></div>
	</div>	
</body>

CSS:
Code: 
*{ font-family:Arial, Helvetica, sans-serif; font-size:12pt; color:#35434b; }

html, body{ 
	margin:0px; padding:0px; height:100%; 
	background-image:url(./images/Header_Background.jpg);
	background-repeat:repeat-x;
	background-color:#FFFFFF; 
}

div#Container_all{
	width:100%;
	min-height:100%;
	height:auto !important;
	height:100%;
}

div#Bottom{
	height:76px;
	min-width:100%;
	width:auto !important;
	width:100%;
	background-image:url(./images/Bottom_Background.jpg);
	margin-bottom:0px;
	margin-top:auto;
}

Danke,
mfG Chris
 
Hallo sente,
wenn der Footer im "Container_all"-Block am unteren Ende positioniert werden soll, dann musst du ihn dort absolut positionieren. Damit das funktioniert, müsste auch dieser Block (relativ) positioniert werden.
Etwa so:
Code: 
div#Container_all {
    position: relative;
    width:100%;
    min-height:100%;
    height:auto !important;
    height:100%;
}
div#Bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    height:76px;
    min-width:100%;
    width:auto !important;
    width:100%;
    background-image:url(./images/Bottom_Background.jpg);
    margin-bottom:0px;
    margin-top:auto;
}
Dazu gibt es übrigens ein Tutorial von Maik: CSS-Layout mit 100%-Höhe
 
Hi,

falls der "Footer" keinen Inhalt enthalten soll, liesse sich das Hintergrundbild auch direkt im DIV #Container_all entsprechend positionieren:

Code: 
div#Container_all{
        width:100%;
        min-height:100%;
        height:auto !important;
        height:100%;
        background:url(./images/Bottom_Background.jpg) left bottom;
}
 
Hallo, danke für die schnellen Antworten.
Für den Footer war schon ein Einhalt geplant, ansonsten hät ich auch gewusst wie machen. :D

Und danke Hela, so habe ich's eigentlich schon probiert gehabt nur im Container_all nicht "Position: relative" gesetzt, weil ich dachte das ist sowieso default?! :confused:
Aber so funktionierts, danke vielmals. :)

MfG
Chris
 
Und das nächste Problem.
Und zwar soll jetzt der Content zwischen dem Header und dem Footer immer bis ganz unten zum Footer gehen (also 100% height haben).s

Im Content div sollen dann jeweils noch ein top, inner und bottom dazu kommen (wegen dem Layout). Daweil existiert nur das _inner, was sich eben auf 100% dann strecken sollte.

Gedacht habe ich mir das ganze so:
Code: 
div#Content{
	width: 994px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: 1px red dashed; /* test case */
}
div#Content_inner{
	width: 994px;
	height: min-height: 100%;
	height: auto !important;
	height: 100%;
	bottom: 0;
	border: 1px blue dashed; /* test case */
}
geht aber nicht. :confused:

Gesamtes,
HTML:
HTML: 
<body>
	<div id="Container_all">
		<div id="Header">
			<div id="Header_TopLeft"></div>
			<div id="Header_TopRightNavi"></div>
		</div>
		<div id="Navi_Bottom"></div>
		<div id="Content">
			<div id="Content_inner">
			</div>
		</div>
		<div id="Bottom"></div>
	</div>	
</body>

CSS:
Code: 
/* CSS Document */
*{ font-family:Arial, Helvetica, sans-serif; font-size:12pt; color:#35434b; }

html, body{ 
	margin: 0px; padding: 0px; height: 100%; 
	background-image: url(./images/Header_Background.jpg);
	background-repeat: repeat-x;
	background-color: #FFFFFF; 
}

div#Container_all{
	position: relative;
	width: 100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
div#Header{
	width: 994px;
	height: 111px;
	margin: auto;
	left: auto;
	right: auto;
}
div#Header_TopLeft{
	width: 164px;
	height: 111px;
	float: left;
	background-image: url(./images/Header_TopLeft.jpg);
	background-repeat: no-repeat;
}
div#Header_TopRightNavi{
	width: 830px;
	height: 111px;
	float: right;
	background-image: url(./images/Header_TopRight.jpg);
	background-repeat: no-repeat;
}
div#Navi_Bottom{
	width: 994px;
	height: 32px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(./images/Header_BottomLeft.jpg);
	background-repeat: no-repeat;
}
div#Content{
	width: 994px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: 1px red dashed; /* test case */
}
div#Content_inner{
	width: 994px;
	height: min-height: 100%;
	height: auto !important;
	height: 100%;
	bottom: 0;
	border: 1px blue dashed; /* test case */
}
div#Bottom{
    position: absolute;
    bottom: 0;
    left: 0;
	height: 100px;
	min-width: 100%;
	width: auto !important;
	width: 100%;
	background-image: url(./images/Bottom_Background.jpg);
	margin-bottom: 0px;
	margin-top: auto;
}

Danke vielmals,
mfG
Chris
 
sente hat gesagt.:
so habe ich's eigentlich schon probiert gehabt nur im Container_all nicht "Position: relative" gesetzt, weil ich dachte das ist sowieso default?! :confused:
Zum Vergrößern anklicken....
Als "Default" gilt position:static.

sente hat gesagt.:
Im Content div sollen dann jeweils noch ein top, inner und bottom dazu kommen (wegen dem Layout). Daweil existiert nur das _inner, was sich eben auf 100% dann strecken sollte.
Zum Vergrößern anklicken....

Vielleicht solltest du mal die angehängten Beispiele in meinem CSS-Tutorial CSS-Layout mit 100%-Höhe genauer studieren, denn wenn das DIV #Content_inner auf 100% gestreckt wird, verlängert sich das komplette Layout in den nicht-sichtbaren Bereich des Browserfensters, und muss gescrollt werden, obwohl noch kein entsprechender Inhalt vorhanden ist.
 
Hallo,
danke für die schnelle Antwort.

Zu deinem Beispiel:
Du hast außen rum das "wrapper" wo du schon im vorhinein als Backgroundimage die 3 Spalten "zeichnen" lasst. Dann passt du den Header und den Footer darin Oben und Unten an - ab dem Zeitpunkt werden deine 3 Spalten Oben und Unten abgeschnitten, sehe ich das richtig? :confused:
Mein Problem ist, dass ich de Content aus einem Top (ist ein nach oben abgerundetes Viereck) aus dem _inner (ist ein 1px hoher Backgroundbalken, der über die restliche Höhe gestreckt werden soll) und Content_Bottom (ist ein nach unten abgerundetes Viereck).

Das Problem sind die abgerundeten Ecken des Layouts, welche ich nur mit den images machen kann. :confused:

MfG
Christof
 
Der Trick liegt darin, dass der angedachte Hintergrund für den Inhalt im übergeordneten Element (#wrapper) eingebunden wird, das eine Mindesthöhe von 100% im Browserfenster besitzt.

Da du aber nun über und unter dem Inhalt eine weitere Grafik "anhängen" willst, funktioniert das auf diese Weise leider nicht, denn das "Content"-DIV erstreckt sich nicht bis zum unteren Fensterrand, was der Hintergrund augenscheinlich suggeriert, sondern besitzt tatsächlich nur die Höhe, die sein Inhalt von ihm abverlangt. Und wenn du es zusätzlich mit einer 100%-Höhe ausstattest, verlängert sich das komplette Layout in den nicht-sichtbaren Bereich des Browserfensters.

Den Effekt kannst du ganz leicht überprüfen, wenn du in deinem zuletzt gezeigten Stylesheet dem DIV #Content height:100% zuweist.
 
Dachte ich mir schon fast, Danke.
Gibt es eine Möglichkeit (anderer Div Aufbau) mit dem man das machen könnte?

Ich häng das Layout mal dazu, vielleicht kannst Du dir dann besser etwas darunter vorstellen.

Danke u. mfG
 

Anhänge

  • Layout_withoutText.jpg
    Layout_withoutText.jpg
    61,4 KB · Aufrufe: 22
Jetzt wird es etwas "abenteuerlich", aber so sollte es funktionieren:

Das mittlere Hintergrundbild des Inhalts (linker/rechter Rahmen) bindest du im übergeordneten DIV #Container_all ein, damit es sich über die gesamte Fensterhöhe erstreckt; #Header, #Navi_Bottom und #Bottom überdecken es dann an diesen Stellen mit ihrem eigenen Hintergrund.

Den oberen Teil verwendest du als Hintergrund für das DIV #Content, und den unteren Teil vereinst du mit dem Footer-Hintergrund zu einer gemeinsamen Grafik.

;-)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück