• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

FooterStickyNEU ?? Feedback

D

djheke

New member
Hallo ,

Hatte wieder Langeweile und mich mal mit FooterSticky beschäftigt. Dabei ist folgendes rausgekommen.
http://www.gipspferd.de/css/anleitung/a14/bspkurz.htm
Bei dieser Lösung kann auf die Angabe ( min-height ) und somit auch auf den Opera Hack verzichtet werden.
Nun meine Fragen:
1. Gebrauchsfähig ?
2. Oder bin ich wieder mal zu spät und es ist schon ein alter HUT ?

Bin schon auf eure Antworten gespannt.;)

mfg
Henry

P.S. Getestet in IE 5.5 - 8 ; Opera10 ; FF4 ; NN9 ; Chrome
 
Hi,

also ich glaub so neu ist das nicht. Zum Beispiel in Zeiten von Opera Versionen unter 10 habe ich das schon gelesen. Abgesehen davon, bisher hat bei mir jeder Footer mit sauberen CSS auch ohne Hack im Opera seinen Dienst einwandfrei geleistet.

LG, Kathrin
 
Sorry, wenn es eine Anfängerfrage ist, aber wo sehe ich hier den CSS Code? Ich bin übrigens gerade auf der Suche nach einem "sauberen" Sticky-Footer.
 
Verstehe, danke! Ich habe mir folgenden Sticky Footer aus dem Internet geholt. Allerdings habe ich noch nicht rausgefunden, wie ich z.B. 20px Abstand über den Header bekomme, ohne dass die Seite über den Bildschirm hinausgeht.

HTML: 
<!DOCTYPE html>
<html>

<head>
<style type="text/css">
	* {margin: 0;}
	html, body {height: 100%; width:1000px; margin:0 auto; font-family:verdana, sans-serif; font-size:9pt; line-height:1.5}
	.wrapper {min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -5em}
	.footer, .push {height:5em}
</style>
</head>

<body>
	<div class="wrapper">
		Header: Willkommen!<hr>
		<div class="push"></div>
	</div>
	
	<div class="footer">
	<hr>Footer: Kontakt | AGB
	</div>
</body>

</html>
 
Zuletzt bearbeitet:
Basteln wir jetzt gemeinsam Dein Layout zusammen?
Benutze doch erstmal HTML-Elemente um das Ganze ordentlich aufzubauen.
Das "Header: Herzlich Willkommen" gehört ja wohl in eine H1.
Diese kannst Du dann mit margin-top oder padding-top nach unten verschieben.

Oder Du experimentierst hier
PHP: 
.wrapper {min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -5em}
mit den margin-Werten herum.
 
Kirschtomate schrieb:
Sorry, wenn es eine Anfängerfrage ist, aber wo sehe ich hier den CSS Code? Ich bin übrigens gerade auf der Suche nach einem "sauberen" Sticky-Footer.
Zum Vergrößern anklicken....

Sorry, meine Schuld. Ich habe den CSS Quelltext wieder 'rausgenommen, weil ich noch etwas geändert habe. Ansonsten ist es nur mal son'e Spielerei gewesen. Im Erstfall lieber auf die bekannten FooterSticky Lösungen zurückgreifen. Mein Beispiel ist, ohne es zu wissen, mit den Opera-Hack realisiert worden.(height:100% weil Opera damals kein min-height konnte)
Naja wieder etwas dazu gelernt.
Hier nochmal der Quelltext l

Code: 
html , body  , #oben  { height:100%; width:100%; }
#oben { float:left; margin:0 -100% -100px 0;} 
#mitte { float:left; margin-top:100px; background:#ffa; width:100%; }
#unten { clear:left; background:#09c; color:#fff;  height:100px;}

<body>
<div id="oben"><h1>Footer immer unten</h1></div> <!-- Damit oben nicht leer bleibt wird die Header Überschrift mit eingebunden-->
<div id="mitte"></div>
<div id="unten"></div>
</body>
 
Na super! Habe den CSS-Part in der CSS vermutet, aber nicht nachgesehen.
Wenn Du hier Beispiele postest, dann sorge bitte auch dafür, dass sie nachvollziehbar bleiben.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben