Durant le développement d'un nouveau site je rencontre un problème au niveau du gabarit CSS.
La structure est la suivante :
Page -> conteneur -> trois autre conteneur (1, 2 et 3)
conteneur 1 : menu de gauche
conteneur 2 : page
conteneur 3 : menu de droite
Le problème vient du fait que mes conteneurs sont positionné en absolue mais c'est le seul moyen que j'ai trouvé pour que le redimensionnement du site se fasse automatiquement selon la résolution (d'où la non utilisation des floats).
Le problème en image :
Screen du menu gauche bas, qui passe dessus le conteneur étant donné du z-index différents. Mais même avec le même z-index le problème persiste.
La page html :
Code : Tout sélectionner
<div id="conteneur">
<div id="menuGauche">
<? include("includes/menu_gauche.php"); ?>
</div>
<div id="page">
<? include("includes/pseudos_frames.php"); ?>
</div>
<div id="menuDroit">
<? include("includes/menu_droit.php"); ?>
</div>
</div>Code : Tout sélectionner
body {
background-color: #E5E5E5;
color: #000000;
font-family: Tahoma, Verdana, Arial;
font-size: 11px;
margin: 10px;;
padding: 0;
}
#conteneur {
background-color: #FFFFFF;
border: 1px solid #AEBDC4;
height: 100%;
padding: 15px;
position: relative;
}
#menuDroit {
position:absolute;
right: 15px;
top: 170px;
width: 170px;
z-index: 1;
}
#menuGauche {
left: 15px;
position:absolute;
top: 170px;
width: 170px;
z-index: 2;
}
#page {
height: 100%;
margin: 5px 195px 0px 195px;
position: relative;
width: auto;
z-index: 3;
} 
Merci d'avance
Cordialement,
Laurent
