zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Footer Problem (3 spaltiges Layout, variable Höhe)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.07.2007, 14:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.01.2006
Beiträge: 12
Lofesto befindet sich auf einem aufstrebenden Ast
Standard Footer Problem (3 spaltiges Layout, variable Höhe)

Hallo,

ich habe ein 3 spaltiges CSS Layout mit Header und Footer.
Es klappt alles soweit aber der Footer bzw der mittlere Bereich macht Probleme.

Hier eine Übersicht meines Layouts:



Der Footer soll halt immer unter den dreispaltigen Inhalt stehen. Die Höhe des Inhalts soll variabel sein.
Das Problem ist nun, dass der Footer über dem Inhalt steht, sobald der Inhalt länger wird!

Hier ein Auszug vom CSS:

Code:
#header{
	width: 985px;
	background: white;
	height: 138px;
	color:black;
	position:absolute;
	left:0px;
	top:0px;
}

#header span{
	display: block;
	color: white;
	font-size: 12px;
	text-transform: none;
	margin-top: -45px;   /* nach oben verschieben */
	font-weight: normal;
}

/* Inhalt */
#inhalt{
	position:absolute;
	left:0px;
	top:160px;
	width: 984px;

	text-align: left;  /* wichtig */
	background-color:white;
	padding-bottom:30px;
	border-right:1px solid #CCCCCC;
	
	min-height: 100%;
	height: auto !important;	
	height: 100%;	
}

#inhalt_left{
	position:absolute;
	left:12px;
	top:70px;
	width: 130px;
	
	min-height: 100%;
	height: auto !important;	
	height: 100%;
}

#inhalt_middle{
	position:absolute;
	left:160px;
	top:70px;
	width: 724px;
	
	min-height: 100%;
	height: auto !important;	
	height: 100%;
}

#inhalt_right{
	position:absolute;
	left:780px;
	top:70px;
	width: 130px;
	padding:0px 0px 0px 20px;
	
	min-height: 100%;
	height: auto !important;	
	height: 100%;
}

/* Footer */
#footer{
	position: absolute;
	bottom: 0 !important;
	bottom: -1px;
	height: 30px;
	width:984px;
	line-height: 30px;
	background: white;
	color:#474747;
	text-align: center;
}

#footer span a{
	float: right;
	margin: -30px 10px 0 0;
	color: orange;
}

#footer span a:hover{
	color: white;
}
In der PHP Datei sieht es denn wie folgt aus (ohne Header):

Code:
	<div id="inhalt">
		<div id="inhalt_left">test left</div>
		<div id="inhalt_middle">test middle</div>
		<div id="inhalt_right">test right</div>	
	<p id="footer">copyright blabla</p>
	</div>
Könnt ihr da vielelicht was erkennen?
Habe nun schon Tage lang nach dem Fehler gesucht aber nichts gefunden

Geändert von Lofesto (23.07.2007 um 14:42 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.07.2007, 15:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von Lofesto Beitrag anzeigen
Code:
#header{
	width: 985px;
Nett. Überall hartcodierte Pixelgrößen.

Zitat:
Code:
position:absolute;
	left:0px;
	top:0px;
}
Wozu hier absolute positioniert?

Zitat:
Code:
#header span{
	display: block;
Wozu ein span, wenn eh auf display: block gesetzt? Wozu überhaupt ein zusätzliches Element?

Zitat:
Code:
	color: white;
Weiße Schrift auf weißem Grund? Ostfriese?

Zitat:
Code:
	margin-top: -45px;   /* nach oben verschieben */
Aus dem Viewport heraus?

Zitat:
Code:
#inhalt{
	position:absolute;
	left:0px;
	top:160px;
Warum wieder absolut positoniert?

Zitat:
Code:
	text-align: left;  /* wichtig */
Ach?

Zitat:
Code:
#inhalt_left{
	position:absolute;
	left:12px;
	top:70px;
Und noch mal.

Zitat:
Code:
#inhalt_middle{
	position:absolute;
	left:160px;
	top:70px;
Und noch mal.

Zitat:
Code:
#inhalt_right{
	position:absolute;
	left:780px;
	top:70px;
	width: 130px;
	padding:0px 0px 0px 20px;
Und wieder. Der rechte Rand schließt hier nicht mit der Breite von #inhalt ab. Absicht?

Zitat:
Code:
#footer{
	position: absolute;
	bottom: 0 !important;
	bottom: -1px;
	height: 30px;
Und nochmal. Falls du noch nicht darauf gekommen bist: Eines deiner Probleme.

Das doppelte bottom sieht wie ein Versuch Symptome zu verhindern, statt der Ursache.

Zitat:
Code:
#footer span a{
	margin: -30px 10px 0 0;
}
Noch ein negaives Margin. Grund?

Zitat:
Code:
Habe nun schon Tage lang nach dem Fehler gesucht aber nichts gefunden
Nun, Fehler an sich gibt es da keine, eher ein Unverständnis von position: absolute gegenüber. Schau mal in userer FAQ nach "Footer Stick Alt":

http://xhtmlforum.de/40267-faq-haeuf...d-haeufig.html

Robin
__________________
CSS-Rauch! Nicht einatmen!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.07.2007, 17:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.01.2006
Beiträge: 12
Lofesto befindet sich auf einem aufstrebenden Ast
Standard

Danke für die ausführliche Antwort!

Zu der weißen Schrift auf weißen Hintergrund... Ostfriesen sind nette Menschen
Ich habe ja im PHP Bereich gesagt das ich den Header Code nicht gepostet habe. Im Header Bereich ist die Navigation vorhanden und die Schrift auf der Navigation muss weiß sein, da der Hintergrund der Navigation dunkel ist.
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 variabler Höhe shredder01 CSS 28 22.04.2010 13:55
Problem mit 3-spaltigem Layout im Firefox Imhotep CSS 4 08.07.2008 18:17
Dynamische Layout Breite und Höhe altes-kind CSS 7 12.01.2007 12:54
Problem mit mehrspaltigem Layout RalfEggert CSS 2 05.04.2004 17:20


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:19 Uhr.