[CSS] Menu déroulant --> aide please!

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] Menu déroulant --> aide please!

le_duc

PlaTyPuS

Re!

Bon après les conseils de FlorentG, je me suis refais un ptit menu déroulant, mais c encore pas parfait...

http://www.duotone.ch/~bastien/applimed/

Mon CSS :

Code :

#menu {
position: absolute;
top: 155px;
left: 90px;
width: 640px;
}
html>body #menu {
top: 142px;
}
#menu ul {
width: 100%;
padding: 0px;
margin: 0px;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background-color: #E2E2E2;
}
#menu li {
float: left;
position: relative;
text-align: center;
list-style-type: none;
}
#sMenu li {
text-align: left;
padding-left: 5px;
width: 100%;
}
#menu li:hover {
background-color: #6699CC;
}
#menu li ul {
display: none;
position: absolute;
left: 0px;
}
#menu li > ul {
top: auto;
left: auto;
}
#menu li:hover ul, li.over ul {
display: block;
}
#menu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
font-weight: bold;
text-decoration: none;
}
#sMenu a {
font-weight: normal;
}
#sMenu a:hover {
color: #FFFFFF;
}
.menuSmall {
width: 75px;
}
.menuMedium {
width: 120px;
}
.menuBig {
width: 160px;
}
.borderRW {
border-right: 1px solid white;
}

Mon HTML :

Code :

<head>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu" );
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI" ) {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "" );
}
}
}
}
}
window.onload=startList;
</script>
</head>
<body>
<ul id="menu">
<li class="menuSmall borderRW"><a href="">Accueil</a></li>
<li class="menuMedium borderRW"><a href="">Entreprise</a>
<ul id="sMenu">
<a href=""><li>Présentation</li></a><br>
<a href=""><li>Historique</li></a>
</ul>
</li>
<li class="menuBig borderRW"><a href="">Produits & Services</a>
<ul id="sMenu">
<a href=""><li>Accessoires</li></a><br>
<a href=""><li>Applicateur</li></a><br>
<a href=""><li>Boules</li></a><br>
<a href=""><li>Compresses</li></a><br>
<a href=""><li>Sets</li></a><br>
<a href=""><li>Services</li></a>
</ul>
</li>
<li class="menuMedium borderRW"><a href="">Qualité</a>
<ul id="sMenu">
<a href=""><li>Certification ISO</li></a><br>
<a href=""><li>Fabrication</li></a>
</ul>
</li>
<li class="menuSmall borderRW"><a href="">Contacts</a></li>
<li class="menuSmall"><a href="">Liens</a></li>
</ul>
</body>

Plusieurs problèmes à noter :

Sous IE ca marche pas... alors que ca devrait! Bizarre.
Comment je fais pour enlever le débordement (5px) qui se produit qd on survole un sous-menu (tout en gardant cette marge (5px) à gauche! -> pasque le texte collé au bord, c'est pas beau!)??
Comment faire pour diminuer la bordure des sous-menus d'1 pixel -> pour aligner avec les petit traits blancs.
Tous les problèmes qui vont apparaître sous IE une fois que ca marchera

Merci pour votre aide!

PS: A lire pour ceux qui sont intéressé par un menu du genre :
http://www.alistapart.com/articles/dropdowns
http://css.alsacreations.com/Const [...] us-en-CSS/

Message édité par le_duc le 06-04-2005 à 16:12:53

Publicité

FlorentG

Ca marche sous IE à cause du script tout en haut

Message édité par FlorentG le 06-04-2005 à 16:10:53

le_duc

PlaTyPuS

?? j'enlève le script?? (je test...)

-> vlà l'adresse pour voir : http://www.duotone.ch/~bastien/applimed/

le_duc

PlaTyPuS

avec ou sans script, ca marche pas sous IE ...

FlorentG

Haaaaa applimed le retour

Sinon sans le script ça ne fonctionnera pas sous IE [:spamafote]

le_duc

PlaTyPuS

FlorentG a écrit :

Haaaaa applimed le retour

Sinon sans le script ça ne fonctionnera pas sous IE [:spamafote]

pkoi le retour?

bah, là le script y est et ca marche pas...

FlorentG

Sûrement un problème de CSS, il trouve pas la bonne classe

le_duc

PlaTyPuS

FlorentG a écrit :

Sûrement un problème de CSS, il trouve pas la bonne classe

comment tu fais pour savoir qu'il trouve pas la bonne classe?

FlorentG

Tu lui demandes : Tu fait sous IE "Fichier\Poser une question", tu tapes : "Do you find the new class", et il te répondra

le_duc

PlaTyPuS

FlorentG a écrit :

Tu lui demandes : Tu fait sous IE "Fichier\Poser une question", tu tapes : "Do you find the new class", et il te répondra

LOOL non mais sérieux? y'a moyen de savoir ca ?? genre un compilateur ?

-> j'ai trouvé l'erreur... en fait il faut pas mettre les :

#menu blabla

seulement

blabla

Je vois pas ce que ca change, mais bon...

Pour les autres problèmes, t'as une solution?

Publicité

FlorentG

Avec un débuggeur. Si t'as Visual Studio, tu as entre tes mains le meilleur débuggeur de JS :sol:

le_duc

PlaTyPuS

FlorentG a écrit :

Avec un débuggeur. Si t'as Visual Studio, tu as entre tes mains le meilleur débuggeur de JS :sol:

et je fais comment pour passer ca dasn VS ?

FlorentG

Je sais pas

le_duc

PlaTyPuS

:pfff:

Personne pour les autres problèmes'?

Ptit prob. supplémentaire:

IE ne gère pas la couleur de fond lors du survol...

@++

le_duc

PlaTyPuS

le_duc

PlaTyPuS

le_duc

PlaTyPuS

reup

le_duc

PlaTyPuS

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] Menu déroulant --> aide please!

Sujets relatifs
[ VB.net ] besoin d'aide pour créer une dll	Système de ce menu ingénieux...
[HTML/CSS/JS] Ya un moyen d'ouvrir un lien dans FFox à partir de IE ?	Besoin d'aide sur un code.
PLEASE HELP ME pb with Servlet	demande d'aide
aide de requête sous access 2002	a l'aide ... je ne trouve pas :s
Aide solution requete ... pas trop compliqué mais bon ... ;-)	[HTML/CSS] Compatibilité ie/firefox/mozilla/netscape 4
Plus de sujets relatifs à : [CSS] Menu déroulant --> aide please!

Page générée en 0.048 secondes