Menu

Menu déroulant / CSS sous Firefox / IE [Fermé]

- - Dernière réponse : bormat
Messages postés
10
Date d'inscription
lundi 1 juin 2009
Dernière intervention
25 août 2012
- 23 juin 2009 à 22:45
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 !
Afficher la suite 

13 réponses

Meilleure réponse
Messages postés
10
Date d'inscription
lundi 1 juin 2009
Dernière intervention
25 août 2012
4
4
Merci
c'est simple tu as un menu déroulant 100 % css http://bormat2.free.fr/

Dire « Merci » 4

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 47165 internautes nous ont dit merci ce mois-ci

Messages postés
146
Date d'inscription
jeudi 20 mars 2008
Dernière intervention
15 février 2011
17
0
Merci
Bonjour, je suis pas tres doué non plus, mais si tu prenais ca et que tu l'adaptais, ca irai pas?:

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
<!--
/* CSS issu des tutoriels http://css.alsacreations.com */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
bottom: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
position: relative;
margin: 0 2px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;

}
#menu dd {
background-color: #ccc;
position: absolute;
bottom:1.5em;
width:100%;
}
#menu li {
text-align: center;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}

a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>

<body>

<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>

<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>

</dd>
</dl>


<dl>
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>

<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>

<dd id="smenu3">

<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>

<li><a href="#">Sous-Menu 3.5</a></li>

</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>

<li><a href="#">Sous-Menu 4.1</a></li>

<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>


</div>

</body>
</html>
0
Merci
Merci de ta réponse :)

Le problème c'est que je peux pas mettre de javascript... Seulement du html et modifier la css ! Je vais quand même tester par rapport à la css si y'a des trucs qui peuvent aider à résoudre le truc, surtout au niveau de la position du menu...

Je crois l'avoir lu ce tuto, mais le menu se déroule vers le bas non ? Et j'ai pas trouvé d'explication sur ce qu'il fallait changer pour inverser... :S
0
Merci
J'ai tenté de modifier mais j'ai pas réussi à obtenir le résultat que je voulais.

Quelqu'un pourrait pas m'expliquer quelle variable modifier dans la CSS pour que le menu se déroule en haut ? N'ayant mis aucun code javascript pour mon menu, c'est bien la CSS qu'il faut modifier, non ?

Et euh... Comment faire pour que mon menu soit également centré dans IE et pas seulement Mozilla Firefox ?

Merci :)
Messages postés
51
Date d'inscription
mercredi 13 août 2008
Dernière intervention
9 octobre 2009
5
0
Merci
Ce n'est pas courant de dérouler le menu vers le haut ! Je ne suis pas sûre que ça marche, mais as-tu essayé de mettre les sous-menus avant le bouton du menu correspondant ? Evidemment, toute la mise en page sera à refaire, mais ton sous-menu se déroulera peut-être au dessus du menu.
0
Merci
Je viens de tester là, mais ça ne donne pas du tout un bon résultat.

En fait, j'ai déjà testé plusieurs trucs, et j'ai remarqué qu'en modifiant cette partie du CSS :

#contabs {
position : absolute;
top : -20px !important ;
top : -20px;
z-index : 500;
width: 100%;
}

J'obtenais un truc différent. Je m'explique... En mettant 20 à la place de -20 à top, j'arrive à faire que le menu aille vers le haut quand il se déroule... Mais entièrement...

Donc pour montrer, voilà ce qu'il se passe avec les valeurs -20:


normal=passage de la souris
Drama = Drama
Japonais
Coréen
Chinois


Avec les valeurs 20 :


Drama
Japonais
Coréen
Drama = Chinois



Donc c'est pas ce que je recherche vu que je veux que seulement les sous menus bougent... Là tout le menu bouge en entier vers le haut, mais peut-être que c'est une piste....
0
Merci
Je me suis très mal expliquée... Désolée je me reprends

C'est pas en modifiant le -20 en 20, c'est en modifiant le "top" en "bottom" que j'ai obtenu ce résultat.

Voilà plus clairement pour expliquer ce que ça donne :

http://img229c.imageshack.us/img229/3756/modifex3.gif
0
Merci
Salut,

Je suis en train de faire un menu déroulant aussi. Moi je le fais vers le bas donc pas de problème là-dessus. Mais j'ai aussi des problèmes entre IE et Firefox. Alors pour que ça marche sur les 2, j'ai fais un test du navigateur en php. Tu ne peux pas non plus utiliser de php? Ou alors, mettre le test dans le fichier index et faire un CSS pour IE et un autre pour firefox.
0
Merci
Non je ne peux pas mettre de php.

Je vais tester de faire des css pour les deux ça sera plus simple je pense oui :) Merci !

Je vais aussi essayer de refaire tout au propre et de voir ce qui sert et ce qui sert pas... Parce que je pense que j'ai fait pas mal d'erreurs dans la CSS !

Merci encore :)
0
Merci
De rien même si ça t'as pas aidé. En tout cas bon courage pour que ça fonctionne sur les 2. Je me bats depuis des heures là-dessus ^^
Messages postés
7
Date d'inscription
dimanche 22 février 2009
Dernière intervention
27 février 2009
2
0
Merci
Merci beaucoups sa m'aide !

Mais est ce que on pourrait faire la meme chose mais en bas ?
Désoler si m'as question vous intrigue je suis novice :p
0
Merci
position: relative => ta oublie le ";" pour commencer ^^"
background : transparent url(http://img57.imageshack.us/img57/6731/fondtranspmm8.png) aussi
background : transparent url(http://img57.imageshack.us/img57/6731/fondtranspmm8.png) et là aussi

Ensuite moi je connais pas background:transparent après peut-être que sa existe, mais je mettrai

background-image: url(http://img57.imageshack.us/img57/6731/fondtranspmm8.png);
-2
Merci
je te fait ton menu en flash si tu veux pour 35 euros tu n aura plus qu l installer.