Layout mit DIV und CSS in voller Breite

fanste · 25. April 2006

Hi,

Ich habe mir hier ein kleines Layout zusammengezimmert.

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>
<title>Testpage1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body
{
	margin:0px;
	padding:0;
	height:99.3%;
	overflow: auto;
}
body
{
	font: 76% arial,sans-serif;
}

div.navigation
{
	background:#7E7E80;
	font-size: 10pt;
	color:#FFFFFF;
	font-weight: bold;
	padding: 5px;
	height: 170px;
	float:left;
	width:190px;
	margin-left:-100%
}
* div.navigation
{
	height: 160px;
}

div.leftLayer
{
	float:left;
	width:200px;
	margin-left:-100%;
}
div.leftLayer .overhead
{
	background:#7E7E80;
	font-size: 10pt;
	color:#FFFFFF;
	font-weight: bold;
	padding: 5px;
}
div.leftLayer .Content
{
	font-size: 10pt;
	color:#black;
	padding: 5px;
	background:#8C8C8E;
}

div.footer
{
	background:#7E7E80;
	color:#FFF;
	height: 20px;
}
div.footer a
{
	display:inline;
}

div.wrapper
{
	float:left;
	width:100%
}
div.content
{
	margin-left:200px
}
div.extra
{
	clear: left;
	width:100%
}
div.container
{
	height: 96.8%;
	background-color:#0000CC;
}
</style>
</head>
<body>
<div class="container">
	<!--<div class="header">
		<h1>Header</h1>
	</div>-->
	<div style="width:600px;height:1px"></div>
	<div class="wrapper">
		<div class="content">
			<img src="HimmelGras_schnittKlein.jpg" style="width: 100%; height: 170px;" alt="" />		
		</div>
	</div>
	<div class="navigation">
		Home<br />Über mich<br /><br />
		Webdesign<br />Tutorials<br />Downloads<br /><br />
		Kontakt<br />Impressum	
	</div>
	<div class="extra" style="background-image:url(headerfill.gif);height: 15px; margin-top: -3px">
	</div>

	<div class="wrapper">
		<div class="content" style="margin-left: 250px; margin-top: 30px;">
			nfyxnmyxcybyxcvbcxnbycvxcvcbvmcbvyy xcvbdc b		
		</div>
	</div>
	<div class="leftLayer">
		<div class="overhead">
			::NEWS::
		</div>
		<div class="Content">
			Home<br />Über mich<br /><br />
			Webdesign<br />Tutorials<br />Downloads<br /><br />
			Kontakt<br />Impressum	
		</div>
		<div class="overhead">
			::Statistiken::
		</div>
		<div class="Content">
			Hier kommt ein Besuchercounterscript hin
		</div>
		<div class="overhead">
			::Infos::
		</div>
		<div class="Content">
			Optimiert für eine Auflösung ab 800*600<br />
			LOGO XHTML & CSS
		</div>
	</div>	
</div>
<div class="footer" style="background-image:url(headerfill.gif);">
	© 2006 by <a href="index.php?cat=impressum" title="Zum Impressum" target="_self">Stefan Grubisic </a>
</div>
</body>
</html>

Nun stören mich aber 2 Dinge.
Wenn ich das Fenster minimiere, legt es mir den Footer (letzter DIV im Code) über den Rest der Seite. Wie bekomme ich also den Footer ans untere Ende der Seite, ohne dass ich dieses Problem habe. Der Footer soll immer am unteren Ende der Seite sein, wenn der Inhalt nicht die ganze Seite ausfüllt. Wenn er größer ist, soll der Footer natürlich mitwandern.

Das zweite: Wenn ich das Fenster in der Breite noch kleiner ziehe, verhaut es mir irgendwie das ganze Layout. Woher kommt das?

Liegt es einfach nur am Browser? Oder ist der Code nicht so gut?
Falls ich den Code no machen soll. Das habe ich vor:
- Das Layout soll immer über die ganze Bildschrimbreite gehen, egal welche Auflösung
- Die linken Spalten (Die grauen Flächen) haben eine fixe Breite von 200px. Sie sollen die gesammte Höhe einfärben.
- Die rechten Spalten passen sich dann immer der restlichen Breite an.
- Footer sollte, wenn der Inhalt nicht ausreichend ist, um die ganze Seite zu füllen, immer am unteren Bildschrimrand sein. Ansonsten soll er mitwandern.

Hoffe auf eure Hilfe.

Maik · 25. April 2006

Vielleicht helfen dir die angehängten Beispiele von Dr Dau in dem Thread div height=100% nur im IE? weiter?

fanste · 25. April 2006

Hi,

Den habe ich auch vor ca. 30 Minuten gefunden

. Habe damit und mit ein paar Links, die ich dort fand, jetzt ein neues Layout entworfen, dass nicht "auseinander fällt".

Nun habe ich nur noch ein/e Problem/Frage.
Wie bekomme ich den Footer in einem Div an den unteren Rand, ohne, dass ich "position:absolute" nehmen muss? Es kommt mir nämlich darauf an, dass man nicht scrollen muss, wenn der Inhalt nicht länger als die Seite ist, aber der Footer dennoch am unteren Rand des Browsers klebt.

Soll ich nochmal meinen neuen Code posten, damit ihr euch das besser vorstellen könnt, oder geht es ohne?

Maik · 25. April 2006

In diesem Beispiel besitzt der Footer eine feste Höhe und wird um dieses Maß mittels margin-top in den Viewport geschoben, also an den unteren Browserfensterrand. Wenn der Inhalt länger / höher als der Viewport ist, wandert der Footer mit.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html, body {
height: 100%;
margin: 0;
padding: 0;
}

#content {
position: relative;
min-height: 100%;
}

* html #content { /* Für IE */
height: 100%;
}

#head {
height: 100px;
background: #efefef;
}

.pad {
height: 30px;
}

#foot {
position: relative;
height: 30px;
margin-top: -30px;
background: #efefef;
}
-->
</style>

</head>
<body>

<div id="content">
     <div id="head">head</div>
     <p>content with some dummy text -start-</p>
     <!--<p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text -end-</p>-->

     <div class="pad">&nbsp;</div>
</div>
<div id="foot">foot</div>

</body>
</html>

fanste · 25. April 2006

Hi,

Vielen Dank. Dein Code hat mir nun die Erleuchtung gebracht, wie ich das bei mir realisieren kann. Ich war auch schon bei "relative". Habs aber wieder verworfen, weil es nicht an der Stelle war, an der es hätte sein sollen. Dabei hatte ich den Div nur an der falschen Stelle eingebaut

EDIT:
Zu früh gefreut.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
height: 99.3%;
}

div.wrapper {
border: 1px solid #dfdfdf;
margin: 0;
padding: 0;
height: 100%;
}

div.outer {
border-left: 200px solid #f7f7f7;
height: 100%;
}

div.right {
border-left: 0px solid #dfdfdf;
margin: 0;
padding: 0;
height: 100%;
}

div.left {
float: left;
width: 200px;
margin-left: -200px;
position: relative;
z-index: 10;
height: 100%;
background: #8C8C8E;
}

div.clear
{
clear: left;
height: 0;
line-height: 0;
font-size: 0;
margin: 0;
padding: 0;
}

div.navigation
{
	font-size: 10pt;
	color:#FFFFFF;
	font-weight: bold;
	background: #7E7E80;
	width: 100%;
	height: 170px;
}
div.abstand
{
	padding: 5px;
}

div.content
{
	width: 100%;
}
div.filler
{
	width:100%;
	background-image:url(headerfill.gif);
	height: 15px;
}
div.leftLayer
{
	width: 100%;
}
div.leftLayer .overhead
{
	background:#7E7E80;
	font-size: 10pt;
	color:#FFFFFF;
	font-weight: bold;
	padding: 5px;
}
div.leftLayer .Content
{
	font-size: 10pt;
	color:#black;
	background:#8C8C8E;
	padding: 5px;
}
div.footer {
position: relative;
height: 30px;
margin-top: -30px;
background: #efefef;
}
div.footerabstand
{
	width: 100%;
	height: 30px;
	background-color:#CC00CC;
}
-->
</style>

</head>
<body>

<div class="wrapper">
	<div class="outer">
		<div class="left">
			<div class="navigation">
				<div class="abstand">
					Home<br />Über mich<br /><br />
					Webdesign<br />Tutorials<br />Downloads<br /><br />
					Kontakt<br />Impressum	
				</div>
			</div>
			<div class="filler"></div>
			
			<div class="leftLayer">
				<div class="overhead">
					::NEWS::
				</div>
				<div class="Content">
					Home<br />Über mich<br /><br />
					Webdesign<br />Tutorials<br />Downloads<br /><br />
					Kontakt<br />Impressum	
				</div>
				<div class="overhead">
					::Statistiken::
				</div>
				<div class="Content">
					Hier kommt ein Besuchercounterscript hin
				</div>
				<div class="overhead">
					::Infos::
				</div>
				<div class="Content">
					Optimiert für eine Auflösung ab 800*600<br />
					LOGO XHTML & CSS
				</div>
			</div> 
			<div class="footerabstand"></div> 	
		</div>

		<div class="right">
        	<div class="content" style="height:170px;">
				<img src="HimmelGras_schnittKlein.jpg" style="width: 100%; height: 170px;" alt="" />
			</div>  
			<div class="filler"></div> 
			<div class="footerabstand"></div>  
		</div>
	</div> 
</div>
<div class="footer"><p>footer</p></div>
</body>
</html>

Wenn ich das Fenster minimiere, schiebt es mir den Footer wieder über den Rest der Seite. er bleibt also feste am unteren Rand kleben.

Die rosa Flächen sind da, um den Inhalt nicht hinterm Footer verschinden zu lassen, wenn es zu viel wird. Die Farbe kommt da nacher natürlich wieder raus.

Was mich bei meinem Code auch noch stört, ist, dass nur der Div mit dem Inhalt mitwächst. Der Rest, einschließllich des wrapper Divs bleiben unverändert.

versuch13 · 26. April 2006

He, ich hoffe ich habe dich richtig verstanden. Google mal nach "einmal erdgeschoß bitte".

Gruß

fanste · 26. April 2006

Das ist ja schonmal nicht schlecht. Nur der IE scheint da mal wieder aus der Reihe zu tanzen.

Maik · 26. April 2006

fanste hat gesagt.:
Was mich bei meinem Code auch noch stört, ist, dass nur der Div mit dem Inhalt mitwächst. Der Rest, einschließllich des wrapper Divs bleiben unverändert.

Vielleicht solltest du im DIV.wrapper eine Hintergrundgrafik einsetzen, die die linke Spalte simuliert und vertikal wiederholt wird.

Und wieso beschneidest du die Höhe für den Viewport mit height:99.3% ?

fanste · 26. April 2006

Ich weise dort eine Höhe von 99.3% zu, weil es im IE sonst einen Scrollbalken gibt. Der Footer soll ja ans untere Ende des Fenster/Inhalts. Ohne Scrollbalken. Außer der Inhlat wird größer als das Fenster.

Maik · 26. April 2006

Bei meinem zuletzt gezeigten Modell erscheint der Scrollbalken erst, wenn der Inhalt länger / höher als der Viewport ist, und das gilt auch für den IE:

Code:

html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}

Layout mit DIV und CSS in voller Breite

fanste

Erfahrenes Mitglied

Maik

fanste

Erfahrenes Mitglied

Maik

fanste

Erfahrenes Mitglied

versuch13

Erfahrenes Mitglied

fanste

Erfahrenes Mitglied

Maik

fanste

Erfahrenes Mitglied

Maik

Neue Beiträge