28173 sujets

CSS et mise en forme, CSS3

Problème de hauteur d'un div pour un menu

Bonsoir tout le monde,

Alors voici mon problème :

Afin de respecter un peu les normes du web, j'ai décidé de refaire mon site avec les blocs div. Donc j'ai commencé par le menu avec l'aide des gabarit proposés sur le site.
Les pages n'ont pas une taille fixe, et le contenu est souvent bien plus long que le menu.

Le problème est que je n'arrive pas à prolonger le menu pour qu'il aille jusqu'en bas à chaque fois.
J'ai essayé plein de méthode et les height:100% mais rien n'y fait

Si vous voulez voir un petit aperçu, voici l'image : Lien ici

J'ai mis le code aussi pour ceux qui sont intéressé !
Si je pouvais avoir quelque petit tuyaux pour m'aider à prolonger ce menu sa serait très sympa !!!

D'avance un très grand merci Smiley lol 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>

<style type="text/css">
body {
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size: 0.7em;
   margin: 20px;
   padding: 0;
   background-color: #FEF7DC;
}


#conteneur {
   position: absolute;
   width: 770px;
   left: 50%;
   margin-left: -385px;
}

#centre {
   background-color:#FFBDFF;
   margin-left: 171px;
   border-left: 1px solid #000000;
   border-right: 1px solid #000000;
   padding: 5px;
}

#gauche {
   position: absolute;
   left: 0;
   width: 170px;
   height: 100%;
   background: #FFFFFF;
   border-left : 1px solid #000000;
   border-bottom : 1px solid #000000;
}

#header {
   background-image: url('http://philharcom.websanslimit.net/Design/menu-1.png');
   width: 770px;
   height: 68px;
}

#sousheader {
   background-image: url('http://philharcom.websanslimit.net/Design/menu-2.png');
   width: 770px;
   height: 24px;
   border-top: 1px solid #000000;
   text-align: center;
}

#pied {
   height: 21px;
   background-image: url('http://philharcom.websanslimit.net/Design/menu-7.png');
}



A.menu:link {
   COLOR: #CE4116; TEXT-DECORATION: none
}
A.menu:visited {
   COLOR: #CE4116; TEXT-DECORATION: none
}
A.menu:hover {
   COLOR: #ff6600; TEXT-DECORATION: none
}
</style>
</head>

<body>

<div id="conteneur">

   <div id="header"></div>
   <div id="sousheader">
      <table><tr>
      <td><a class="menu" href="#">
      <img src="../Design/bt-home.gif" align="absmiddle" border="0" /> <b>Lien 1 - Lien 2</b></a></td>
      </tr></table>
   </div>

   <div id="gauche">
      <p>menu</p>
      <p>largeur fixe : 170px</p>
        
      <ul class="menugauche">
      <li><a href="">Menu 1</a></li>
      <li><a href="">Menu 2</a></li>
      <li><a href="">Menu 3</a></li>
      <li><a href="">Menu 4</a></li>
      </ul>
   </div>
     
   <div id="centre">
     partie centrale qui &quot;pousse&quot; les colonnes vers le bas.<br />
       partie avec du contenu occupant le reste de la largeur<br />

       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
   </div>
     
   <div id="pied"></div>
</div>

</body>
</html>
Sujet clos
Aller à