jan 28

Un Footer en CSS avec CSSStricky Footer

Par admin
Ajouter un commentaire
CSS Javascript HTML

css-sticky-footer

 

 

Vous recherchez une solution simple et rapide pour mettre en place sur vos sites des footer ?? Le site CSSStrickyFooter est pour vous.

Source CSS : 

  1.  
  2. /* 
  3. Sticky Footer Solution
  4. by Steve Hatcher
  5. http://stever.ca
  6. http://www.cssstickyfooter.com*/
  7.  
  8. * {margin:0;padding:0;}
  9.  
  10. html, body, #wrap {height: 100%;}
  11.  
  12. body > #wrap {height: auto; min-height: 100%;}
  13.  
  14. #main {padding-bottom: 150px;}  /* Indiquez ici la valeur de la hauteur de votre footer*/
  15.  
  16. #footer {position: relative;
  17.  margin-top: -150px; /* Indiquez ici la valeur négative de la hauteur de votre footer*/
  18.  height: 150px; /* Indiquez ici la valeur de la hauteur de votre footer*/
  19.  clear:both;}
  20.  
  21. /* CLEAR FIX*/
  22. .clearfix:after {content: ".";
  23.  display: block;
  24.  height: 0;
  25.  clear: both;
  26.  visibility: hidden;}
  27. .clearfix {display: inline-block;}
  28. /* Hides from IE-mac */
  29. * html .clearfix { height: 1%;}
  30. .clearfix {display: block;}
  31. /* End hide from IE-mac */
  32.  

Source Html :

  1.  
  2. <div id="wrap">
  3.  <div id="main">
  4.  </div>
  5. </div>
  6. <div id="footer">
  7. </div>
  8.  

Toutes les explications en détail sur cette page
A noter que ce footer est compatible avec une liste assez impressionnante de plateformes :

Navigateurs de Windows

  • 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

Navigateurs de Mac

  • Chamino 1.6
  • Firefox 3.0
  • Safari 3.2

Navigateurs de Linux

  • 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
Social bookmarking sites :
  • Facebook
  • Google Bookmarks
  • Live
  • MySpace
  • Digg
  • del.icio.us
  • PDF
  • RSS
  • email
  • Add to favorites
  • Print
Cet article a été publié le Jeudi, janvier 28th, 2010 à 16 h 07 min et est classé dans CSS Javascript HTML. Vous pouvez laisser un message, ou faire un trackback depuis votre propre site.

Laisser un commentaire

Nom (required)

Adresse mail (ne sera pas publié) (required)

Site Web

Commentaire