Menu en accordéon

**ChristiandeGranville** · 11/03/2011, 15h57

Bonjour à tous,

Je suis, depuis plusieurs jours, sur un petit script css de menu accordéon.
Il fonctionne bien avec FireFox mais pas avec Ie (version 8).

Voici le code css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
ul.menu { 
 margin: 0; 
 padding: 0; 
 list-style:none; 
 text-align:center; 
} 
ul.menu li { 
 text-decoration:none; 
 width: 100%; 
 padding: 0px 0px 0px 0px; 
 text-align:center; 
} 
ul.menu li div { 
 width: 100%x; 
 display:none; 
 text-align:center; 
} 
ul.menu li:hover div { 
 width: 100px; 
 display:block; 
 padding: 0px 0; 
 text-align:center; 
}

Et voici le code html du menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<table align="center" width="100%" height="1%" border="0"> 
<colgroup><col width="20%"><col width="60%"><col width="20%"></colgroup> 
 
<tr><td style="padding-left:5;" valign="top"><a href="../Administration/Encodage.html" target="Publications" title="Afficher"><img src="FlecheBasGauche.ico" height="18" width="18"></a></td> 
<td style="text-align:center;background: white;border-color:black;border-style:solid;border-width:1;"height="1%"> 
 
<ul class="menu"><li><a href="../Administration/Encodage.html" target="Publications" title="Afficher">Encodage</a> 
<div style="width:100%;"><a href="../Administration/Tests/Tests.php" target="Publications" title="Afficher"><img src="FlecheBasGauche.ico" height="15" width="15"></a>Tests</div> 
</li></ul> 
 
</td></td><td>&nbsp;</td></tr> 
 
</table>

Je travaillait jusqu'ici avec un Doctype qui fonctionnait très bien jusqu'à présent :
<!Doctype html public "-//w3c//dtd html 4.01 transitional//en">
Mais avec ce Doctype, les items du mon menu accordéon ne s'ouvrent pas.

J'ai essayé avec ce Doctype :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Les items de mon menu s'ouvrent correctement, mais les bordures de la cellule du tableau (ligne 4 du code html) ont une largeur de 3 px au lieu de 1 px, et on ne peut la modifier dans la partie css.

Une idée de ce qui ni fonctionne pas ?
Merci d'avance

**NoSmoking** · 11/03/2011, 17h00

Bonjour,
tu aurais aussi pu mettre

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

mais le plus imporatnt en de ne pas oublier les UNITES et dans ton code on retrouve un peu n'importe quoi...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

style="padding-left:5;"

ou encore

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

style="text-align:center;background: white;border-color:black;border-style:solid;border-width:1;"

Prend l'habitude de ne pas mettre de style dans les balises mais dans la partie style de ton document

**ChristiandeGranville** · 11/03/2011, 20h17

Merci pour votre réponse.
Je ne suis qu'un amateur en programmation, et vos remarques sont les bienvenues car elles me permettent de progresser.

Celles-ci ont suffit à résoudre mon problème, donc soyez en remercié.

Menu en accordéon

CSS

Discussions similaires

Partager

Partager