Bonsoir à tous,
Je suis à la recherche d'une éventuelle solution CSS pour régler un petit problème d'accordement de taille de <div>. Je m'explique :
Première problème, dans ma page j'ai un menu flottant à gauche et un bloc de contenu calé à droite ce menu. Ces deux contenant ont des contenus variables, et donc des hauteurs variables. tantôt c'est le menu le plus haut, tantôt c'est le l'autre bloc. Or, j'aimerai pour des questions esthétique, que ces deux blocs soit toujours de même hauteur.En cherchant des solutions à droite à gauche, j'ai déjà trouvé le moyen, avec la technique du "spacer" flottant, d'ajuster la taille du bloc contenu au menu quand ce dernier est le plus long. Cependant ça ne marche quand c'est le menu le plus court (ce qui semble logique).
Deuxième problème, mon "menu" et mon "contenu" sont constitué chacun de trois div conteneur pour former un motif avec des images de fond. Un le haut de l'image, un pour le bas, et celui du milieu qui contient l'image répétée x fois. Comme je le disais grâce au "spacer" j'arrive ajuster la taille du bloc de contenu, le problème c'est que évidemment l'image de fond constituée des trois div ne suit pas et reste donc à la taille du contenu réel.
Je viens donc à vous pour savoir s'il existe une solution CSS à mon problème (et si oui laquelle?), ou si je dois passer par un script pour récupérer la taille d'un bloc pour le réinjecter dans l'autre?
Merci d'avance pour vos réponses
Voici le code utilisé :
Le HTML
/*Mon menu de gauche*/
<div id="left_block">
<div id="menu_top"></div>
<div id="titre_menu">
<p class='liste_menu'>
Rubriques du menu
</p>
</div>
<div id="menu_down"></div>
</div>
/*Mon bloc de contenu*/
<div id="general_block">
<div id="top_block"></div>
<div id="center_block">
<p class="content">
Contenu
</p>
</div>
<div id="down_block"></div>
<div id="content_spacer"></div>
</div> |
Et le CSS
/* -----le menu----*/
div#left_block
{
background-color : #6d6d6d;
width : 150px;
float : left;
}
div#menu_top
{
width : 150px;
height : 28px;
float : left;
background-image : url("../Images/menu_top0.png" );
}
div#menu_down
{
width : 150px;
height : 27px;
float : left;
background-image : url("../Images/menu_down0.png" );
}
div#titre_menu
{
width : 150px;
float : left;
background-image : url("../Images/menu_layer.png" );
background-repeat : repeat;
}
/*-------le contenu------*/
div#general_block
{
background-color : #939393;
margin-top : 0 px;
margin-left : 150px;
width : 810px;
height : 100%;
}
div#center_block
{
background-color : #939393;
margin-top : 0 px;
width : 810px;
height : 100%;
background-image : url("../Images/content_layer.png" );
}
div#top_block
{
background-color : #939393;
margin-top : 0 px;
width : 810px;
height : 31px;
background-image : url("../Images/content_top.png" );
}
div#down_block
{
background-color : #939393;
margin-top : 0 px;
width : 810px;
height : 31px;
bottom : 0px;
background-image : url("../Images/content_down.png" );
}
div#content_spacer
{
clear : both;
}
|
Message édité par Den Kant le 05-06-2010 à 22:24:38
![[:den kant:1]](https://forum-images.hardware.fr/images/perso/1/den kant.gif "[:den kant:1]")