Footer am unteren Seitenrand bei absoluten Content-DIV
Hallo,
ich sitze gerade an dieser Seite http://i52.tinypic.com/jb2t6r_th.jpg Die Navigation, der Content und der 'Inner'-Footer (Impressum) sind in einem mittig ausgerichteten, absolut positionierten Wrapper eingeschlossen. (siehe unten) Nun ist mein Problem, dass der dunkelgraue Footer wenn ich ihn in den Wrapper packe nicht 100% breit ist. Wenn ich ihn außerhalb des Wrappers definiere, hängt er knapp unter dem Header. Wie bekomme ich es hin, dass der Footer immer am unteren Seitenrand ist? Anhang: HTML: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Code:
@charset "utf-8"; |
Niemand ne Idee? :cry:
|
das problem, ohne bilder sieht man nichts.
|
Zitat:
#wrapper braucht sicher kein pos. absol. um horizontal zentriert zu sein, dafür reicht neben einer Breite margin:0 auto;. Um den footer immer unten zu haben schau dir Foot Sticker Alt an. ;) |
Leider müss ich position:absolut verwenden da der Content sowohl Header als Footer überlappt (siehe Bild [@zeji: welches auch im ersten Beitrag ist ;)])
Die Navigation, der Footer und der Content sind alle im wrapper und der muss daher absolut sein. |
Zitat:
Du kannst auch mit position:relative und ggf. z-index die Stapelreihenfolge fast immer hinreichend ändern. Vielleicht hilft dir das ein bißchen beim Verstehen. |
Ich verstehe die ganzen negativen margins nicht.
Code:
#wrapper Zwei mal width angegeben ... da hebt 600px die 808px auf |
@XHTMLvalid:
ooups die doppelten breiten sind natürlich falsch. Die negative margin zentriert den wrapper. @hubspe: habe es mal mit position:relative umgesetzt. wenn ich dann im wrapper den relativ positioniere wird wird dieser unter dem Header angezeigt. Also verschiebe ich ihn mit top:-120px nach oben, was zur Folge hat, dass der Footer 120 Pixel über den unteren Browser-Rand schwebt. Und eine breite von 100% konnte ich damit leider auch noch nicht realisieren. :( Ich habe mal einen Testcase unter http://bit.ly/aGvayq eingerichtet. Wer also ein wenig mit Firebug spielen will...viel Spaß :) |
Liste der Anhänge anzeigen (Anzahl: 1)
Soll es in etwa so aussehen?
|
Du machst es dir unnötig schwer.
Arbeite bitte die von Hubspe bereits genannte Technik FooterStickAlt (die heißt nicht Foot Sticker) durch. Lass zunächst den Header weg, wenn du damit nicht klarkommst. Bei dieser Technik liegt der Footer außerhalb des Bereiches, der 100%-Mindesthöhe hat. Damit löst sich dein Footer-Breiten-Problem in Luft auf. Positionierungen lass bitte erstmal komplett weg. Für die Zentrierung deines Inhaltsbereiches verwende auf keinen Fall diese negative Schieberei. Die Inhalte verschwinden bei schmalem Viewport unerreichbar nach links. Zentriere mit margin:0 auto. |
Liste der Anhänge anzeigen (Anzahl: 1)
|
Hi, also wenn ich es richtig verstehe, möchtest Du das der Footer immer am unterem Browserrand klebt.
Code:
html, body{ |
Zitat:
Die Breite ist bei 100% und er klebt am unteren Rand. Nun ist der Content nur leider nicht über Header und Footer sondern dazwischen. Zitat:
|
Die Überlappung machst du mit negativen Margins. Unterer für den Header, oberer für den Footer, jeweils in ihrer eigenen Höhe.
Den Abstand der Navigation von oben mit Padding für die Navigation. Background-position entsprechend anpassen. Jedoch ist für mich noch immer nicht klar, was du eigentlich willst. Das, was du "upperfooter" nennst soll doch bei wenig Inhalt auch immer unten sitzen, oder nicht? Was mit dem unsichtbaren Logo im Header geschehen soll ist bisher auch völlig unklar. |
Wunderbar! Klappt! Vielen Dank für die Hilfe.
Der "upperfooter" soll den Content abschließen und nicht am Ende sitzen. Das Logo wird nur wegen dem Testcase ausgeblendet. Im Produktiveinsatz wieder drin. Wollte jetzt nur nicht für den Testcase ein eigenes Logo machen. |
Nein. So klappt das nicht.
Schau dir an, was bei wenig Inhalt passiert. Dann lies nochmal ganz genau, was ich oben schrieb. Du hast das Prinzip von FooterStickAlt noch nicht verstanden. Wenn der Footer kein Footer werden soll und der Header kein Header, sondern es dir nur um diese Bildchen geht, brauchst du das ganze Theater nicht. Nimm dem, was jetzt wrapper heißt, seine Breite weg. Gib ihm das Footer-Bild. Fass den Inhalt mit einem weiteren Element zusammen. Zentriere dieses. Noch immer ist nicht klar, wie sich das Logo zum Inhalt verhalten soll. Ich bezweifle, dass du es so haben willst, wie es sich vorhin verhalten hat. Teste bitte mit allen Elementen, die es gibt. Und ändere deine Fenstergröße beim testen. |
Liste der Anhänge anzeigen (Anzahl: 2)
Wie sich das Logo zum Inhalt verhalten soll?
Meinst du das id="logo"? Wenn ja, dann nimm es als Platzhalter für eine Grafik. Damit es verständlicher wird habe ich jetzt noch ein Logo eingefügt, damit es evtl klarer wird. Offenbar bestehen noch Missverständlisse beim Aufbau der Seite. Das grün/graue "Monster" auf dem das Logo liegt ist der Header. Das dunkelgraue am unteren Bildschirm der Footer. Der Balken mit den vielen "Item"-Einträgen ist die Navi. Darunter der Content. Unter dem Content findet sich der "upperfooter" in dem Impressum und andere Links stehen. Navi, Content und Upperfooter sind in "wrapper" gekapselt. Dieser ist mittig zentriert und passt sich nach der Menge des Inhalts an. Er lappt gut 100px über dem Header und gut 30px über dem Footer (Anhang 3854). Der wrapper muss nicht zwingend bis zum Footer reichen (Anhang 3853). |
dows, die Elemente einer Seite definieren sich nicht über graue oder bunte Streifen. Der Inhalt gibt vor, welche Elemente es auf einer Seite gibt.
Wenn du nur einen grauen Streifen am Ende willst, dann ist das kein Footer. Du brauchst kein leeres Element dafür. Im Moment sehe ich ein merkwürdiges Konstrukt mit irgendeinem Prozentwert. Das funktioniert nicht, der graue Balken ist irgendwo. Nochmal: Du brauchst kein aufwendiges "Footer-immer-unten"-Konstrukt. Die graue Grafik kann in ein umgebendes Element -- das kann auch body sein. Da es offenbar einen Header mit Inhalten gibt, kann deine Header-Grafik dorthinein. Überlappung mit dem Inhalt mit negativer Verschiebung. |
Alle Zeitangaben in WEZ +2. Es ist jetzt 07:12 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023