wie kriege ich den Footer so positioniert, dass

gericoach

er wirklich immer am Fuß der Seite ist? Problem: wenn zu wenig Content ist, schiebt sich der Footer nach oben.. siehe Link dazu: logo-creations.de

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Tauscher

Seitenhöhe auf 100% und footer-position auf bottom:

Code

position:absolute;
bottom:0px;

gericoach

habe ich gerade versucht,

Zitat

position: absolute; bottom: 0;

zerschießt mir aber A) die Positionierung des Footerinhalts(rutscht nach links) und B) die Hintergrundfarbe(verschwindet). (Aber immerhin ist alles unten zerschossen! :))Noch irgend ein Ansatz? Hier ist mal der style.css Footer Bereich:

Zitat

/************************************************
* Footer Background *
************************************************/
#footerbg {
background: #9f5607;
}

/************************************************
* Footer *
************************************************/
#footer {
width: 960px;
height: 100px;
margin: 0px auto 0px;
padding: auto;
}
#footer a {
color: #e3821a;
text-decoration: none;
}

#footer a:hover {
color: #e3821a;
text-decoration: underline;
}

.footer-1 {
width: 170px;
float: left;
margin: 15px 0px 10px 0px;
padding: 5px 0px 0px 20px;
border-right: 1px dashed #ce7210;
}

.footer-1 p {
color: #e3821a;
margin: 0px;
padding: 0px 0px 5px 0px;
}

.footer-2 {
width: 170px;
float: left;
margin: 15px 0px 10px 0px;
padding: 5px 0px 0px 20px;
}

.footer-2 p {
color: #e3821a;
margin: 0px;
padding: 0px 0px 5px 0px;
}

.footer-3 {
width: 170px;
float: left;
margin: 15px 0px 10px 0px;
padding: 5px 0px 0px 20px;
border-left: 1px dashed #ce7210;
}

.footer-3 p {
color: #e3821a;
margin: 0px;
padding: 0px 0px 5px 0px;
border-right: 1px dashed #ce7210;
}

.footer-4 {
width: 350px;
float: left;
margin: 15px 0px 10px 0px;
padding: 5px 0px 0px 20px;
}

.footer-4 p {
color: #e3821a;
margin: 0px;
padding: 0px 0px 5px 0px;
}

Alles anzeigen

Tauscher

Code

#footerbg {style.css (Linie 559)
background:#9F5607 none repeat scroll 0 0;
bottom:0;
margin-left:auto;
margin-right:auto;
position:absolute;
width:100%;
}

gericoach

zentriert jetzt und auch unten, aber die Backgroundfarbe ist weg...kannst Du nochmal drauf schauen?

Tauscher

Code

background:#9F5607 none repeat scroll 0 0;

Wieder einsetzen, denn ohne gehts halt net. :razz:

gericoach

ist doch drin? zeigt nur nix an...

Tauscher

Besser wäre aber die ganze Seite mittig zu setzen:

Code

#body {
 width:?px;
 margin-left:auto;
 margin-right:auto;
}

Dann muss nicht jedes Element wieder zentriert werden.

Tauscher

Zitat von gericoach

ist doch drin? zeigt nur nix an...

Code

#footerbg {
bottom:0;
margin-left:auto;
margin-right:auto;
position:absolute;
width:100%;
}

Irgend ein Zeichen hast du vergessen (;)

Tauscher

Wahrscheinlich nur -> ;

Tauscher

Versuch doch einfach mal nur:

Code

background-color:#9F5607;

den Rest:
[COLOR=Blue]none repeat scroll 0 0[/COLOR] brauchst du doch bei der Formatierung gar nicht.

gericoach

Zitat

/************************************************
* Footer Background *
************************************************/
#footerbg {
style.css (Linie 559)
background:#9F5607 none repeat scroll 0 0;
bottom:0;
margin-left:auto;
margin-right:auto;
position:absolute;
width:100%;
}

Alles anzeigen

Sieht eigentlich nicht danach aus, finde den Fehler momentan nicht... alle ; sind gesetzt..

kaiser

Das eigentliche Problem lässt sich aber damit so oder so nicht lösen, weil Du mit position: absolute; leider den Footer immer über den Rest schiebst, wenn der Inhalt dann lange genug ist. Ich hab auch schon ewig mit dem Problem gekämpft und nichts wirklich gutes gefunden. Ein interessanter Ansatz war, einen leeren Div hinter dem Content und vor dem Footer einzufügen, der sich automatisch auf die verbleibenden/fehlenden Pixel skaliert. War aber ohne Erfolg.. Wenn Du wirkliche eine brauchbare Lösung findest, schick mir bitte eine PM. Danke!

gericoach

ich glaube, jetzt hab ich es...habe die Anordnung der Befehle ein wenig verändert:

Zitat

#footerbg {
background:#9F5607;
margin-left:auto;
margin-right:auto;
position:absolute;
bottom:0px;
width:100%;
}

Alles anzeigen

Vielen Dank für Deine/ Eure Hilfe! Habt mir sehr geholfen!!!

Tauscher

Zitat von kaiser

Das eigentliche Problem lässt sich aber damit so oder so nicht lösen, weil Du mit position: absolute; leider den Footer immer über den Rest schiebst........

Da hat Kaiser recht und da hab ich leider auch nicht mehr dran gedacht, aber auch keine bessere Idee.

gericoach

Ich gebe Kaiser jetzt auch Recht, der Footer bleibt genau an der Stelle, die Bilder "wandern" drunter durch...Mist.

telekommander

Zitat von gericoach

er wirklich immer am Fuß der Seite ist? Problem: ( ... )

Stoff: Sticky footer

Willkommen! Melden Sie sich an oder registrieren Sie sich.

wie kriege ich den Footer so positioniert, dass

Jetzt mitmachen!