[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 510
  • Last Modified:

Footer always at the bottom of the page

Hi all,

Generally people wants the footer to stay at the bottom on the browser.
So far, i wanted it too, but now i want to display the footer at the bottom of the page. Therefore, if the page is very long i can't see it without scrolling.

Hereafter my css file and an example of the code i use.

TIA

P.S. : be kind with my CSS coding i don't optimize it.

HTML file :
<!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="fr" lang="fr">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
   <meta name="Description" content="" />
   <meta name="Keywords" content="" />
   <meta name="Author" content="Richard COFFRE" />
   <meta name="Identifier-URL" content="" />
   <meta name="Reply-to" content="" />
   <meta name="revisit-after" content="15 days" />

   <meta name="Category" content="Internet" />
   <meta name="robots" content="index, follow" />
   <meta name="Publisher" content="" />
   <meta name="Copyright" content="" />
   <meta name="Generator" content="" />
   <title>Annonces dentaires : d&eacute;poser une annonce</title>
   <link rel="stylesheet" type="text/css" href="c/ads.css" media="screen" title="Normal" />
   <link rel="stylesheet" type="text/css" href="c/autre.css" />

   <script type="text/javascript" src="menu.js"></script>
   <script type="text/javascript">
   window.onload = function() { init("ssmenu1");init("ssmenu2");init("ssmenu3");init("ssmenu4");init("ssmenu5"); };
   function init(subMenu) {
      var obj = document.getElementById(subMenu);
      obj.onmouseover = AnnulerCacher;
      obj.onmouseout = CacherDelai;
      obj.onfocus = AnnulerCacher;
      obj.onblur = CacherDelai;
   }
   </script>
</head>  
<body>
   <div id="page">
      <div id="header" title="">
      <a href="index.php" class="logo"></a>         <div id="conteneurmenu">
            <script language="Javascript" type="text/javascript">
               // pour éviter le clignotement désagréable
               preChargement();
            </script>

               <p id="menu1" class="menu" onmouseover="MontrerMenu('ssmenu1');" onmouseout="CacherDelai();">
                     <a href="#" onmouseover="MontrerMenu('ssmenu1');" onfocus="MontrerMenu('ssmenu1');">STAGES</a>
               </p>
               <ul id="ssmenu1" class="ssmenu">
                     <li><a href="index.php?rub=stage&amp;srub=stage_rech">recherche de stages</a></li>
                     <li><a href="index.php?rub=stage&amp;srub=stage_offre">offres de stages</a></li>
               </ul>

               <p id="menu2" class="menu" onmouseout="CacherDelai();" onmouseover="MontrerMenu('ssmenu2');">
                     <a href="#" onfocus="MontrerMenu('ssmenu2');">EMPLOI</a>
               </p>
               <ul id="ssmenu2" class="ssmenu">
                     <li><a href="index.php?rub=emploi&amp;srub=emploi_rech">recherche d&#39;emplois</a></li>
                     <li><a href="index.php?rub=emploi&amp;srub=emploi_offre">offres d&#39;emplois</a></li>

               </ul>
               
               <p id="menu3" class="menu" onmouseover="MontrerMenu('ssmenu3');" onmouseout="CacherDelai();">
               <a href="#" onfocus="MontrerMenu('ssmenu3');">MATERIEL</a>
               </p>
               <ul id="ssmenu3" class="ssmenu">
                     <li><a href="index.php?rub=materiel&amp;srub=materiel_vente">vente mat&eacute;riel</a></li>
                     <li><a href="index.php?rub=materiel&amp;srub=materiel_achat">achat mat&eacute;riel</a></li>

               </ul>
               <p id="menu4" class="menu" onmouseover="MontrerMenu('ssmenu4');" onmouseout="CacherDelai();">
                     <a href="#" onfocus="MontrerMenu('ssmenu4');">LABORATOIRE</a>
               </p>
               <ul id="ssmenu4" class="ssmenu">
                     <li><a href="index.php?rub=labo&amp;srub=labo_vente">vente laboratoire</a></li>
                     <li><a href="index.php?rub=labo&amp;srub=labo_achat">achat laboratoire</a></li>

               </ul>
            

               <p id="menu5" class="menu" onmouseover="MontrerMenu('ssmenu5');" onmouseout="CacherDelai();">
                     <a href="moncompte.php" onfocus="MontrerMenu('ssmenu5');">MEMBRE</a>
               </p>
               <ul id="ssmenu5" class="ssmenu">
                     <li><a href="logout.php">Se d&eacute;connecter</a></li>
                     <li><a href="annonce_creer.php">Cr&eacute;er une annonce</a></li>

               </ul>
         </div>
         <script language="Javascript" type="text/javascript">
            centrer_menu = false;
            Chargement();
         </script>
      </div>
      <div id="colgauche_haut">
<p>
 lundi 28 f&eacute;vrier 2005</p>
         <div id="moteur">

           <form id="form_recherche" method="post" action="recherche_resultats.php?mode=n">
             <div id="moteurint">
               <label for="recherche">Rechercher :</label>
               <input name="recherche" id="recherche" accesskey="" value="Saisissez vos mots-cl&eacute;s" class="champs" onfocus="this.value=''" />
               <input type="submit" name="Submit" value="Ok" class="valid" />
             </div>
             <a href="recherche_avancee.php" title="Recherche avanc&eacute;e">Recherche avanc&eacute;e</a>

           </form>
         </div>
     
      </div>
      <div id="colgauche_bas">
        
         <div id="xiti-logo"><p>
         <a href="http://www.xiti.com/xiti.asp?s=181365" title="Mesurez votre audience">
         <script type="text/javascript">
         <!--
         Xt_param = 's=181365&p=avant_lancement';
         Xt_r = document.referrer;
         Xt_h = new Date();
         Xt_i = '<img width="39" height="25" border="0" ';
         Xt_i += 'src="http://logv26.xiti.com/hit.xiti?'+Xt_param;
         Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
         if(parseFloat(navigator.appVersion)>=4)
         {Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
         document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Analyse d\'audience">');
         //-->
         </script>
         <object>

         <noscript>
         <div id="xiti-logo-noscript">
         Mesure d'audience ROI frequentation par <img width="39" height="25" src="http://logv26.xiti.com/hit.xiti?s=181365&p=" alt="Analyse d'audience" />
         </div>
         </noscript>
         </object>
         </a>
         </p></div>  
   <div class="bloc_connexion">

      <p class="bloc_connexion_titre">IDENTIFICATION</p>
      <p><a class="creer" href="annonce_creer.php?1" title="Cr&eacute;er une annonce">Cr&eacute;er une annonce</a></p>
      <p class="titregris">Mon compte :</p>
      <ul class="moncompte">
      <li><a class="gen" href="moncompte.php?rub=profil&amp;section=1" title="Voir mes informations personnelles">Etat-civil et adresse</a></li>
      <li><a class="gen" href="moncompte.php?rub=profil&amp;section=2" title="Voir ma formation">Formation</a></li>

      <li><a class="gen" href="moncompte.php?rub=profil&amp;section=3" title="Voir mon param&egrave;trage d'Opt-in">Options</a></li>
      <li><a class="gen" href="client_factures.php" title="Voir mes annonces publi&eacute;es">Annonces publi&eacute;es</a></li>
      <li><a class="gen" href="client_annonces.php?type=attente" title="Voir mes annonces en attente">Annonces en attente</a></li>
      <li><a class="gen" href="client_annonces.php?type=expiree" title="Voir mes annonces expir&eacute;es">Annonces expir&eacute;es</a></li>
      </ul>
     
         <form id="logout" name="logout" method="post" action="logout.php" >

         <input type="submit" name="Submit" class="button" value="Se déconnecter" />
         </form>
   </div>
     
     
<!-- zone colgauche_bas -->
      </div>
      <div id="zone_libre">
<script type="text/javascript">
function countIt()
{
  document.depot_form.counter.value = document.depot_form.annonce_texte.value.length;
}
</script>

     
   <form id="depot_form" name="depot_form" method="post" action="annonce_check.php">

         <div id="titreForm">Saisie d'une annonce : les recherches de stage sont GRATUITES, les recherches d'emploi sont &agrave;  1.00 euro TTC</div>
         <div id="corpForm">
            <fieldset id="annonce">
               <legend>Informations principales</legend>
            <p>
          
                     <label><img src="i/redstar.gif" alt="champ obligatoire" />Mod&egrave;le de l'annonce : </label>

                     <input class="input_just_for_show" readonly="readonly" type="type" name="annonce_type_display" size="25" tabindex="1" value="Standard (35.00 euro TTC)" />
               <input type="hidden" name="annonce_type" value="standard" />
            </p>
               <p>
                     <label><img src="i/redstar.gif" alt="champ obligatoire" />Cat&eacute;gorie de l'annonce : </label>
               <select name="annonce_categorie" tabindex="2">
<option value="stage_rech">Recherche de stage</option>
<option value="stage_offre">Offre de stage</option>

<option value="emploi_rech">Recherche d'emploi</option>
<option value="emploi_offre">Offre d'emploi</option>
<option value="materiel_achat">Achat de matériel</option>
<option value="materiel_vente">Vente de matériel</option>
<option value="labo_achat">Achat de laboratoire</option>
<option value="labo_vente">Vente de laboratoire</option>
</select>
            </p>
            <p>

               <label><img src="i/redstar.gif" alt="champ obligatoire" />Date et dur&eacute;e (en mois) de parution : </label>
                     <input type="type" name="date_publication" size="10" value="01/03/2005" tabindex="3" onfocus="this.className='focus';" onblur="this.className='normal';" />
               <select name="duree_publication" tabindex="4">
               <option value="1">1</option><option value="2">2</option><option value="3">3</option>               </select>
               &nbsp;<span class="note">Pour le 25 d&eacute;cembre 2000, saisissez 25/12/2000.</span>

            </p>
               <p>
                     <label>Code de remise : </label>
                     <input type="type" name="code_remise" size="10" value="" tabindex="5" onfocus="this.className='focus';" onblur="this.className='normal';" />
            </p>
            <p>
               <label><img src="i/redstar.gif" alt="champ obligatoire" />Num&eacute;ro de t&eacute;l&eacute;phone : </label>

                     <input type="type" name="annonce_telephone" size="20" value="+33 4 12 23 56 76" tabindex="5" onfocus="this.className='focus';" onblur="this.className='normal';" />
               &nbsp;<span class="note">20 caract&egrave;res maximum</span>
            </p>
            <p>
               <label><img src="i/redstar.gif" alt="champ obligatoire" />Texte de l'annonce : <br /><span class="note">200 caract&egrave;res maximum.<!--<br />Ne pas saisir de sauts de ligne.--></span></label>
               <input class="input_just_for_show" readonly="readonly" type="text" name="counter" size="4">&nbsp;caract&egrave;res
               <textarea name="annonce_texte" rows="3" cols="45" tabindex="6" onfocus="this.className='focus';" onblur="this.className='normal';" onkeyup='countIt()'></textarea>

            </p>
         </fieldset>
            <fieldset id="options">
               <legend>Options (prix en euro TTC) </legend>
            <table cols="2" border="0">
               <tr>
                  <td width="50%">
                     <p>

                     
                              <input type="checkbox" name="fond_colore" size="" value="oui" tabindex="7" onfocus="this.className='focus';" onblur="this.className='normal';" /> Fond color&eacute;
                        &nbsp;(+5.00)
                     </p>
                     <p>
                     
                              <input type="checkbox" name="domiciliation_journal" size="" value="oui" tabindex="8" onfocus="this.className='focus';" onblur="this.className='normal';" /> Domiciliation sur le site
                        &nbsp;(+10.00)
                     </p>
                  </td>
                  <td width="50%">

                     <p>
                     
                              <input type="checkbox" name="paiement_cheque" size="" value="oui" tabindex="9" onfocus="this.className='focus';" onblur="this.className='normal';" /> Paiement par ch&egrave;que au lieu de CB s&eacute;curis&eacute;
                        &nbsp;(+5.00)
                     </p>
                     <p>
                     <!--
                              <input type="checkbox" name="parution_3_mois" size="" value="oui" tabindex="10" onfocus="this.className='focus';" onblur="this.className='normal';" /> Parution sur 3 mois
                        &nbsp;(-10%)
                     -->
                        <span class="note">Vous ne payez cette option qu'une fois quelle que soit la dur&eacute;e du publication de l'annonce.</span>

                     </p>
                  </td>
               </tr>
            </table>
         </fieldset>            
         <p><label><img src="i/redstar.gif" alt="champ obligatoire" />Ces champs sont obligatoires.</label></p>
      </div>
      <div id="piedForm">
         <input id="bouton_valider" type="image" src="i/valider_up.gif" alt="Valider toutes les saisies utilisateur" onmouseover="this.src='i/valider_over.gif'" onmouseout="this.src='i/valider_up.gif'" />

      </div>
   </form>
   </div> <!-- fin de zone_libre -->

      <div id="footer">
         <p>
         <a href="conditions_utilisation.php" title="Conditions d'utilisation">Conditions d'utilisation</a>&nbsp;|&nbsp;
         <a href="obligations_legales.php" title="Obligations l&eacute;gales">Obligations l&eacute;gales</a>&nbsp;|&nbsp;

         <a href="cgv.php" title="Conditions g&eacute;n&eacute;rales de vente">Conditions g&eacute;n&eacute;rales de vente</a>&nbsp;|&nbsp;
         <a href="confidentialite.php" title="Confidentialit&eacute;">Confidentialit&eacute;</a>&nbsp;|&nbsp;
         <a href="nous_contacter.php" title="Nous contacter">Nous contacter</a>
         </p>
      </div>

   </div> <!-- fin de id="page" -->
</body>
</html>


CSS file :
body {
   background-color : #fff;
   margin           : 10px 0px 0px 0px;
   padding          : 0px;
   font-family      : "Trebuchet MS", Helvetica, Sans-Serif;
   font-size        : small;
   color            : #000;
}

html, body, #page {
     min-height: 100%;
     width: 100%;
     height: 100%;
     }

html>body, html>body #page {
   height: auto;
}
   
#page {
    position: absolute;
     top: 0;
     left: 0;
    color               : #000;
}

#header {
      position            : absolute;
      top                 : 3px;
      width               : 100%;
      height              : 80px;
      z-index             : 2;
      text-align          : center;
      border-top-color    : #FB9500;
      border-bottom-color : #FB9500;
      border-top-style    : solid;
      border-bottom-style : solid;
      border-top-width    : 1px;
      border-bottom-width : 1px;
}

html>body #header {
   position         : fixed;
}

#footer {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     
   height           : 30px;
   text-align       : center;
   background       : #eee;
   color            : #333;
/*  
   position         : absolute;
   margin           : 0px;
   top              : 95%;
   bottom           : 0px;
   width            : 100%;
*/  
}

#footer a {
   font-size        : 85%;
   margin           : 0px;
}

#footer p {
   margin           : 0px;
}


p {
   font-size        : small;
   margin : 0 0 5px 0;
}

h1 {
   font-size:1.17em;
      border-bottom: 1px solid #fe9800;
      color: #fe9800;
   margin: 0 0 1em 0;
}

h2 {
   font-size:1em;
      border-bottom: 1px dashed #fe9800;
      color: #fe9800;
   margin: 0 0 0.5em 0;
}

a {
   color: #fb9500;
   text-decoration: underline;
}

a:hover {
   color: #369;
}

img {
   border           : none;
}

.belle_puce ul, .belle_puce li {
   list-style-image :   url(../i/listmark_1.gif);
   list-style-type : disc;
}

.sans_puce li {
   list-style-type : none;
}

a.genpetit:link, a.genpetit:active, a.genpetit:visited {
      color            : #ccc;
      text-decoration  : none;
    font-family:Arial, Helvetica, sans-serif;
    font-size        : 10px;
}

a.genpetit:hover {
      color           : #fb9500;
      text-decoration : underline;
}

.logo {
      position            : absolute;
    background-position : top left;
      background-image    :   url(../i/logo.gif);
      left                : 2px;
      top                 : 0px;
      width               : 241px;
      height              : 80px;
    padding             : 0px;
}




/*** Mise en forme du formulaire ***/
#titreForm, #piedForm {      
   font             : bold 1.1em;
   color            : #5a7a90;
   background       : #fb9500;
   margin-right     : 10px;
   margin-left      : 0px;
   padding          : .2em .2em .2em 0em;
}

#titreForm {                                                                
   text-align             : left;
   background-image       :   url(../i/bgtitreform.gif);
   background-position    : left;
   background-repeat      : repeat-y;
   border-right           : 1px solid #ced9e5;
   height                 : 1.0em;
   line-height             : 1.0em;
   font-weight             : bold;
}

#titreForm_check {
   text-align             : left;
   background-image       :   url(../i/bgtitreform_check.gif);
   background-position    : left;
   background-repeat      : repeat-y;
   border-right           : 1px solid #ced9e5;
   height                 : 2.0em;
   line-height            : 1.0em;
   font-weight            : bold;
}

#piedForm {
   background-color       : #fb9500;        
   background-repeat      : repeat-y;
   border-left            : 1px solid #ced9e5;
   height                 : 20px;
}

#piedForm input {
   font-weight      : bold;
   margin-left      : 1em;
}

#corpForm {
   border           : 1px solid #ccc;
   border-right     : 1px dashed #ced9e5;
   color            : #3F4B65;
   background       : #fff;
   margin-right     : 10px;
   overflow         : auto;
   padding          : 0.5em;
   height           : 100%;
}

#corpForm fieldset {
   margin           : 0;
   font-style       : normal;
   padding          : 0 0.5em 0.5em;
   -moz-border-radius: 0.5em;    /*** arrondis dans firefox, css3 encore ***/
}

#corpForm legend {
   font-weight      : bold;
   color            : #3f4b65;
   background       : transparent;
}

#corpForm p {
   padding          : .2em 0;
   margin           : 0 0 .2em 0;
}

#etat_civil  {
   margin-top: 0px;
   margin-bottom: 0px;
}

#etat_civil_form  {
margin-top        : 0px;
margin-bottom     :0px;
}

#telephone  {
margin-top        : 0px;
margin-bottom     : 0px;
}

#validation_finale {
margin-top        : 0px;
margin-bottom     : 0px;
}

#corpForm fieldset#etat_civil label, fieldset#annonce label, fieldset#adresse label, fieldset#telephone label, fieldset#competence label, fieldset#tarif label, fieldset label,fieldset#options label, fieldset#code_remise label { /*** Mise en forme des intitulés de champs ***/
   float            : left;            /*** Très important, ne pas suprimer ! ***/
   width            : 40%;             /*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
   text-align       : right;           /*** ... et ils sont alignés à droite... ***/
   vertical-align   : top;
   margin           : 0;
   padding          : 0 .5em 0 0;
   line-height      : 1.8;             /*** ... et centrés verticalement. ***/
}



#corpForm fieldset#rubrique_selection_fichier label, fieldset#sous_rubrique_selection_fichier label { /*** Mise en forme des intitulés de champs ***/
   float            : left;            /*** Très important, ne pas suprimer ! ***/
   width            : 40%;             /*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
   text-align       : left;           /*** ... et ils sont alignés à droite... ***/
   vertical-align   : bottom;
   margin           : 0;
   padding          : 0 .5em 0 0;
   line-height      : 2;             /*** ... et centrés verticalement. ***/
}

#corpForm label:hover, #piedForm input {
   cursor           : pointer;      /*** Petite astuce pour apprendre aux utilisateurs à cliquer sur les intitulés ***/
}

.obligatoire {                                      
   color            : #5A7A90;
}

#corpForm textarea {
   float            : left;
}

#corpForm .focus {   /*** Mise en avant des champs en cours d'utilisation ***/
   background       : #5c829c;
   color            : #fff;
   border-bottom    : transparent #98aab1;
   border-right     : transparent #98aab1;
   border-top       : transparent #afbac5;
   border-left      : transparent #afbac5;
   filter           : alpha(opacity=70);
   -moz-opacity     : 0.7;
   opacity          : 0.7;
}

#corpForm .normal {  /*** Retour à l'état normal après l'utilisation ***/
   background       : white;
   color            : #000;
}

.input {
  color            : #000;
  background-color : #fde8c9;
  font-size        : 12px;
  font-family      : arial;
 }

 /* Pour le moment c'est un peu le bordel car boutons optimisés pour IE, a revoir later */
input.bouton {
  border           : 2px outset white;
  font-weight      : bold;
  cursor           : pointer;
  background-color : #FDE8C9;
  color            : #3F4B65;
}

input.bouton:hover {
background-color : #A7ADB7;
color            : white;
}

input.bouton:active {
border           : 2px inset grey;
background-color : #3F4B65;
color            : white;
}

:hover input.bouton {
background-color : #A7ADB7;
color            : white;
}

#etat_civil, #telephone, #diplome_form ul li {
list-style      : disc url(../i/listblack.gif);
vertical-align  : top;
margin-top      :0em;
margin-bottom   :0em;
line-height     : 1.15em;
}

#etat_civil {
margin-bottom   : 0em;
pading-bottom   : 0em;
vertical-align  : top;
}

legend {
 top            : 0px;
 padding        : 2px 5px;
}

#coord_electroniques {
width           : 60%;
float           :left;
vertical-align  : top;
}

#diplome_specialites {
position       : inherit;
width          : inherit;
margin-top     : 0px;
margin-bottom  : 0px;
}

#specialites {
width          : 55%;
float          : right;
vertical-align : top;
}

#autorise {
   clear: both;
}

#etat_civil ul {
float       : left;
height      : 1%;
}

#telephone ul {
float       : left;
height      : 1%;
}

#diplome_form ul {
float       : left;
height      : 1%;
}

/* Revoir le positionnement car décalage de 50px de colgauche */
#colgauche_haut {
   position         : absolute;
   top              : 100px;
   left             : 10px;
/*  
   width            : 250px;
   height           : 50px;
*/  
   width            : 230px;
   height           : 40px;
}



#zone_navigation {

   background-color :#fff;

   position         : absolute;

   top              : 74px;

   left             : 378px;

   width            : 220px;

   text-align:center;

   border: 1px solid #fb9500;

   z-index:2;

   /*border-top: 0px;*/

}



#zone_navigation a {

   color : #fe9800;

}

   

#colgauche_bas {

   background-color : #fff;

   position         : absolute;

/*  

   top              : 220px;

   left             : 10px;

   width            : 250px;

*/  

   top              : 200px;

   left             : 31px;

   width            : 159px;

}



#zone_libre {

   background-color : #fff;

   position         : absolute;

   top              : 100px;

   top              : 102px;

   left             : 241px;

   width            : 759px;      /* je reduis sinon ascenceur horizontal */

   overflow:auto;

}



/* CELLE DE REGISTER CHECK */

#zone_libre2 {

   background-color : #fff;
   position         : absolute;
   top              : 85px;
   left             : 241px;
   width            : 759px;
   height:100%;


   overflow :none;


}



#zone_libre_avec_pub, #zone_libre_avec_pub_et_ascenceur, #texte_footer {

   background-color : #fff;

   position         : absolute;

   top              : 97px;

   left             : 250px;

   width            : 440px;

/*   border           : 1px solid #afbac5;

   border-right     : 1px dashed #888;

   border-bottom    : 1px dashed #888;*/

   font-family      : "Trebuchet MS", Helvetica, Sans-Serif;

   padding          : 0px;

}



#zone_libre_avec_pub_et_ascenceur, #texte_footer {

   width: 465px;

   height: 430px;

   padding-right: 5px;

   overflow: auto;

}  



/* Definition des styles pour les textes affiches via le pied de page */

#texte_footer h2 {

   margin-top: 1.5em;

}



#texte_footer p, li {

   text-align: justify;

   margin: 0 0 1em 0;

}  



#texte_footer ul {

   margin-left: 0;

   padding-left: 0;

   list-style-position: inside;

}



#texte_footer ul li {

   list-style      : disc url(../i/belle_puce_noire.gif);

/*   color           : #000;*/

   font-family     : "Trebuchet MS", Helvetica, Sans-Serif;

   margin-left: 40px;

   padding-left: 0;

}



#zone_libre_avec_pub ul li {

   list-style      : disc url(../i/listmark_2.gif);

   font-size       : 12px;

   color           : #43657D;

   font-family     : "lucida sans unicode", "Trebuchet MS", Helvetica, Sans-Serif;

   line-height:23px;

}



.detail_titre {

   text-align             : left;

   background-image       :   url(../i/bgtitreform_annoncedetail.gif);

   background-color       : #fb9500;

   background-position    : left;

   background-repeat      : repeat-y;

   text-indent            : 35px;

   color                  : #666;

   font-family            : "Trebuchet MS", Helvetica, Sans-Serif;

   font-size              : 13px;

   font-weight            : bold;

   border-bottom          : 1px solid #ccc;

   width                  :100%;

   height                 : 25px;

   line-height            : 25px;

}

 

a.retour  {

   position          : absolute;

   background-color  : #fff;

   color             : #8AABC2;

   top               : 450px;

   left              : 595px;

   text-decoration   : none;

    font-weight      : bold;

}

a.retour:hover  {

   background-color :#fff;

   color            : #fb9500;

   top              : 450px;

   left             : 595px;

   text-decoration  :underline;

 

}



img.bouton_action {

   top              : 450px;

   left : 300px;

}



#recapitulatif_facture {

   width : 450px;

   height:350px;

   overflow:auto;

}



#colmilieu1 {

   background-color : #fff;

   position         : absolute;

   top              : 100px;

   left             : 231px;

   width            : 160px;
}



#colmilieu2 {

   background-color : #fff;

   position         : absolute;

   top              : 100px;

   left             : 396px;

   width            : 160px;

}



#coldroite {

   background-color : #fff;

   position         : absolute;

   top              : 100px;

   left             : 571px;

   width            : 160px;

   left             : 561px;

   width            : 160px;

}



#col_publicite {

   background-color : #fff;

   position         : absolute;

   z-index          : 2;

   top              : 100px;

   height           : 400px;

   right            : 15px;

   width            : 250px;

   margin           : 0;

   padding          : 0;

}



#grande_pub {

   background-color : #fff;

   position         : absolute;

   z-index          : 2;

   top              : 100px;

   height           : 400px;

   right            : 10px;

   width            : 250px;

   margin           : 0;

   padding          : 0;

}



#petite_pub1, #petite_pub2

{

   background-color : #fff;

   height           : 200px;

   right            : 10px;

   width            : 250px;

/*   border           : 1px solid;*/

   margin           : 10px 10px 10px 10px;

}



html>body #grande_pub {

   position         : fixed

}



#actualite {

   margin-bottom    : 2em;

}



#actualite {

   padding          : 0 2%;

   width            : 100%;

   voice-family     : "\"}\"";

   voice-family     : inherit;

   width            : 95%;

}



#actualite h2 {

   border-bottom    : 2px solid #369;

   color            : #369;

   font-size        :large;

   background-color : transparent;

   padding          : 0 0 0.2em 0;

}



#actualite h3 {

   margin           : 0;

   color            : #69c;

   background-color : transparent;

}



#actualite h4 {

   font-size        : 85%;

   font-weight      : 500;

   margin           : 0.2em 0 1em 0;

}



#actualite h5 {

   text-align       : right;

   font-size        : small;

}



#actualite h5 a {

   background-color : #ffecce;

   border           : 1px solid #c60;

   color            : #000;

   font-weight      : 500;

   padding          : 0.2em;

   text-decoration  : none;

}



#actualite h5 a:hover {

   background-color : #ffecce;

   color            :#c60;

}



#actualite p {

   margin           : 0 0 2em 0;

}



#actualite a {

   background-color : transparent;

   color            : #f60;

}



#actualite a:hover {

   color            : #369;

   background-color : transparent;

   text-decoration  : none;

}



#moteur {

   position         : absolute;

/*   right            : 6%; */

   top              : 150;

   text-align       : right;

   

}



#moteurint label {

   display          : block;

   text-align       : left;

   color            : #c60;

   background-color : #fff;

   font-weight      : 700;

}



#moteur input.champs, #texte #moteurint input.champs {

   color            : #333;

   background-color  : #fff;

   background-image  :    url(../i/champs.png);

   background-position: top;

   background-repeat: repeat-x;

   border           : 1px solid #999;

   width            : 12em;

}



#moteur input.valid,#texte #moteurint input.valid {

   background-color : #f90;

   background-image :    url(../i/ok.png);

   background-position: bottom;

   background-repeat: repeat-x;

   border-color     : #c60;

   border-style     : solid;

   border-width     : 1px;

   color            : #fff;

   cursor           : pointer;

   font-weight      : 700;

   text-align       : center;

}



#moteur input.valid:hover,#texte #moteurint input.valid:hover {

   background-color : #69c;

   background-image :    url(../i/oksurvol.png);

   background-position: bottom;

   background-repeat: repeat-x;

   border           : 1px solid #369;

   color            : #fff;

}



#moteur input.valid:active,#texte #moteurint input.valid:active {

   background-color : #9cf;

   background-image :    url(../i/okclic.png);

   background-position: bottom;

   background-repeat: repeat-x;

   border           : 1px solid #9cb4ce;

   color            : #fff;

}



.affichage_date {

   color            : #000;

   font-size        : 85%;

}



.rouge {

   color            : #ff0000;

}



.menu_bloc {

   background-color : #ffecce;

   color            : #000000;

   border           : 1px solid #666;

   text-align       : center;

   padding-left     : 2px;

   padding-right    : 2px;

   padding-top      : 1px;

   padding-bottom   : 3px;

}



.menu_bloc_fixe {

   background-color : #ffecce;

   color            : #000000;

   border           : 1px solid #666;

   text-align       : center;

   width            : 130px;

}



html>body .menu_bloc_fixe {

   position         : fixed

}



.menu_bloc h2, .menu_bloc_fixe h2 {

   background-color : transparent;

   color            : #c60;

   margin           : 0;

   font-size        : medium;

   font-style       : italic;

}



.annonce, .annonce_coloree {

   color            : #000000;

   border-left      : 1px dashed #FB9500;

   border-right     : 1px dashed #FB9500;

   border-bottom    : 1px solid #FB9500;

   font-size        : 85%;

   text-align       : left;

   padding: 1px 2px 0px 2px;

   margin: 5px 5px 5px 5px;

   line-height: 1.1em;

}



.annonce_coloree  {

   background: #a5a4a4;
   color: #fff;

   
   }
.annonce_coloree a {

   background: #a5a4a4;

   font-weight: bold;


   
   }


   


ul.annonce, ul.annonce_coloree {

   list-style-position: 0;

   list-style-type: none;

   margin-top: 0;

   margin-bottom: 0;

}



li.annonce, li.annonce_coloree {

   margin-top: 0;

   margin-bottom: 0;


}



.annonce_old {

   background-color : lightgray;

   color            : #000000;

   border           : 1px solid #666;

   font-size        : 90%;

   text-align       : left;

   padding-left     : 2px;

   padding-right    : 2px;

   padding-top      : 1px;

   padding-bottom   : 3px;

   margin-top       : 5px;

   margin-left      : 5px;

   margin-right     : 5px;

   margin-left      : 5px;

   margin-right     : 5px;

}



.offre_emploi {

   background-color : lightblue;

   color            : #000000;

   border           : 1px dashed #666;

   border-width     : thick;

   text-align       : left;

   padding-left     : 2px;

   padding-right    : 2px;

   padding-top      : 1px;

   padding-bottom   : 3px;

   margin-top       : 5px;

   margin-left      : 5px;

   margin-right     : 5px;

   margin-left      : 5px;

   margin-right     : 5px;

}



.stage {

   background-color : lightgreen;

   color            : #000000;

   border           : 1px solid #666;

   font-size        : 90%;

   text-align       : left;

   padding-left     : 2px;

   padding-right    : 2px;

   padding-top      : 1px;

   padding-bottom   : 3px;

   margin-top       : 5px;

   margin-left      : 5px;

   margin-right     : 5px;

   margin-left      : 5px;

   margin-right     : 5px;

}





.annonceTitre {

   font-size        : normal;

   font-weight      : bold;

   margin           : 0.2em 0 0 0;

}

   

/**

.annonce p, .annonce2 p {

   font-size        : 85%;

}



//*/

.note {

   font-size : 85%;

   font-style : italic;

}  



.note_justi_droite {

   font-size : 85%;

   font-style : italic;

   text-align : right;

}  



.note_rouge {

   font-size : 85%;

   font-style : italic;

   color     : #f00;

}  



.categorie_annonce {

      background-image :   url(../i/bgannonces.gif);

   background-position : right;

      height           : 21px;

      color            : #fff;

      background-color : #fe9800;

      font-weight      : bold;

      font-family      : "lucida sans unicode","Trebuchet MS", Helvetica, Sans-Serif;

      font-size        : 90%;

      text-align       : center;

      padding-left     : 3px;

      padding-right    : 5px;

      padding-top      : 0px;

      padding-bottom   : 0px;

      margin-top       : 5px;

      margin-left      : 5px;

      margin-right     : 5px;

      margin-left      : 5px;

      margin-right     : 5px;

      line-height      : 21px;

}



table.presentation {

   border           : 3px solid #fb9500;

   border-collapse  : collapse;

   width            : 90%;

   margin           : auto;

}



thead.presentation, tfoot.presentation {

   background-color : #ffcc99;

   background-image :   url(../i/sky.jpg);

   border           : 1px solid #fb9500;

}



tbody.presentation {

   background-color : #FFFFFF;

   border           : 1px solid #fb9500;

}



th.presentation {

   font-family      : monospace;

   border:1px dotted #fb9500;

   padding:5px;

   background-color:#fff2d7;

   width:25%;

}



td.presentation {

   font-family:sans-serif;

   font-size:80%;

   border:1px solid #fb9500;

   padding:5px;

   text-align:left;

}



table#table_annonces  {

   font-family:sans-serif;

   border           : 3px solid #fb9500;

   border-collapse  : collapse;

   width            : 90%;

   margin           : 0;

}



#table_annonces thead, tfoot {

   background-color : #fc9;

   background-image :   url(../i/sky.jpg);

   border           : 1px solid #fb9500;

}



#table_annonces tbody {

   background-color : #fff;

   border           : 1px solid #fb9500;

}



#table_annonces th {

   font-family      : monospace;

   border:1px dotted #fb9500;

   padding:5px;

   background-color:#fff2d7;

   width:25%;

}



#table_annonces td {

   font-family:sans-serif;

   font-size:80%;

   border:1px solid #fb9500;

   padding:5px;

   text-align:center;

}



td.presentation_montant {

   font-family:sans-serif;

   font-size:80%;

   border:1px solid #fb9500;

   padding:5px;

   text-align:right; /* Les montants sont alignes a droite. */

}



h4.recherche_titre, h4.client_annonces_titre, h4.client_factures_titre, h4.zone_libre_titre {

      border-bottom: 1px solid #fe9800;

      color: #fe9800;

      margin-bottom: 1em;

}



.recherche_resultat {

   margin : 0.4em 0 0 0;

}



.recherche_texte {

   font-size : 85%;

   font-style : italic;

}



   

.input_just_for_show {

  color            : #000;

  background-color : #efefef;

   border-style     : none;

}    





ul.moncompte {

   text-align   : left;

   margin-left  : 18px;

   margin-top   : 0px;

   padding-left : 0px;

   font-size    : 12px;

   list-style-image :   url(../i/puceadmin.gif);

   line-height: 0.3em;

}  



a.creer {

font-size: 12px;

font-weight: bold;

color: #fb9500;

}



a.creer:hover {

font-weight: bold;

color: #444;

text-decoration:none;

}



#footer a {

   font-size        : 85%;

   margin           : 0px;

   color            : #8AABC2;

}



#footer a:hover {

   font-size        : 85%;

   margin           : 0px;

   color            : #fb9500;

}





.prev_suiv {

margin-left: 17%;

margin-right: 17%;

}  



#etat_civil, #coord_electroniques, #diplome_specialites ul li      {

      list-style: disc url(../i/listblack.gif);

      vertical-align: top;


      }



input#bouton_valider, input#bouton_payer {

   padding :10px;

   float:right;

}      



fieldset#code_remise {

   margin-top:10px;

}



li.off_total {

   list-style-type : none;

   text-align : right;

   font-weight : bold;

}



.bloc_connexion {

      border           : 1px solid #ccc;

      text-align       : center;

      margin-bottom    : 0px;

      width            : 159px;

      font-family      : "lucida sans unicode","Trebuchet MS", Helvetica, Sans-Serif;

      font-size        : 100%;

    margin           : 0;

      color            : #222;



}

.bloc_connexion_id {

      border           : 0px;

    border-bottom    : 0px solid #ccc;

      text-align       : center;

      width            : 159px;

      font-family      : "lucida sans unicode","Trebuchet MS", Helvetica, Sans-Serif;

      font-size        : 12px;

    margin           : 0 0 0 0;

      color            : #444;

}



.bloc_connexion_titre li {

}



.bloc_connexion_titre {

      border           : 0px solid #1f3953;

    background-color: #8aabc2;

    FILTER           : progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#8AABC2);

      width            : 159px;

 border-bottom: 1px solid #afbac5;

      height           : 21px;

      color            : #43657D;

    font-weight      : bold;

      font-family      : "lucida sans unicode","Trebuchet MS", Helvetica, Sans-Serif;

    font-size        : 12px;

    text-align:center;

      padding          : 0px;

      margin           : 0px;

      line-height      : 21px;

    background-image:url(../i/bg_blocconnectiontitre.gif);

}



.titregris {

    color : #444;

    font-weight:bold;

font-size:12px;

}



.divider {



  margin-left      : auto;

  margin-right     : auto;

  margin-top       : 10px;

  margin-bottom       : 13px;

}



.inputbox {

  font-family      : Verdana, "lucida sans unicode","Trebuchet MS", Helvetica, Sans-Serif;

  font-size        : 10px;

  color            : #000;

  background-color : #fff;

  border           : 1px solid #000;

}



.inputbox_souv {

  font-family      : Verdana, "lucida sans unicode","Trebuchet MS", Helvetica, Sans-Serif;

  font-size        : 12px;

  font-style       : bold;

  color            : #000;

  background-color : #fff;

  background-position :center;

  border           : 1px solid #ccc;

}



#login_accueil {

  margin-top       : 2px;

}



.button {

  margin-left      : auto;

  margin-right     : auto;

  display          : block;

  font-family      : Verdana, Arial, Helvetica, sans-serif;

  text-align       : center;

  font-style       : normal;

  font-size        : 10px;

  font-weight      : bold;

  FILTER           : progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#8AABC2,endColorStr=#ffffff);

  color            : #222;

  border           : 1px solid #afbac5;

  background-color : #8AABC2;

  background-image : url(../i/seconnecter.gif);

  background-position : center;

}



a.gen:link, a.gen:active,a.gen:visited {

      color            : #444;

      text-decoration  : none;

}

a.gen:hover {

      color           : #fb9500;

      text-decoration : underline;

}



/* ZE BOUTONS */

.button_suivant {



  float          : right;

  margin-right   : 10px;

}



/* Boutons precedents */

.button_precedent {

  float          : left;

  margin-left   : 10px;

}





.button_valider {

  float          : right;

  margin-right   : 10px;

}

.button_modifier {

  margin-bottom   : 0px;

  margin-top   : 0px;

}



.bordure_bleue {

   border: 2px solid #5ccde5;

   padding: 10px;

   font-style: italic;

}



.bottomalign {

   position: relative;

   float: left;

}
0
Richard Coffre
Asked:
Richard Coffre
  • 2
1 Solution
 
bochgochCommented:
Wow, bit too much code for me to read through, however, this link should sort you out:

http://www.doxdesk.com/software/js/fixed.html
0
 
bochgochCommented:
Sorry, that's just half the story, apply a style to your DIV containing the footer, such as:

.footer {position: fixed; bottom: 0;}

Then just reference fixed.js, in the <HEAD> of your page (after downloading it from the link above):

<script type="text/javascript" src="fixed.js">

And hey presto, the footer stays fixed to the bottom!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now