[CSS] Probleme mise en page.

Fermé
arbisis - 25 mai 2007 à 00:33
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 25 mai 2007 à 13:54
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 mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
25 mai 2007 à 13:54
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