✔ Auch ein Problem mit der DIV-Höhe.

Status
Nicht offen für weitere Antworten.
M

Markus_Hain

Grünschnabel
Bin momantan eine neue Webseite am designen.

Leider sind meine Fähgikeiten DIV Layouts betreffend fast null.
Hab schon einiges zu dem leidigen Problem mit der vollen Seitenhöhe bei DIV Layouts gelesen und auch ausprobiert aber nicht brachte mich zu einer Brauchbaren Lösung.

Hier mein bisheriges Ergebnis: http://www.familie-hain.de/test.php

Hier mal der Quellcode:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
	<style type="text/css">
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
			margin-top: 0;
		}
		#box{
			min-height: 100%;
			height: auto;
			height: 100%;
			background-color: #CCCCCC;
			position: relative;
		}
		#banner_top {
			position: absolute;
			top: 0;
			background-color: #FF0000;
			height: 110px;
			left: 0px;
			right: 0px;
		}
		#banner_bottom_left {
			position: absolute;
			top: 110px;
			background-color: #FF00FF;
			height: 20px;
			left: 0px;
			width: 160px;
		}
		#banner_bottom_right {
			position: absolute;
			top: 110px;
			background-color: #FF00FF;
			height: 20px;
			right: 0px;
			width: 160px;
		}
		#banner_bottom_middle {
			position: absolute;
			top: 110px;
			background-color: #999999;
			height: 20px;
			right: 160px;
			left: 160px;
		}
		#navigation_left {
			position: absolute;
			bottom: 0;
			background-color: #FF0000;
			top: 130px;
			left: 0px;
			width: 140px;
		}
		#navigation_right {
			position: absolute;
			bottom: 0;
			background-color: #FF0000;
			top: 130px;
			right: 0px;
			width: 140px;
		}
		#main {
			position: absolute;
			bottom: 0;
			top: 130px;
			right: 140px;
			left: 140px;
			bottom: 20px;
		}
		#footer {
			position: absolute;
			bottom: 0;
			background-color: #FF0000;
			left: 140px;
			right: 140px;
			height: 20px;
		}
	</style>
</head>

<body>
	<div id="box">
		<div id="banner_top">banner_top</div>
		<div id="banner_bottom_left">banner_bottom_left</div>
		<div id="banner_bottom_right">banner_bottom_right</div>
		<div id="banner_bottom_middle">banner_bottom_middle</div>
		<div id="main">
			Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
			Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
			Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
			Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
			Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
			Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
		</div>
		<div id="footer">footer</div>
		<div id="navigation_left">navigation_left</div>
		<div id="navigation_right">navigation_right</div>
	</div>
</body>
</html>

"footer" soll am unteren Seitenrand liegen, "main" 20px vor "footer" enden und "navigation_left" und "navigation_right" jeweils am unteren Seitenrand enden.

Hoffe ihr könnt mir helfen.

Markus
 
Hi,

nur mal grundsätzlich nachgefragt:

Wie soll sich denn der Footer verhalten, wenn der Inhalt im DIV #main größer ist, als sein vertikaler Anzeigebereich?

Soll er nach unten wandern, oder seine Position beibehalten, und dafür wird der Inhalt im DIV #main gescrollt?
 
So, ich hab mal im ersten Schritt die absoluten Positionsangaben der DIVs aufgehoben, außer beim Footer, damit dieser bei zunehmenden Inhalt nach unten wandert:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
        <style type="text/css">
                * {
                margin:0;
                padding:0;
                }
                html, body {
                        height: 100%;
                        margin: 0;
                        padding: 0;
                        margin-top: 0;
                }
                #box{
                        min-height: 100%;
                        height: auto !important;
                        height: 100%;
                        background-color: #CCCCCC;
                        position: relative;
                }
                #banner_top {
                        background-color: #FF0000;
                        height: 110px;
                }
                #banner_bottom_left {
                        background-color: #FF00FF;
                        height: 20px;
                        float:left;
                        width: 160px;
                }
                #banner_bottom_right {
                        background-color: #FF00FF;
                        height: 20px;
                        float:right;
                        width: 160px;
                }
                #banner_bottom_middle {
                        background-color: #999999;
                        height: 20px;
                        margin: 0 160px;
                }
                #navigation_left {
                        background-color: #FF0000;
                        float:left;
                        width: 140px;
                }
                #navigation_right {
                        background-color: #FF0000;
                        float:right;
                        width: 140px;
                }
                #main {
                        margin: 0 140px;
                }
                #footer {
                        position: absolute;
                        bottom: 0;
                        background-color: #FF0000;
                        left: 140px;
                        right: 140px;
                        height: 20px;
                }
        </style>
</head>

<body>
        <div id="box">
                <div id="banner_top">banner_top</div>
                <div id="banner_bottom_left">b_b_left</div>
                <div id="banner_bottom_right">b_b_right</div>
                <div id="banner_bottom_middle">b_b_middle</div>
                <div id="navigation_left">navigation_left</div>
                <div id="navigation_right">navigation_right</div>
                <div id="main">
                        Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
                        Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
                        Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
                        Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
                        Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
                        Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
                        <!--Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
                        Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
                        Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>-->
                </div>
                <div id="footer">footer</div>
        </div>
</body>
</html>
Im nächsten Schritt müssen wir noch nach einer geeigneten Möglichkeit suchen, damit die äußeren Spalten navigation_left und navigation_right a) in der Vertikalen auf 100% gestreckt werden, und b) sich ihre Höhen automatisch angleichen, wenn der Inhalt in der mittleren Spalte zunimmt.

Da es sich hier nicht um ein Layout mit fester Breite handelt, fällt die "Faux-Columns-Technik" schon mal unter den Tisch.

Aber http://www.cssplay.co.uk/layouts/3cols.html und http://redmelon.net/tstme/3cols2/ sehen eigentlich ganz vielversprechend aus.
 
Maik hat gesagt.:
So, ich hab mal im ersten Schritt die absoluten Positionsangaben der DIVs aufgehoben, außer beim Footer, damit dieser bei zunehmenden Inhalt nach unten wandert:.
Zum Vergrößern anklicken....

Hmmm ... da hätte ich auch selbst drauf kommen können Naja nachher ist man immer schlauer, vielen danke schonmal

Maik hat gesagt.:
Im nächsten Schritt müssen wir noch nach einer geeigneten Möglichkeit suchen, damit die äußeren Spalten navigation_left und navigation_right a) in der Vertikalen auf 100% gestreckt werden, und b) sich ihre Höhen automatisch angleichen, wenn der Inhalt in der mittleren Spalte zunimmt.

Da es sich hier nicht um ein Layout mit fester Breite handelt, fällt die "Faux-Columns-Technik" schon mal unter den Tisch.

Aber http://www.cssplay.co.uk/layouts/3cols.html und http://redmelon.net/tstme/3cols2/ sehen eigentlich ganz vielversprechend aus
Zum Vergrößern anklicken....

Daran hab ich auch schonmal gedacht das einfach mit einem Hintergrundbild zu lösen, aber wie du schon sagtest fällt die Möglichkeit ja leider weg.

Weiß mit aber bei den Navigationsleisten jetzt auch trotz den Links die du mir hier gepostet hast keinen Rat wie genau ich das umsetzen kann. Wäre nett wenn du mir noch nen Tipp oder so geben könntest.

Markus
 
Was für ein Hintergrund ist denn für die beiden Spalten angedacht: unifarben, gemustert, o.ä.?

Ich frage das, weil bei den beiden Beispielen werden die äußeren Spaltenhintergründe mit Hilfe von border-left und border-right erzeugt, und lassen somit nur "Hintergrundfarben", aber keine grafischen Elemente zu.
 
Bei CSS Hilft da wohl leider nur, noch einen Div-Tag rumpacken und die Naviation auf 100% dehnen.
 
Zuletzt bearbeitet:
Maik hat gesagt.:
Was für ein Hintergrund ist denn für die beiden Spalten angedacht: unifarben, gemustert, o.ä.?

Ich frage das, weil bei den beiden Beispielen werden die äußeren Spaltenhintergründe mit Hilfe von border-left und border-right erzeugt, und lassen somit nur "Hintergrundfarben", aber keine grafischen Elemente zu.
Zum Vergrößern anklicken....

Ne sollte schon en Hintergrundbild sein nicht nur ne Farbe.
 
Wenn für das DIV #box kein Hintergrundbild vorgesehen ist, liesse es sich auf diese Weise lösen:

Das Hintergrundbild für die linke Spalte wird im body-Element linksbündig positioniert, und das der rechten Spalte im DIV #box rechtsbündig.

Die Hintergrund-Angaben für #navigation-left und #navigation-right entfallen somit.

Code: 
body {
background: #ccc url(bg_linkeSpalte.gif) repeat-y left top;
}

#box {
min-height: 100%;
height: auto !important;
height: 100%;
background: url(bg_rechteSpalte.gif) repeat-y right top;
position: relative;
}

#navigation_left {
/*background-color: #FF0000;*/ /* auskommentiert = entfällt */
float:left;
width: 140px;
}
#navigation_right {
/*background-color: #FF0000;*/ /* auskommentiert = entfällt */
float:right;
width: 140px;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück