Sujet Précédent Sujet Suivant

Menu déroulant / CSS sous Firefox / IE

Fermé
Mel - 16 sept. 2008 à 00:39
bormat Messages postés 10 Date d'inscription lundi 1 juin 2009 Statut Membre 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 !
A voir également:

13 réponses

Réponse 1 / 13
bormat Messages postés 10 Date d'inscription lundi 1 juin 2009 Statut Membre Dernière intervention 25 août 2012 4
23 juin 2009 à 22:45
c'est simple tu as un menu déroulant 100 % css http://bormat2.free.fr/wordpress4/
4
Réponse 2 / 13
cedopolice Messages postés 146 Date d'inscription jeudi 20 mars 2008 Statut Membre Dernière intervention 15 février 2011 2
16 sept. 2008 à 01:59
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 https://www.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
Réponse 3 / 13
Mel
16 sept. 2008 à 18:16
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
Réponse 4 / 13
Mel
17 sept. 2008 à 15:02
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 :)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 13
der_igel Messages postés 50 Date d'inscription mercredi 13 août 2008 Statut Membre Dernière intervention 9 octobre 2009
17 sept. 2008 à 15:39
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
Réponse 6 / 13
Mel
17 sept. 2008 à 17:17
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
Réponse 7 / 13
Mel
17 sept. 2008 à 17:28
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
Réponse 8 / 13
Kluk
17 sept. 2008 à 19:31
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
Réponse 9 / 13
Mel
18 sept. 2008 à 15:04
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
Réponse 10 / 13
Kluk
18 sept. 2008 à 22:14
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 ^^
0
Réponse 11 / 13
Ryuzaki76 Messages postés 4 Date d'inscription dimanche 22 février 2009 Statut Membre Dernière intervention 27 février 2009 1
23 févr. 2009 à 11:33
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
Réponse 12 / 13
alex
24 avril 2009 à 13:45
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);
0
Réponse 13 / 13
tony
19 sept. 2008 à 01:52
je te fait ton menu en flash si tu veux pour 35 euros tu n aura plus qu l installer.
-2

Discussions similaires

Prélèvement Google Ireland Limited
jaffa1961 -
gill34051 -

32 réponses
Suppression listes déroulantes
Archa -
Sam -

5 réponses
Facture de google 380€ !
Misternet -
okapi -

61 réponses
Arnaque frauduleuse Ireland ltd
Mymy -
celine -

3 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses