Bonjour,
J'ai un problème en CSS. Je suis débutante, et j'essaie de modifier ma CSS sur un site de blog gratuit.
Je souhaite faire un menu en haut, déroulant, vers le haut et centré, quelque soit la configuration de la personne qui regarde et que ce soit sous Internet Explorer, Firefox, Opera (je ne peux pas vérifier pour ce dernier...)
Je rencontre deux problèmes en essayant de faire ça.
Premièrement, je n'arrive pas à faire de menu déroulant vers le haut, j'y arrive seulement vers le bas (je rappelle que je peux seulement utiliser des balises html et du css), ayant pris le code sur un site, je ne comprends pas tout et je ne sais pas vraiment ce que je dois ajouter / modifier.
Deuxièmement, je n'arrive pas à centrer le bloc menu pour Firefox et Internet explorer. Quand il est centré sur l'un, l'autre ne l'est pas et vice-versa. En l'occurence, dans le code que je vous donne juste après, il est centré sur Firefox seulement.
Voici le code html du menu :
</div></div></div></div></div>
<div id="entete">
<div align="center">
<div id="global">
<div id="menu-haut">
<div id="container"><div id="contabs">
<div class="boutonFF">Culture et tradition<br />
<a class="SousMenu" href="http....">Japon</a>
<a class="SousMenu" href="http....">Chine</a>
<a class="SousMenu" href="http....">Corée</a>
</div>
<div class="boutonFF">Musique<br />
<a class="SousMenu" href="http....">Groupes japonais</a>
<a class="SousMenu" href="hhttp....">Groupes chinois</a>
<a class="SousMenu" href="http....">Groupes coréens</a>
</div>
<div class="boutonFF">Drama<br />
<a class="SousMenu" href="http....">Drama japonais</a>
<a class="SousMenu" href="http....">Drama coréen</a>
<a class="SousMenu" href="http....">Drama chinois</a>
</div>
<div class="boutonFF">Mangas et animés<br />
<a class="SousMenu" href="http....">Mangas</a>
<a class="SousMenu" href="http....">Animés</a>
</div>
<div class="boutonFF">Sports<br />
<a class="SousMenu" href="http....">Japonais</a>
<a class="SousMenu" href="http....">Coréen</a>
<a class="SousMenu" href="http....">Chinois</a>
</div>
</div><br>
</div></div>
</div>
</div>
</div>
</div>
<div id="main"><div id="nav1"><div id="nav1-content"><div><div>
Et voici celui de la Css concernant le menu:
#global {
width:100%;
position:relative;
left: 130px;
}
#menu-haut {
padding-top : 430px;
position: relative
margin-right: auto;
margin-left:auto;
width: auto;
text-align : center;
background : #transparent;
}
#menu-haut a {
margin : 0 10px;
padding : 5px;
text-decoration : none;
background : transparent;
}
#contabs {
position : absolute;
top : -20px !important ;
top : -20px;
z-index : 500;
width: 100%;
}
#container {
position : relative !important ;
}
#couche {
position : absolute !important ;
z-index : 1000 !important ;
width: 100%;
}
.boutonFF {
color : #000000;
width : auto;
height : 35px;
display : inline !important ;
display : none;
background : transparent url(http://img57.imageshack.us/img57/6731/fondtranspmm8.png) repeat fixed 0 0;
margin-right : 10px;
text-align : center;
float : left;
text-decoration : none;
font-family : impact;
font-size : 15px;
line-height : 35px;
overflow : hidden;
margin-top : 10px;
border : 3px double #ffffff;
}
.boutonFF:hover {
height : auto;
cursor : pointer;
color : #714E99;
background : transparent url(http://img57.imageshack.us/img57/6731/fondtranspmm8.png) repeat fixed 0 0;
border : 3px double #ffffff;
}
a.SousMenu, a.SousMenu:link, a.SousMenu:visited, a.SousMenu:active {
display : block;
width : auto !important ;
width : auto;
height : 16px;
line-height : 9px;
text-decoration : none;
background : #ffffff;
color : #ffffff;
font-family : verdana;
font-size : 11px;
text-align : center;
padding-left : 1px;
border-top : 1px solid #ffffff;
}
a.SousMenu:hover {
background : #ffffff;
color : #714E99;
font-weight: bold;
border-top : 1px solid #714E99;
}
Merci d'avance :)
S'il y a des trucs qui servent à rien, vous pouvez me le dire, j'avoue que je ne comprends pas tout tout ce qu'il y a. Je modifie en testant le résultat...
Merci beaucoup !Configuration: Windows Vista
Firefox 3.0.1

