Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: Sticky Footer



Ranking: 0   Kommentare: 5   |   Bewertung: Keine Berechtigung!  

In diesem Tutorial möchte ich euch zeigen, wie ich einen Stick Footer erstelle. Es gibt tausend möglichkeiten dafür ich finde dieser Version persöhnlich am besten und einfachsten.

Das Tutorial ist für Leute die gute Kenntnisse über HTML und CSS besitzen, für Fragen stehe ich trotzdem gerner zur Verfügung.

Schritt 1 das CSS:



Code:


* {margin:0;padding:0;} 



/* setzt margin und padding überall auf 0 */



html, body, #wrap {height: 100%;}



body > #wrap {height: auto; min-height: 100%;}



#main {padding-bottom: 150px;}  /* muss die selbe Höhe haben wie der Footer ansich */



#footer {position: relative;

    margin-top: -150px; /* negativ Wert des Footers */

    height: 150px;

    clear:both;} 



/* CLEAR FIX*/

.clearfix:after {content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;}

.clearfix {display: inline-block;}

/* Hides from IE-mac */

* html .clearfix { height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */



Damit hätten wir unser CSS formatiert.

Schritt 2 der HTML-Aufbau



Die Basis Struktur sieht so aus:

Code:


<div id="wrap">



    <div id="main" class="clearfix">



    </div>



</div>



<div id="footer">



</div>




Das war es auch schon das müsst Ihr jetzt nur in eure Seite mit übernehmen und anpassen. Bei Fragen steht ich gerne zur Verfügung.

Hier noch eine Liste in Welchen Browsern der Sticks Footer funktioniert.

Code:




Windows Browsers



    * Avant 11.7

    * Chrome 0.4

    * Crome 1.0

    * Firefox 1.5

    * Firefox 2.0

    * Firefox 3.1

    * Flock 1.2

    * Flock 2.0

    * K-Meleon 1.5

    * Minefield 3.2

    * MSIE 4.0

    * MSIE 5.50

    * MSIE 6.0

    * MSIE 7.0

    * MSIE 8.0

    * Navigator 8.1

    * Navigator 9.0

    * Opera 0.27

    * Opera 7.54

    * Opera 8.53

    * Opera 9.63

    * Opera 10.0

    * Safari 3.2

    * Seamonkey 1.1

    * Seamonkey 2.0

    * Shiretoko 3.1



Mac Browsers



    * Chamino 1.6

    * Firefox 3.0

    * Safari 3.2



Linux Browsers



    * Dillo 0.8

    * Epiphany 2.24

    * Firefox 2.0

    * Firefox 3.0

    * Flock 1.1

    * Flock 2.0

    * Galeon 2.0

    * Iceape 1.1

    * Iceweasel 2.0

    * Iceweasel 3.0

    * Kazehakase 0.5

    * Konqueror 3.5

    * Minefield 3.0

    * Navigator 9.0

    * Opera 9.63

    * Opera 10.06

    * Seamonkey 1.1

    * Seamonkey 2.0

    * Shiretoko 3.1






Veröffentlicht von: deleted_1373545880
Veröffentlicht am: 3 Jun. 2009
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: HTML


Themenverwandte Tutorials


Kommentar(e) (5)


deleted_1328631962 sagt:

Auf welchen denn nicht? Ich habe mit dieser Methode nirgends Probleme gehabt.

4 Jul. 2009 15:06:32 • Antworten


deleted_1373545880 sagt:

Zitat Nanobyte:

Einfacher geht es meiner Meinung nach hiermit: http://ryanfait.com/sticky-footer/[/QUO TE]

Die Methode is veraltet und läuft nich auf allen Browsern dementsprechend!


8 Jun. 2009 11:51:01 • Antworten


deleted_1355582138 sagt:

Einfacher geht es meiner Meinung nach hiermit: http://ryanfait.com/sticky-footer/

Zuletzt bearbeitet am: 6 Jun. 2009 00:54:50

6 Jun. 2009 00:54:32 • Antworten


deleted_1373545880 sagt:

Hab hier eine Seite mit der Technick: "http://parchim-taxizentrale.de/"

3 Jun. 2009 23:18:35 • Antworten


Kloeti sagt:

Könnte man da vllt ne Livedemo von sehen?

3 Jun. 2009 17:42:21 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder