footer div positionieren

philippsen · #1 (**permalink**) 25.02.2010, 19:41

Hallo,
ich versuche gerade einen footer als div container unterhalb meines Inhalts der Seite zu platzieren. Allerdings sind alle Div's auf der Seite mit position:absolut und festen left und top Werten platziert. Ich würde jetzt gerne das der footer sich jenachdem wie lange der TExt auf der Seite ist, immer unten dran platziert.
Hat jemand eine Idee wie das gehen soll?

Momentan ist der Footer immer unten am Browserfenster positioniert, das wollte ich aber eben ändern.
Wäre super wenn jemand eine Idee hat
Gruß
Philippsen

Plumpy · #2 (**permalink**) 25.02.2010, 22:20

Eine Seite nur aus absoluten Elementen zu machen ist gar nicht zu empfhelen, denn der einzige Weg das zu verwirklichen was du machen möchtest ist wenn du mit relativen/statischen Positionen arbeitest, und der Platz automatisch reserviert wird.

Ein Lösungs Ansatz wäre (weis aber nicht genau ob es funktioniert), den div.inhalt auf position relative zusetzen und den Footer in der Hierachie darunter. Dann sollte der Platz auch reserviert sein.

Ansonsten kannst du dir mit JavaScript helfen, allerdings musst du dann auch eine Version für die 10% der Menschen mahcen die JavaScript deaktiviert haben.

philippsen · #3 (**permalink**) 02.03.2010, 09:44

okay, vielen Dank!

Das heisst beim nächsten mal lieber wieder floaten;

chris_l · #4 (**permalink**) 02.03.2010, 17:30

Hi,

also eine Möglichkeit fiele mir schon ein, zumindest, wenn du weißt, welches deiner absolut positionierten Elemente am weitesten unten sein wird.

Dann kannst du's etwa so machen (ich hab für das Content-Element extra mal bloß 80% Breite genommen, damit man sieht, dass der Footer trotzdem 100% Breite haben kann)

Code:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Title</title>
		
		<script type="text/javascript" language="javascript"> 
		</script>
		
		<style type="text/css">
		
	  		#content {
	  			position: absolute;
	  			top: 10px;
	  			left: 10%;
	  			width: 80%;
	  			padding-bottom: 2em;
	  			background-color: yellow;
	  		}
	  		
	  		#footer {
	  			bottom: 0px;
	  			position: absolute;
	  			width: 125%;
	  			margin-left: -12.5%;
	  			margin-right: -12.5%;
	  			background-color: green;
	  		}
	  	</style>
	  	
	</head>
	<body>
		<div id="content">
			First line<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			[Content]<br/>
			Last line<br/>
			<div id="footer">Footer</div>		
		</div>
	</body>
</html>

Ist vielleicht nicht so schön, und ich würd eher die ganze Sache etwas anders schachteln, aber falls du wie du sagst, bereits lauter absolut positionierte Elemente hast... es wär zumindest eine Möglichkeit.

Chris

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18