Problème html/css

Fermé
Hackman61 - Modifié par Hackman61 le 12/04/2010 à 19:28
LelLex Messages postés 1628 Date d'inscription mercredi 18 février 2009 Statut Membre Dernière intervention 5 septembre 2012 - 12 avril 2010 à 21:59
Bonjour, je souhaite mettre un footer sur mon site, mais il se trouve toujours en haut à gauche de la page...

le CSS : 
/************************************************************ 
     PARAMETRES GENERAUX 
************************************************************/ 

* {margin: 0px; padding:0px; /* Supprimer les espaces par défaut */} 
/* * sert à intervenir sur la totalité des balises */ 

html, body { 
  font-family: ARIAL, GENEVA, VERDANA; 
  width: 100%; /* Largeur */ 
  height: 100%; /* Hauteur */ 
  background: #b9b9b9; /*Couleur de fond */ 
  } 
   
   
/************************************************************ 
     REGLAGES DU CONTENEUR 
************************************************************/ 

div#conteneur { 
  width: 770px; 
  height: 100%; 
  background: #FFFFFF; 
  border-right: 3px solid #595959; 
  border-left: 3px solid #595959; 
 /*  position: relative; 
  margin: 0px auto 0px auto;*/ 
  position: absolute; 
  left: 50%; 
  margin: 0px 0px 0px -385px; 
  min-height: 100%; /* Tous les navigateurs GECKO */ 

} 

html>body div#conteneur { height: auto;} /* Pour les éléments dépendants des balises HTML et BODY, définit une hauteur auto */ 

     
     
div#header { 
  width: 770px; 
  height: 130px; 
/*  display : block;*/ 
  /*background: url('images/ban2.gif') no-repeat top center; --> Remplacé dans le index.html*/ 
   
} 

div#footer { 
  clear: both; 
  width: 770px; 
  height: 130px; 
   
   
   
} 

/************************************************************ 
      MENU 
************************************************************/ 

ul#menu { 
  width: 770px; 
  height: 35px; 
  background: #000000; 
  /*border-top: 2px solid #000000; 
  border-bottom: 2px solid #000000; */ 
        -moz-border-radius: 10px;    /* Bords du menu arrondis */ 
        -webkit-border-radius: 10px;  /* Bords du menu arrondis */ 
        border-radius: 10px;    /* Bords du menu arrondis */ 

} 
ul#menu li { 
  float: left; 
  width: 154px; 
  height: 35px; 
  line-height: 35px; 
  list-style-type: none; 
  text-align: center; 
  font-size: 16px; 
  font-weight: bold; 

} 
ul#menu li a { 
  text-decoration: none; 
  color: #FFFFFF; 
  background: #000000; 
  display: block; 
} 
ul#menu li a:hover { 
  color: #000000; 
  background: #FFFFFF;  
        -moz-border-radius: 10px; 
        -webkit-border-radius: 10px; 
        border-radius: 10px; 
} 


/************************************************************ 
      CONTENU 
************************************************************/ 

div#contenu { 
  width: 750px; 
  height: auto; 
  margin: 20px auto 0px auto; 
} 
div#contenu h1 { 
  font-size: 24px; 
  color: #BB0000; 
  margin-bottom: 12px; 
} 
div#contenu p { 
  font-size: 12px; 
  text-align: justify; 
} 
div#contenu p acronym { 
  cursor: help; 
  color: #33CC33; 
} 
div#contenu p a { 
  color: #BB0000; 
  text-decoration: underline overline; 

} 
div#contenu p a:hover { 
  color: #898989; 
  text-decoration: underline overline; 
}

Et le html : 

 <html> 
<head> 
 <title> Mon site Internet </head> 
 <link type="text/css" rel="stylesheet" href="style.css"/> 
  
</head>  
 <body> 
  <div id="conteneur"> 
   <div id="header"> 
   <img src="images/ban2.gif" width="770" height="130"  /> 
   </div>  
    
  <!-- Construction du menu --> 
  <ul id="menu"> 
   <li><a href="#" title="Accueil du site">Accueil</a></li> 
   <li><a href="#" title="News">News</a></li> 
   <li><a href="#" title="Texte">Texte</a></li> 
   <li><a href="#" title="Contact">Contact</a></li> 
   <li><a href="#" title="FAQ">F.A.Q</a></li> 
  </ul> 
   
   
   <div id="contenu"> 
    <h1>Titre de niveau 1</h1> <!--balise de titre --> 
    <p><acronym alt="test acronyme">Lorem ipsum</acronym> <a href="#" title="DOLOR SIT">dolor sit amet</a>, consectetur adipiscing elit. Duis faucibus massa massa. Curabitur ipsum nibh, viverra eu sagittis et, vehicula et eros. In rhoncus dui eu diam rhoncus luctus. Aliquam egestas est in enim lacinia vulputate. Suspendisse dui lectus, molestie ut scelerisque id, semper in mauris. Curabitur ut molestie quam. Integer convallis leo in nunc rutrum condimentum. Morbi rhoncus elit diam, sit amet tincidunt nibh. Praesent placerat erat id nisl vehicula sit amet fringilla lacus auctor. Cras quis enim vitae risus blandit tincidunt vel nec ligula. Vestibulum semper pellentesque nisl, nec tincidunt odio tristique quis. Mauris ac lorem justo. Morbi sagittis consectetur sapien, non adipiscing lacus scelerisque at. Nulla lectus ipsum, porta sit amet tempor at, tempor nec lectus. p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus massa massa. Curabitur ipsum nibh, viverra eu sagittis et, vehicula et eros. In rhoncus dui eu diam rhoncus luctus. Aliquam egestas est in enim lacinia vulputate. </p> <!--balise de texte --> 
     
      


   </div> 
  </div> 

  <div id="footer"> 
   <p> 
    <a href="http://validator.w3.org/check?uri=referer"> 
    <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict"  
    height="31" width="88" /> </a> 
   </p> 

  </div> 
 </body> 
</html>

J'ai gaffé ou??

Merci d'avances!
A voir également:

4 réponses

Réponse 1 / 4
a70m Messages postés 2763 Date d'inscription jeudi 21 mai 2009 Statut Contributeur Dernière intervention 2 février 2014 217
12 avril 2010 à 20:31
Salut,

Dans ton CSS, quand tu définis une div, il ne faut pas que tu mettes
div#conteneur


Tu mets juste :
#conteneur

Normalement, ça devrait régler ton problème parce que le reste me parait bon.

Cordialement
0
Réponse 2 / 4
LelLex Messages postés 1628 Date d'inscription mercredi 18 février 2009 Statut Membre Dernière intervention 5 septembre 2012 112
12 avril 2010 à 21:16
Tu peux enlever clear:both; dans footer il ne sert à rien, il me semble.
C'est quoi ceci : html>body div#conteneur ?
0
Réponse 3 / 4
Hackman61
12 avril 2010 à 21:55
html>body div#conteneur { height: auto;}

Pour les éléments dépendants des balises HTML et BODY, définit une hauteur auto, en gros sans ça, j'ai pas de défilement quand j'arrive en bas de la page
0
Réponse 4 / 4
LelLex Messages postés 1628 Date d'inscription mercredi 18 février 2009 Statut Membre Dernière intervention 5 septembre 2012 112
12 avril 2010 à 21:59
J'ai jamais vu ça. Je l'enlèverais ..
Ca donne quoi le problème avec la modification du .css ?
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Balise </br>
erf -
erf -

3 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses
Espace HTML
guilhem_mdg -
hodor -

10 réponses