✔ Problem mit DIV Layout

undertakerhl · 8. März 2008

Guten Abend,

ich versuche nun seit einigen Tagen ein mehr oder weniger brauchbares Layout für meine Homepage zu erstellen,
leider will mir dies nicht ganz gelingen, selbst die Suchfunktion lieferte mir keine passende Antwort,
ich hoffe mir kann hier geholfen werden.

Link: link

wie zu sehen ist erweiteren sich der Hauptberreich und die Navigationsleiste bei viel Text nicht weiter nach unten aber genau das sollten sie tun.

index.html:

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>
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
	<body>

		<div align="center">
			<div id="box" align="left">
				<div id="banner_top"></div>
				<div id="navigation_left"><img src="banner.jpg"></div>
				<div id="main_box">
					<div id="main">test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /></div>
				</div>
			</div>
		</div>
	
	</body>
</html>

style.css:

HTML:

* {
	margin:0;
	padding:0;
}
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url(../hintergrund.jpg);
	background-repeat: repeat-x;
	background-color: #fdaa2e;
}
#box{
	width:900px;
	min-height: 100%;
	top: 0px
	bottom: 0px;
	position: relative;
}
#navigation_left {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	width: 180px;
	height: 100%;
	background-image: url(../navigation.jpg);
}
#banner_top {
	height: 130px;
	background-repeat: no-repeat; 
	background-image: url(../banner.jpg);
}
#main_box {
	background-image: url(../hintergrund.jpg);
	background-repeat: repeat-x;
	position: absolute;
	top: 0px;
	left: 180px;
	width: 720px;
	height: 100%;
	background-color: #FF9900;
	margin-top: 0px;
}
#main {
	margin-top: 140px;
	width: 720px;
	max-width: 720px;
}

Schonmal vielen Dank im Vorraus

Markus

Maik · 8. März 2008

Hi,

ich hoffe jetzt mal, dass ich zur vorgerückten Stunde das angedachte Layoutkonzept aus den sichtbaren Fragmenten richtig interpretiert habe. ;-)

Wie du schon am HTML-Code erkennen kannst, habe ich da ein paar Änderungen/Umstellungen und Ergänzungen vorgenommen, denn der Hintergrund der Navi-Leiste und des Hauptbereichs müssen in einer Grafik vereint, und diese im DIV #box als senkrecht zu wiederholendes Hintergrundbild eingesetzt werden, denn nur auf diese Weise verlängert sich auch der Hintergrund, wenn im Inhaltsbereich der Text länger wird, als die 100%-Mindesthöhe.

Das neu erzeugte Hintergrundbild für das DIV #box (900*3px) hänge ich hier als Attachment an.

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>
                <link rel="stylesheet" type="text/css" href="css/style.css">
        </head>
        <body>
              <div id="hintergrund"></div>
              <div id="banner_top"></div>
              <div id="box">
                   <div id="navigation_left"><img src="banner.jpg"></div>
                   <div id="main_box">
                        <div id="main">test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
                        </div>
                   </div>
              </div>
        </body>
</html>

Code:

* {
        margin: 0;
        padding: 0;
}

html, body {
        height: 100%;
        background: #fdaa2e;
}

#hintergrund {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 120px;
        z-index: 1;
        background: url(../hintergrund.jpg) repeat-x;
}

#box {
        width: 900px;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        position: absolute;
        left: 50%;
        margin-left: -450px;
        background: url(../box_hintergrund.jpg) repeat-y;
}

#banner_top {
        width: 180px;
        height: 120px;
        position: absolute;
        left: 50%;
        margin-left: -450px;
        z-index: 3;
        background: url(../banner.jpg) no-repeat;
}

#navigation_left {
        width: 180px;
        float: left;
        margin-top: 140px;
}

#main_box {
        background: url(../hintergrund.jpg) repeat-x;
        margin-left: 180px ;
        margin-top: 140px;
}

#main {
      padding-top: 140px;
}

undertakerhl · 9. März 2008

Gaaaanz großes Danke, passt wunderbar

✔ Problem mit DIV Layout

undertakerhl

Grünschnabel

Maik

Anhänge

undertakerhl

Grünschnabel

Neue Beiträge