Footer position ändern

Emilia

Hi,hab grade ein neues design aktiviert und habe das problem daß der footer sich immer an den text anhängt,sprich...wenn die seite nur 10 textzeilen hat ist der footer an 11ter stelle...wenn die seite 20 zeilen hat dann ist der footer an der 21ten stelle.
wie kann ich dem footer eine feste position geben?
hab mich etwas im forum umgesehen aber nichts relevantes gefunden,oder falsch geschaut.

das ist der footer code aus dem style.css

HTML

#footer {
	border-top: 5px solid #F5F5F5;
	background: #348EE2;
	padding: 5px 25px;
	clear: both;
}


#footer p {
	color: #fff;
	font-size: 11px;
	margin: 0; padding: 0;
}


#footer a {
	color: #fff;
}

Alles anzeigen

vielen dank und LG

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

kaiser

Hello Emilia:

1. Bei Css-Fragen kommt man nicht umher sich Deine Seite einmal anzusehen und zB mit dem Firebug einmal herum zu probieren. Ergo: Link posten.

2. Du schreibst leider nicht einmal welche "height" Dein footer haben soll, geschweige denn von der Seitenbreite, Ausrichtung, etc.

3. css: "position: fixed;" oder "position: absolute; bottom: 0px;" Also in etwa:

Zitat

<style>
#footer {position: absolute; bottom: 0px; height: XYpx; width: 100%; /* height & width sind Bsp */}
#footer a, #footer p {color:#fff; font-size: 11px;}
#footer a {margin: 0; padding: 0;}
</style>
<div id="footer">
inhalt blablabla
</div>

Alles anzeigen

Emilia

Hi Kaiser,als erstes,vielen lieben dank,das hat mich schon ein gutes stück nach vorne gebracht.
den link wollte ich nicht posten weil es nicht meine seite ist und ich denke daß es der person nicht recht wäre.
jetzt hab ich das problem daß der footer schön positioniert ist aber die hintergrund farbe bedeckt nicht den ganzen footerbereich sondern nur 75% ca. .
links ist ein weiter spalt weiß (hintergrund des blogs) und dann gehts bis ganz nach rechts,voll doof,weiß jetzt nicht wie ich ihn "seitefüllend" (breite) verändern kann?
hast du da noch einen tip?
vielen lieben dank ;)

kaiser

Hm. width: 100%; hast Du schon ausprobiert? Na bevor ich jetzt weiter spekuliere, schick mir den link doch einfach als PM. Wäre das einfachste, falls Deine Freundin damit kein Problem hat ;)

Emilia

PM ist gesendet ;)

kaiser

Hi.
Das liegt nicht daran, dass Dein Css falsch liegt. Ist eher eine Reihe von Denkfehlern.

1. Wenn Du einen Hintergrund in eine Richtung wiederholst, brauchst Du nur 1px Breite > 11,2 Kb vs. 828 Byte ist schnellere Ladezeit.

2. Wenn Du auf der Seite bei jeder beliebigen Höhe den Footer immer unten und den Header immer oben haben willst, dann musst Du anders vor gehen. Das der "body {background-image: url(bla.jpg) repeat-x;} hat ist ok. Nur sollte der dann nicht auch den Verlauf für den Footer beinhalten, da der sonst ja auf einer vorgegebenen Höhe sitzt > Hintergrundverlauf für den Footer muss in einen speparaten div

3. Wenn Dein #wrapper eine fixe Höhe hat, dann verhält sich das wie mit dem Hintergrund. Deswegen pickt Dein Footer nie ganz unten, weil der div den unteren Seitenrand gar nicht erst erreicht > #wrapper {height: auto;}

4. Dein Footer-div soll die komplette Seitenbreite einnehmen > #footer-back {background-image: url(back.jpg) repeat-x; width: 100%; position: absolute; bottom: 0; height: XYpx; z-index: 10;}

5. #wrapper Hintergrundfarbe: Raus damit

6. den untersten Footer-div im #wrapper auch löschen.

Wenn Du alle 5 Schritte umsetzt, sollte es passen. Kann sein, dass es noch eleganter geht, wenn du den footer-div als container für einen weiteren div nimmst: div#footer-streifen-blau {background-color: blue; height: 50%; position: absolute; top: 0px;} ... dann sparst Du Dir die Ladezeit für die Grafik im Footer. Bei 4. dann das background-image weg und eventuell statt background-color: blue eine hex-farbe aus Deinem Hintergrund-Bild #xxxxxx

Gutes Gelingen.

P.s. Wenn Du genau schaust, dann wiederholt sich Deine Hintergrund-Textur nicht wirklich richtig. Falls Du auch eine andere für den Wasserzeichen-Effekt nehmen willst, such nach "seamless texture".

Emilia

Vielen lieben dank Kaiser,find es voll klasse daß du dir die zeit genommen hast um mir das zu erklären.
Ich hab einiges versucht bin aber irgendwie zu doof dafür,kenn mich nicht wirklich mit css aus,hab nur herumprobiert und dachte daß die lösung einfach wäre.
Danke trotzdem nochmals,LG ;)

kaiser

Ist nicht wirklich so schwer. Versuch´s einfach Schritt für Schritt zu machen. Nach jedem Schritt hochladen und ansehen, was sich so verändert, hilft Dir sicher vieles zu verstehen.

Falls/Wenn nicht, dann probier doch ein anderes (fertiges) Theme. zB WordPress › Constructor Free WordPress Themes

Emilia

ja,ich habs ja versucht,auch schritt für schritt aber die seite verändert sich dann ganz anders,der header wurde auf einmal dupliziert und stand nebeneinander,voll doof.
kenn mich echt nicht mit dem coding aus,habs ausprobiert und hatte ja schon mit der theme meine probleme,eine andere würde das ganze ja nicht besser machen weil die seite ja genauso aussehen soll ausser daß der footer ziemlich unten sein soll und die ganze bildbreite besetzten soll.
aber dennoch,danke für deine zeit und hilfe,finde es klasse daß du dir die mühe gemacht hast reinzuschauen und vorschläge/hilfestellung zu machen/geben.
vielen lieben dank und LG ;o)

kaiser

ok. letzter versuch. :-D

Möglichkeit A) probier einmal das Thematic-Framework. Das hat header und footer genau an der richtigen Stelle.

Möglichkeit B) Oder Du baust Dein theme folgendermassen um: Du hast dort

Zitat

<div id="wrapper"> 
<div id="header"> headerbild, etc. </div>
<div id="content"> Inhalt </div>
<div id="sitebar> Inhalt Sidebar </div>
</div> 
<div id="footer"> Inhalt footer </div>

so bekommst Du den footer erstmal aus dem wrapper hinaus, damit er auf den Wrapper folgt und unten positioniert werden kann. Schau einmal, ob Du das schaffst, dann reden wir weiter.

Möglichkeit C) Oder versuch´s mit Constructor. Das hat einen tollen Admin-Bereich. Eventuell brauchst Du dort nur die Bilder verlinken.

lg.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Footer position ändern

Jetzt mitmachen!