Blocs de même hauteur

Hello,

je suis en train de coder coder mon design dont voici un apercu (en bas apercu):


Le bloc "A la une" est extensible le problème est quand j'enleve ou je mets du contenu supplémentaire dans ce bloc les colones de droite et gauche ne s'adpatent pas à la hauteur du centre (pour cause il ont une hateur fixe)

Apercu du bug (en bas apercu)

.droite {
margin-left: 778px;
margin-top: 5px;
width: 181px;
height:1344px;
background-color: #333333 ;
color: white;

}


.gauche {
margin-top: -1344px ;
width: 181px;
height:1344px ;
background-color: #333333;
}

La configuration de mon design ne me permet pas de tromper avec une meme couleur de fond comme le propose le tuto alsacreation, comment pallier à ce problème?
Modifié par arnaudrou (24 Jul 2006 - 17:16)

Il faudrait déjà que tu te poses la question suivante :
Comment doit s'adapter mon design dans le cas où le bloc central serait plus haut que les colonnes ?

Si tu n'as pas de design alternatif pour ce cas de figure, tu pourrais te contenter de faire disparaître les deux morceaux de fond blanc à rayure qui traînent.

Pour cela, ça va dépendre du code de ta page. Mais à priori il s'agit de ne mettre l'image du fond blanc à rayures qu'en fond du bloc central, et pas pour tout le conteneur (en supposant qu'il y ait un bloc conteneur pour les trois colonnes).

salut merci d'avoir pris le temps de répondre,
effectivement j'ai un bloc conteneur qui englobe les 3 trois colones, d'ailleurs c'est celui qui a en fond le blanc à rayures. Donc si je te comprends il faudrait que crée un autre bloc conteneur avec juste le centre et en fond le blanc à rayures, et dans l'autre conteneur (avec les 3 colones) je mets en background la même couleur que le menu ??

@+

arnaudrou a écrit :
Donc si je te comprends il faudrait que crée un autre bloc conteneur avec juste le centre et en fond le blanc à rayures, et dans l'autre conteneur (avec les 3 colones) je mets en background la même couleur que le menu ??

Voilà c'est ça.
Suivant ce que tu as déjà, tu ne seras peut-être pas obligé de rajouter un conteneur autour du bloc central. Là, ça va dépendre de tes contraintes graphiques.

Voila j'ai mis deux conteneur mais ca marche toujours pas...

en gros sur ma page ca fait:

<div class="global">
<div class="header"></div>
<div class="gauche"></div>
<div class="droite"></div>
</div>

<div class="global2">
<div class="centre"></div>
</div>

le css des deux globals:

#global2 {
margin-top: -1344px ;
margin-left: auto;
text-align: left;
overflow: hidden;
width: 575px;
background-color: #333333;
position: absolute;
}

#global {
margin-top: 0px;
margin-bottom: 10px;
position: relative; /* on positionne le conteneur */
margin-left: auto;
margin-right: auto;
text-align: left;
width: 959px;
overflow: hidden;
background-image: url('images/bg.gif');
}

voila ce que ca donne (apercu en bas) le centre n'est pas centré...

@+
Modifié par arnaudrou (24 Jul 2006 - 17:16)

En testant jai réussi finalement en fesant:
avec deux conteneur!

#global {
margin-top: 5px;
margin-bottom: 10px;
position: relative; /* on positionne le conteneur */
margin-left: auto;
margin-right: auto;
text-align: left;
width: 959px;
overflow: hidden;

}

#global2 {
margin-top: -1348px;
margin-bottom: 10px;
position: relative; /* on positionne le conteneur */
margin-right: auto;
margin-left: 181px;
text-align: left;
width: 597px;
overflow: hidden;
background-image: url('images/bg.gif');
}

Merci @+