zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Footer am unteren Seitenrand

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 11.10.2010, 12:40
Benutzerbild von dows
Basti
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2008
Ort: Berlin
Beiträge: 86
dows befindet sich auf einem aufstrebenden Ast
Standard

Eher so:
tfh-wildau_de_sspyra_testcase_index_php.jpg
Fotomontage

Geändert von dows (11.10.2010 um 12:44 Uhr)
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 11.10.2010, 14:03
Neuer Benutzer
neuer user
 
Registriert seit: 11.10.2010
Beiträge: 1
dangerm befindet sich auf einem aufstrebenden Ast
Standard

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;
    }
Vieleicht hilft Dir das ja weiter.
__________________
jeden Tag ein Pixel
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 11.10.2010, 15:13
Benutzerbild von dows
Basti
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2008
Ort: Berlin
Beiträge: 86
dows befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
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.
Den Testcase hab ich jetzt dem entsprechend angepasst.
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:
Zitat von fricca Beitrag anzeigen
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.
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)
Mit Zitat antworten
  #14 (permalink)  
Alt 11.10.2010, 15:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #15 (permalink)  
Alt 11.10.2010, 15:35
Benutzerbild von dows
Basti
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2008
Ort: Berlin
Beiträge: 86
dows befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #16 (permalink)  
Alt 11.10.2010, 15:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #17 (permalink)  
Alt 11.10.2010, 17:50
Benutzerbild von dows
Basti
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2008
Ort: Berlin
Beiträge: 86
dows befindet sich auf einem aufstrebenden Ast
Standard

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).
Mit Zitat antworten
  #18 (permalink)  
Alt 11.10.2010, 18:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.

Geändert von fricca (11.10.2010 um 18:13 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
footer, position absolute, width: 100%

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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:06 Uhr.