footer sempre in basso con i css!!!

Forum per tutti i neofiti e gli esperti che vogliono proporre o rispondere ad argomenti che riguardano lo sviluppo di apllicazioni web basate in aprticolare su Html - Css - Php - MySql, ma non solo...

Moderatore: Michele

footer sempre in basso con i css!!!

Messaggioda Michele » gio apr 26, 2007 4:21 pm

Ho trovato un ottimo script per creare un footer che rimanga sempre in basso compatibile con molti browser!!! 8)
il sito di riferimento è http://ryanfait.com/sticky-footer/
il foglio di stile è il seguente:
Codice: Seleziona tutto
* {
   margin: 0;
}
html, body {
   height: 100%;
}
.wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
   height: 4em; /* .push must be the same height as .footer */
}

mentre il docuemnto corrispondente html è questo:
Codice: Seleziona tutto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>

      <title>A CSS Sticky Footer</title>

      <!--
      The second stylesheet is to make things look pretty.
      The first one is only the important one.
      -->

      <link rel="stylesheet" type="text/css" media="screen" href="layout.css" />
      <link rel="stylesheet" type="text/css" media="screen" href="style.css" />

   </head>
   <body>

      <div class="wrapper">

         <div class="header">
            <h1>CSS Sticky Footer</h1>
         </div>

         <h2>A CSS sticky footer that just works</h2>
         <p>We've all tried to use a <strong>sticky footer</strong> one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS-based <strong>sticky footer</strong> are thankfully over. In just a few simple CSS classes with minimal extra HTML markup, I've fashioned a <strong>sticky footer</strong> that even beginners can get a handle on. It's been tested in IE 5 and up, Firefox, Safari and Opera.</p>
         <h2>Usage of the CSS</h2>
         <p><q>Great! this is exactly what I'm looking for! Can I use it?</q></p>
         <p>Absolutely. There are no terms, licenses, fees or requirements. Use it as you will. If you find the kindness to link to me on your site, I'd appreciate it, but it's by no means necessary. Have fun, and don't be afraid to ask me any questions or send me your thoughts.</p>

         <div class="push"></div>

      </div>

      <div class="footer">
         <p>Copyright &copy; 2006-2007 Ryan Fait | All rights reserved.<br />
         You may not reproduce this example without written permission from Ryan Fait</p>
      </div>

   </body>
</html>

:lol:
Michele
 
Messaggi: 308
Iscritto il: ven mar 17, 2006 2:14 am

Torna a Webmaster

Chi c’è in linea

Visitano il forum: Nessuno e 1 ospite

cron