|
|||
Hi, also wenn ich es richtig verstehe, möchtest Du das der Footer immer am unterem Browserrand klebt.
Code:
html, body{ margin: 0; padding: 0; } html{ height: 100%; } * html body{ height: 100%; } body{ background:#CCC; margin:0; position: relative; min-height: 100%; } #div_der_immer_unten_ist{ position:absolute; bottom:0; width:100%; height:60px; background-color:#333; }
__________________
jeden Tag ein Pixel |
Sponsored Links |
|
||||
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. Hab ich eingebaut. Vielen Dank für den Tipp. Mir gefiel die alte Variante auch nicht. Geändert von dows (11.10.2010 um 15:25 Uhr) |
|
|||
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.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
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.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
||||
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 (keinabstand.gif). Der wrapper muss nicht zwingend bis zum Footer reichen (abstand.gif). |
|
|||
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.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (11.10.2010 um 18:13 Uhr) |
Stichwörter |
footer, position absolute, width: 100% |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Footer am unteren Rand | N.A.R. | CSS | 4 | 11.06.2011 02:21 |
Footer immer am unteren Bildschirmrand | BoFiaZ | CSS | 22 | 29.05.2009 12:45 |
Footer am unteren Seitenrand positionieren | judicious | CSS | 15 | 23.06.2005 18:45 |
print.css logo am unteren seitenrand | Heinz.Iseli | CSS | 6 | 12.04.2005 12:19 |
Footer Problem | blub19 | CSS | 6 | 25.01.2005 12:46 |