[CSS] Probleme mise en page.

arbisis -  
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

Je suis une buse en CSS et je suis entreint de faire un site en php et j'esseye de mettre en page avec CSS mais j'ai un probleme.
Voila, j'ai un menu horizontal avec sous menu et en dessous j'ai fait deux blocks en CSS (taille, couleur de fond, etc..) un block central
de 600px et a cote un block (info divers) de 200px, et lorsque un sous menu s'ouvre il baisse l'un des deux blocks.
Deja est il possible de faire en sorte que les sous menus passent par dessus les 2 DIV?

Ensuite, lorsque j'ecris dans un des deux DIV il baisse l'autre.
Je suis sur (enfin j'espere) qu'il doit y avoir une solution toute bete, mais je ne vois pas...

voila mon codes CSS:
<code type="css">
#menucentre
{
width:799px;
height:700px;
background-color:#FFFFFF;
margin: 0px;
}


#menudroite
{
width:200px;
height:679px;
background-color:#DFE0C5;
margin-left: 799px;
border: 1px solid black;
}



/* /////////////////////////////////////////////////

MENU HORIZONTAL DEROULANT

//////////////////////////////////////////////////*/

#menuDeroulant
{
text-align:center;
background: #6A6458;
width: 1000px;
height: 21px;
list-style-type: none;
margin: 0px;
padding: 0;
border: 0;
}
#menuDeroulant li
{
float: left;
width: 142.8px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #000000;
background: #9FE855;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #7B3B10; }
#menuDeroulant li a:active { background-color: #7B3B10; }

#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: #000000;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("../mages/fondT.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #9FE855;
}

#menuDeroulant li:hover > .sousMenu { display: block; }
</code>
Tres bon menu en CSS sans js que j'ai trouve sur <lien url="http://marcarea.com/tuto/menu01.php">MENU</lien>,
et voici le HTML:
<code type="html">
<ul id="menuDeroulant">
<li>
<a href="./accueille.php">Accueil</a>
</li>
<li>
<a href="#">Achat</a>
<ul class="sousMenu">
<li><a href="./truc.php">Machin.</a></li>
...
</ul>
<div id="menucentre">

<div id="menudroite">
</div>

</div>

</code>

De plus avec IE, le block "menudroite" passe par dessus le menu alors que l'autre non o_O !!!!
Merci de m'eclairer,
Arbisis.

Desole pour les accents mais j'ai un qwerty :D .
A voir également:

1 réponse

Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
salut,

enlève le {padding} latérale.
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #000000;
background: #9FE855;
margin: 0;
padding: 4px 0;
border-right: 1px solid #fff;
text-decoration: none;
} 

et évite les valeurs décimales !!!…
#menuDeroulant li
{
float: left;
width: 142.8px;
margin: 0;
padding: 0;
border: 0;
} 

il peut y en avoir d'autres…

bon courage !
0