Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2873 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1998554
Den Kant
Posté le 02-06-2010 à 22:15:30  profilanswer
 

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
mood
Publicité
Posté le 02-06-2010 à 22:15:30  profilanswer
 

n°1999234
Den Kant
Posté le 05-06-2010 à 00:54:48  profilanswer
 

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]  


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[RESOLU] Ouvrir une vue[VB - Excel] Insertion ligne qui n'incrémente pas formules [résolu]
[resolu] compilation release Visual Studio 2008[Résolu] Pb de résolution de type dans un template
[Résolu] Arrière-plan+Boites -> effet différent suivant navigateur[RESOLU] question con mais utile image en html
[resolu] simuler un resultset vide[RESOLU][MySQL] requete toute simple
[Résolu] Bug div Firefox[resolu][PHP] parcourir un tableau d'objet
Plus de sujets relatifs à : [résolu]Accorder les hauteurs de deux <div>


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR