Artcoredezign.com blog sur le webdesign, des astuces, des infos, des tutoriaux » CSS Javascript HTML http://www.artcoredezign.com Artcoredezign.com blog sur le webdesign, des astuces, des infos, des tutoriaux Thu, 15 Apr 2010 18:14:20 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 Un Footer en CSS avec CSSStricky Footer http://www.artcoredezign.com/un-footer-en-css-avec-cssstricky-footer/ http://www.artcoredezign.com/un-footer-en-css-avec-cssstricky-footer/#comments Thu, 28 Jan 2010 15:07:57 +0000 admin http://www.artcoredezign.com/?p=146 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
]]> http://www.artcoredezign.com/un-footer-en-css-avec-cssstricky-footer/feed/ 0 PNG transparent et IE6 http://www.artcoredezign.com/png-transparent-et-ie6/ http://www.artcoredezign.com/png-transparent-et-ie6/#comments Wed, 11 Feb 2009 20:47:20 +0000 admin http://www.artcoredezign.com/?p=15 Qui n’a pas eu envie d’utiliser les avantages de la transparence du PNG pour ses créations web ??

Mais cette caractéristique n’est pas bien gérée par IE 5.5 et 6. Pour résoudre ce problème rendez vous sur :

http://labs.unitinteractive.com/unitpngfix.php
http://www.dillerdesign.com/experiment/DD_belatedPNG
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

]]> http://www.artcoredezign.com/png-transparent-et-ie6/feed/ 0