Footernavigation lässt sich nicht zentrieren

Billbos

Hallo,

wie die Überschrift schon beschreibt habe ich ein Problem damit meine Navigation im Footer der Seite zu zentrieren.

Code

/* Footer Navigation */


div#footernavi {
    font-family: 'Gruppo', 'Arial';
    font-size: 15px;
    width: 280px;
    height: 15px;
    margin: 20px auto;
    }

div#footernavi ul {
    padding: 0;
    margin: 0;
    list-style: none;
    }

div#footernavi li {
    display: inline-block;
    padding: 0 15px;
    }

div#footernavi a {
    font: 'Gruppo';
    text-decoration: none;
    letter-spacing: 0.1em; 
     color: #454545;  
    text-shadow: 0 1px 0 white; 
    }

div#footernavi a:active {
    font: 'Gruppo';
    color: #b8b8b8;
    text-decoration: none;
    letter-spacing: 0.1em;
    text-shadow: 0 0 0 #b6b6b6; 
    }

div#footernavi a:hover {
    font: 'Gruppo';
    text-decoration: none;
    letter-spacing: 0.1em;
    text-shadow: 0 0 0 #b6b6b6; 
    }

Alles anzeigen

Links das Soll und rechts wie es aktuell ausschaut:

http://www.billbos.eu/forumbilder/footernavigation.png

Besten Dank !

Bandit

Ein Link zu der Seite wäre nicht schlecht.

Billbos

http://www.billbos.eu/web/

Habe es jetzt mit einem negativen margin versucht, frage mich aber, wieso ich den dazu brauche!

threadi

Du hast für div#footericons eine geringe Breite eingestellt und dieses zentriert. Gleichzeitig versuchst Du die darin enthaltene #footernavi auch zu zentrieren, aber mit mehr Höhe - das kann ja nicht klappen.

Du solltest im HTML-Code #footernavi nicht innerhalb von div#footericons schreiben. Dann passt es.

Btw. solltest Du auch auf die absolute Positionierung des Footers verzichten. Der ist bei deiner Seite imho völlig unnötig. Wenn Du dann noch div#containerindex weniger Abstand nach unten gibst, passt es auch so.

Billbos

Ohhhhh perfekt! Danke, ich wollte die navi nicht in die icons packen, das war es, danke für den tipp!

Doch sobald ich das Position "absolute" weglasse, passiert folgendes:

http://www.billbos.eu/forumbilder/Bi…%2021.46.25.png

Wenn ich dazu dem

Code

div#containerindex {    margin: 30px auto 0 auto;    width: 960px;    height: auto;    padding-bottom: 200px;    }

das padding-bottom entnehme, entsteht unterhalb des Footers wieder ein Abstand zum Bildschirmrand

threadi

Der Abstand kommt durch die Höhe des Footer zustande. Kannst die Höhe auch weglassen und padding verwenden oder eine geringere Höhe einstellen.

Tipp: Verwende Firebug oder die Entwicklertools deines Browsers um das selbst live auszutesten. Da findet man vieles schneller.

Billbos

Gut das mache ich auch, habe jetzt etwas herumgespielt, soweit ist der Footer auch unten und bleibt auch unten, doch leider wieder zu sehr verrutscht, sodass er nicht mehr die gewünschte Höhte von 200px hat.

threadi

Wenn ich das unter deinem Link nachzustellen sehe ich den blauen Farbverlauf unten drunter überhaupt nicht?!

Billbos

Der Verlauf ist der Hintergrund von meinem Desktop! schau mal unter impressum und contact, da steht noch ein copyright und dort hört es auf, das ist der untere Bildschirmrand vom Browser und dort hat sich auch der Abstand verringert

threadi

Also nochmal:
Bei div#footer position und bottom raus.
Bei div#containerindex padding-bottom raus.

Dann ist der Footer immernoch 200px hoch, aber alles was dort drinne steht klatscht direkt an der oberen Kante vom Footer dran. Den Abstand kann man dann wiederum mit padding-top in div#footericons korrigieren. Wenn Du in div#footericons auch noch das margin nach oben auf 0 setzt ist quasi jeder Abstand zwischen div#containerindex und div#footer weg. Einen Abstand von div#footer nach unten zum Browserfenster kann ich nicht ausmachen.

Billbos

Das hat nun perfekt geklappt! Komisch ich hatte mich an der Seite von http://www.ohne-css.gehts-gar.net/0044.php

orrientiert, doch scheinbar habe ich dabei einen Fehler gemacht, danke dir!

Billbos

Scheinbar fehlt doch eine gewisse Höhe vom wrapper bzw. contentindex. Wenn ich mir folgendes anschaue http://billbos.eu/web/photos
, dann passt der Abstand!

Wenn ich jetzt aber die INDEX Seite betrachte, schaut es anders aus http://www.billbos.eu/web/

threadi

Du hast in div#containerphotos einen riesigen Innenabstand nach unten.

Bandit

Billbos
Benutzte mal den Firefox mit dem Addon Firebug, denn damit kannst du relativ gut erkennen, was und warum was nicht passt.

Billbos

Hallo,

habe jetzt so viel herumprobiert, mit Firebug und DW, doch scheinbar komme ich nicht von selbst auf den Fehler.
Wenn ich das Padding-Bottom bei containerindex herausnehme bildet sich ein Abstand unterhalb des footers.

Siehe hier:

http://billbos.eu/web/

http://billbos.eu/web/about.php

Komischerweise gibt es keinen Abstand bei

http://billbos.eu/web/info.php

Bei der letzten Seite - Contact - entsteht ein ganz komisches Konstrukt:

http://billbos.eu/web/contact.php

threadi

Bei mir bildet sich dann kein Abstand unterhalb von #footer

Und bei der letzten Seite liegt es am float in div#formcontainer.

Billbos

Das mit dem clearen hat geklappt, danke!
Doch schau:

http://www.billbos.eu/forumbilder/footer_1.png

http://www.billbos.eu/forumbilder/footer_2.png

http://www.billbos.eu/forumbilder/footer_3.png

bei dem dritten denke ich, weiß ich woran es liegt, bei den anderen wundert es mich, dass der Abstand unterschiedlich ist und der Footer jedesmal absetzt!

threadi

Dann liegt es an deinem Viewport der eine deutlich andere Höhe hat als meiner. Die Frage wäre: wo soll denn der Footer genau stehen? Immer am unteren Ende des Viewports? Und wenn die Seite länger wird, dann unterhalb des Contents?

Billbos

am liebsten 80px unter dem containerindex und immer am unteren ende des browsers

threadi

Dann definiere #footer nach den Vorgaben für "footer sticky alt":
http://www.themaninblue.com/writing/perspective/2005/08/29/
http://ryanfait.com/sticky-footer/

Tags