[résolu]Accorder les hauteurs de deux <div>

Marsh Posté le 02-06-2010 à 22:15:30

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

Reply

Marsh Posté le 02-06-2010 à 22:15:30

Reply

Marsh Posté le 05-06-2010 à 00:54:48

Bon, je pensais que je ne pouvais pas utiliser la technique des colonnes factices à cause de mes motifs de fond (assimilables à des cadres) composés de trois images.

En fait j'ai chercher un bon moment et finalement j'ai trouvé la solution, il fallait juste que je trouve un moyen de gérer ces satanées images de fond.
J'ai donc supprimé le bas des images dans chaque bloc (le bord inférieur de chaque cadre), avec j'ai concocté un seul bas d'image en les faisant fusionner, et je l'ai mis en fond d'un div de taille fixe positionné après mes deux blocs (donc en dessous).
J'ai pris les éléments répétitifs de chaque images et de la même façon je les ai fusionné pour n'en faire qu'un seul, que j'ai mis en fond répété dans un div contenant mes deux blocs. Et voilà.

Si ça intéresse quelqu'un, je posterai la solution détaillée.

[:den kant:1]

Reply

[résolu]Accorder les hauteurs de deux <div>

Sujets relatifs:

Leave a Replay