?
Solved

Footer always at the bottom of the page

Posted on 2005-02-28
2
Medium Priority
?
500 Views
Last Modified: 2008-02-01
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
Comment
Question by:Richard Coffre
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
2 Comments
 
LVL 13

Expert Comment

by:bochgoch
ID: 13418579
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
 
LVL 13

Accepted Solution

by:
bochgoch earned 2000 total points
ID: 13418634
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month13 days, 10 hours left to enroll

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question