nicht angemeldet
Footer nicht über Content? Kleines CSS-Problem ...
Hallo liebes Forum,
bin gerade dabei mit einem CSS-Footer herumzutesten und es funktioniert ja eigentlich auch schon ganz gut.
Ich möchte eine Fußzeile (per CSS - nicht per JavaScript) erstellen die sich immer am unteren Browserfensterrand befindet. Aber das nur solange sie nicht dem Contentbereich der Seite überlagert ... dann darf sie auch "unter" dem Browserfensterrand sein (also nur durch scrollen zu erreichen zum Beispiel). Damit es da keine unschönen Überlagerungen gibt.
Das Problem ist jetzt aber dass der Footer immer solange mit nach oben rückt bis dessen unteres Ende auf gleicher Höhe wie das untere Ende des Contents ist - kann im Beispiel sehr gut erkennen.
http://simone.gerhardzeissl.net/footer3.html
Es sollte aber eigentlich so sein, dass der Footer nur so weit raufrückt bis er mit seinem oberen Rand am unteren Rand des Contents anstößt. Das muss doch auch irgendwie möglich sein?
Hab versucht mit margin und padding herumzuspielen, der einzig brauchbare Erfolg war ein margin-bottom:37px; im content-div - allerdings leider auch nur im IE - wie kann ich das für "alle" Browser hinkriegen (für Netscape 4 spar ich mir das mitverschieben später sowieso)? Hat jemand eine Idee?
Liebe Grüße
sunny
-
Hi sunny,
http://simone.gerhardzeissl.net/footer3.html
Es sollte aber eigentlich so sein, dass der Footer nur so weit raufrückt bis er mit seinem oberen Rand am unteren Rand des Contents anstößt. Das muss doch auch irgendwie möglich sein?
Ist es :-)
http://positioniseverything.net/thr.col.stretch.html
Grüße,
Roland-
Hi Orlando,
Ist es :-)
Puh da muss ich mich jetzt erstmal durchwühlen ob ich das für mein Beispiel irgendwie ummodeln kann - so auf die Schnelle sehe ich da jetz nicht wie ich deren Footer für mich einsetzen kann. Aber das Beispiel schaut ja gut aus!
_Muss_ eben doch gehen!
Lg
sunny-
Hi Orlando,
Puh da muss ich mich jetzt erstmal durchwühlen ob ich das für mein Beispiel irgendwie ummodeln kann [...]
Hab das jetzt genauer unter die Lupe genommen - hier ist es so dass sich der Footer einfach unter der mittleren Box befindet, je nachdem wie hoch diese ist.
Das ist eigentlich nicht das was ich brauche - bei mir ist es so dass es ein ContentDiv geben wird (ich glaub halt dass es so am einfachsten zu lösen sein wird) - das so hoch ist wie es eben seine Inhalte erfordern.
Und unter diesem ContentDiv befindet sich eben der Footer. Wenn sich das ContentDiv aber nicht bis zum unteren Browserfensterrand erstreckt, dann soll unter dem Content Raum frei bleiben und der Footer "klebt" ganz unten am Browserfenster. Falls der Content aber länger ist dann soll sich der Footer ebenfalls weiter nach unten schieben um den Content nicht zu überlagern.
Eben genau so wie es in meinem Beispiel ist - aber da schiebt sich der Footer leider um genau die Höhe die er selbst hat über den Contentbereich, und das ist das was ich verhindern möchte. Er soll sich _gar nicht_ über den Contentbereich schieben.
Ich hoffe jetzt war es etwas verständlicher ...
Liebe Grüße
sunny-
hi,
Und unter diesem ContentDiv befindet sich eben der Footer. Wenn sich das ContentDiv aber nicht bis zum unteren Browserfensterrand erstreckt, dann soll unter dem Content Raum frei bleiben und der Footer "klebt" ganz unten am Browserfenster. Falls der Content aber länger ist dann soll sich der Footer ebenfalls weiter nach unten schieben um den Content nicht zu überlagern.
schau dir http://www.alistapart.com/articles/footers an, das bietet eine lösung für genau diese anforderung.
gruss,
wahsaga-
Hi,
schau dir http://www.alistapart.com/articles/footers an, das bietet eine lösung für genau diese anforderung.
Kenn ich schon - mit Hilfe derer und anderer Seiten hab ich mir ja das Ganze zusammengebastelt - und jetzt steh ich noch genau vor dem einen Problem (das in der Seite übrigens nicht gelöst wird - wenn Du genau schaust - da schiebt sich nämlich der Footer bis zum TextEnde rauf - statt nur bis zum DivEnde - so wie ich es brauchen würde!
Lg,
sunny
-
-
-
-
-
Hallo sunny,
am einfachsten zu lösen wäre es, wenn du #content noch ein margin-bottom:40px; zuweist, wobei die 40px jetzt nur eine geschätzte Höhe des Footers sind.
Gruß gegge
-
Hallo Gerhard,
am einfachsten zu lösen wäre es, wenn du #content noch ein margin-bottom:40px; zuweist, wobei die 40px jetzt nur eine geschätzte Höhe des Footers sind.
Wie ich bereits in meinem Ausgangsposting geschrieben hab habe ich das gemacht (margin-bottom:37px;) -> das funktioniert aber nur im IE.
Lg,
sunny
-
-
Hallo sunny
Mein Vorschlag ist zwar nicht so toll, weil ein zusätzliches Element eingefügt werden muss.
Setze ein zusätzliches Div zwischen content und footer, dass genau die Höhe des footer einnimmt.
Das sollte klappen.MFG
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Guten Morgen Detlef,
Setze ein zusätzliches Div zwischen content und footer, dass genau die Höhe des footer einnimmt.
Das sollte klappen.Stimmt - das funktioniert jedenfalls - dass ich da nicht selber draufgekommen bin! ;)
Auf jeden Fall mal eine Lösung - eine schönere scheints wohl nicht wirklich zu geben!
Liebe Grüße
sunny
-