18073 sujets

Questions générales et questions de débutants

Pb blocs de même hauteur

J'ai lule tuto : http://css.alsacreations.com/Tutoriels-et-articles-divers/Des-blocs-de-meme-hauteur-sans-tableaux

très interressant.
mais un problème se pose toujours pour mon site.
quand le contenu est plus long que le menu aucun soucis. mais quand le menu est plus long que le contenu, comment faire ?

en effet les page sont dynamiques. parfois c'est le menu qui est plus long, parfois le contenu.
comment faire pour que la longueur s'adapte systématiquement ?

j'espère que je me suis bien expliqué..
pour ceux qui aurait un doute, prenez le code du tuto et mettez un menu très long (quelques dizaines de <li> suffisent)
http://css.alsacreations.com/xmedia/exemples/cellules/cellules3.htm

avez vous une solution?
Modifié par twisted (31 Dec 2005 - 19:06)
J'ai exactement ce problème, j'ai passé la journée, à bidouiller, mais rien n'y fait... quand le contenu est plus grand c'est bon, mais quand c'est le menu qui est le plus grand, la taille du contenu ne suit pas...
Est ce que quelqu'un pourrait m'aider? Smiley bawling

Voici mon code xhtml :


<div id="conteneur">
   <div id="menu">
     <ul>
       <li>lien 1</li>
       <li>lien 2</li>
       <li>lien 3</li>
       <li>lien 4</li>
     </ul>
   </div>
   <div id="corps">
     <div id="contenu">
       <h1>Titre rubrique</h1>
     </div>
   </div>
</div>


et voici mon css :


/* Le conteneur */
#conteneur
{
   position: absolute;
   width:760px;
   background-color:#427994;
}

/* Le menu */

#menu
{
   float:left;
   left:0;
   width: 186px;
   position: absolute;
   background-color: #296584;
}

/* Le corps */

#corps
{
   margin-left:186px;
   background-color: #427994;
   width:574px; 
   margin-top: 0px;
   margin-bottom: 10px;
   padding-top:1em;
   padding-bottom:1em;
}

#contenu
{
    padding:20px;
    text-align:justify;
    background-color: #427994;
	
}


Merci d'avance pour votre aide ou vos conseils Smiley confused
avec cet article de Openweb, il y a la solution suivante :

css
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#conteneur {
position: absolute;
margin-top: 20px;
width: 100%;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
hr {
  clear: both;
  visibility: hidden;
}
#menu {
float: left;/*enlevé position: absolute; rajouté float: left*/
left:0;
width: 150px;
}
#droite {
position: absolute;
right:0;
width: 150px;
}
h2 {
font-size: 1.2em;
font-weight: normal;
margin-bottom: 20px;
}
p {margin:0;}
#pied {
clear: both;/*rajouté*/
background-color: #99CCCC;
}

html
<h1>Les "cellules" étirables en CSS</h1>
<h2>La cellule centrale  s'allonge selon le contenu, l'autre s'adapte et s'étire
  visuellement</h2>

<div id="conteneur">
	  <div id="menu"><p>menu</p>

	  <p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p>	  <p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p><p>largeur fixe : 150px</p>
	  </div>
	  
	  <div id="droite"><p>droite</p>
	  <p>largeur fixe : 150px</p>
	  </div>
  	<div id="centre">
  	  <p>partie centrale qui "pousse" les colones vers le bas. </p>

  	  <p>partie avec du contenu occupant le reste de la largeur- partie avec du
  	    contenu occupant le reste de la largeur - partie avec du contenu occupant
  	    le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur - partie avec
      du contenu occupant le reste de la largeur - partie avec du contenu occupant
      le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur - partie avec
      du contenu occupant le reste de la largeur - partie avec du contenu occupant
      le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur - partie avec
      du contenu occupant le reste de la largeur - partie avec du contenu occupant
      le reste de la largeur</p>
	  <hr />
  </div>

	  <div id="pied">pied de page</div>
</div>

ça marche avec Firefox et Opéra, mais pas IE et netscape

mais bon, j'ai peut-être oublié quelquechose Smiley ohwell
Bonjour.

Puisque le menu est positionné en float, on peut utiliser la propriété clear pour obliger le <div> de contenu à se prolonger au moins jusqu'en dessous du menu. Il suffit de rajouter à la fin du contenu un élément, par exemple un séparateur :
<div id="contenu">
   Blablabla
   blablabla
   <hr class="clear" />
</div>

et dans les styles :
hr.clear {
    clear: both; /* ou right, ou left selon la position du menu et ce qui vous arrange le mieux */
    }


Ca marche aussi avec un <div> ou un <p> à la place du <hr /> ...
Sujet clos
Aller à