zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Footer Problem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.01.2005, 16:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.01.2005
Beiträge: 17
blub19 befindet sich auf einem aufstrebenden Ast
Standard Footer Problem

Hallo zusammen,

habe folgendes Problem. Ich habe eine Seite mit Header, Mainteil und Footer. Header und Mainteil passen. Den Footer habe ich versucht mit position:absolute; bottom: 0px; an das untere Ende der Seite zu platzieren.

Das klappt auch so einigermaßen.

Wenn aber der Mainteil länger als die Seite ist, wird der Footer nicht mehr am Ende der Seite patziert, sondern immer noch am Ende des Bildschirmes. Also der Footer steht mitten im Mainteil.
Es soll allerdings auch so sein, dass wenn der Mainteil nicht den ganzen Bildschirm benötigt, trotzdem der Footer am Ende des Bildschirmes sein soll.

hier ist der Html und css code.
Vielen Dank für die Hilfe

Code:
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css">
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
html, body{
	height: 100%;
	margin:0px;
	padding:0px;
}
body {
	background-image: url(images/hg.gif);
	text-align: center;
}
#wrapper {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #7A7572;
	width: 735px;
	height: 100%;
	background-color:#FFFFFF;
	margin: auto;
	padding: 6px;
	}

/************ HEADER ************/
#header {
	position: absolute;
	height:42px;
	width: 735px;
	text-align: right;
	padding-top: 14px;
	overflow: hidden;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

/************ PAGEBODY ************/
#pagebody {
	width:735px;
	text-align: left;
	}


/************ FOOTER ************/
#footer{
	height: 30px;
	width:742px;
	position:absolute;
	bottom: 0px;
}	

-->
</style>
</head>

<body>
<div id="wrapper">
	<div id="header">### HEADER ### ### HEADER ### ### HEADER ### ### HEADER ### ### HEADER ### ### HEADER ### </div>
	<div id="pagebody">
		<div id="maincontent">
		  



		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. 
			Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. 
			Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. 
			Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. 
			Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. 
			Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. 
			Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. 
			Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. Dies ist ein toller Text, aber leider geht es nicht so, wie ich es möchte. </p>
		  

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

		    

			Und hier ist nochmal ein Text. Aber der Footer soll darunter sein, nicht dar&uuml;ber!</div>
	</div>
	<div id="footer">### FOOTER ### ### FOOTER ### ### FOOTER ### ### FOOTER ### ### FOOTER ### ### FOOTER ### </div>
</div>
</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.01.2005, 16:55
Benutzer
neuer user
 
Registriert seit: 15.12.2004
Beiträge: 83
mikey befindet sich auf einem aufstrebenden Ast
Standard

genaugenommen möchtest du also eine Mindesthöhe für den Mainteil die sich dynamisch an die Höhe des Browser-Fensters anpasst ....

soweit ich weiß geht das nicht, zumindest nicht nur mit css
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.01.2005, 16:56
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 696
wahsaga befindet sich auf einem aufstrebenden Ast
Standard Re: Footer Problem

das liegt an der 100% höhe für den wrapper - gute browser halten sich daran, und lassen dann überlangen inhalt über dessen grenzen hinausfließen, die grenzen bleiben aber, und auch die ausrichtung des footers an diesen. du willst also eigentlich min-height für den wrapper auf 100% setzen, nicht height.

das kann dann wieder der IE nicht, aber der interpretiert ja zum glück height:100% wieder derart falsch, dass es für diesen fall "passt".

sorge also dafür, dass der IE height:100% für den wrapper bekommt, die anderen browser height:auto und min-height:100% (wie, bleibt dir überlassen: conditional comments, css-hack, etc.)


btw: der standard-link zu dieser thematik ist natürlich http://www.alistapart.com/articles/footers, auch mal einen blick wert.


edit: ach ja, mikey hat recht, padding nutzt du für wrapper ja auch noch - das muss natürlich raus, sonst passt es mit den 100% nicht mehr ...
Mit Zitat antworten
  #4 (permalink)  
Alt 21.01.2005, 17:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.01.2005
Beiträge: 17
blub19 befindet sich auf einem aufstrebenden Ast
Standard

alles klar..
min-height:100% ist die lösung. danke

Mit Zitat antworten
  #5 (permalink)  
Alt 21.01.2005, 17:08
Benutzer
neuer user
 
Registriert seit: 15.12.2004
Beiträge: 83
mikey befindet sich auf einem aufstrebenden Ast
Standard

das Einfachste ist doch immer noch, für einen genügend hohen Inhalt zu sorgen, egal ob der Footer immer ganz unten oder halt direkt unterm Hauptinhalt ist, wenns sehr wenig Inhalt ist...wirkts gelinde gesagt sch.. (oder auch automatisch generiert, was für mich aufs selbe hinauskommt)

min-height wird aber nicht von jedem Browser berücksichtigt
Mit Zitat antworten
  #6 (permalink)  
Alt 25.01.2005, 11:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.01.2005
Beiträge: 17
blub19 befindet sich auf einem aufstrebenden Ast
Standard

hmm, stimmt. Aber manchmal hat man eben nicht soviel Inhalt.

und wenn ich sowohl height: 100% als auch min-height: 100% eingetragen habe, klappt es im Firefox auch nicht so wie ich will. Ist die Seite länger als der Bildschirm und ich scrolle herunter, ist kein Hintergrund mehr da.
Wenn ich nur min-height: 100% nehme, gehts im IE nicht.

Alles nicht so einfach
Mit Zitat antworten
  #7 (permalink)  
Alt 25.01.2005, 11:46
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 696
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von blub19
und wenn ich sowohl height: 100% als auch min-height: 100% eingetragen habe, klappt es im Firefox auch nicht so wie ich will.
natürlich nicht, weil das ja wieder auf feste 100% höhe hinausläuft.

Zitat:
Wenn ich nur min-height: 100% nehme, gehts im IE nicht.
und wenn du von den postings hier nur die hälfte liest, wirst du wohl auch nicht herausbekommen, wie's geht.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Border und fixiertem Footer Benezi CSS 6 21.07.2013 11:42
Sticky Footer Problem - Scrollbar img CSS 5 05.03.2011 17:51
Problem mit bild und footer! Pumpkin CSS 0 01.11.2008 22:21
Dynamischer Footer - Problem beim IE6 iweim CSS 0 23.02.2008 12:09
Footer Problem Xevi CSS 12 17.02.2008 14:48


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:25 Uhr.