Discussion :

[vava1978]

Bonjour/Bonsoir tout le monde,

je sollicite une ame charitable pour m aider à rédiger des commentaires conditionnels destinés au navigateur ie, je m embrouille enormement

voici ce que j ai mis dans la feuille de style (je n'ai fais qu'une feuille de style pour les deux navigateurs)

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
.menu {
position:relative;
z-index:1000;
font-size:90%;
height:235px;
margin:25px 0 0 15px; /* this page only */
}
 
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:200px;
position:relative;
border:1px solid #888;
border-width:1px 1px 0 1px;
background:#9bb;
}
 
.menu li {
background:transparent;
height:26px;
}
* html .menu li {margin-left:-16px; margin-lef\t:0;}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; width:0; height:0;}
 
/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
height:25px;
line-height:25px;
width:200px;
color:#000;
text-indent:5px;
border-bottom:1px solid #888;
background:transparent;
}
/* style the link hover */
* html .menu a:hover {color:#fff; background:#999;}
 
.menu :hover > a {
color:#fff; 
background:#999;
}
 
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:-1px;
left:100px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
background:#dde;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
background:#ded;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
background:#edd;
}
.menu ul.top2 {top:25px;}
.menu ul.top2bis {top:25px;}
.menu ul.top3 {top:51px;}
.menu ul.top4 {top:77px;}
.menu ul.top5 {top:103px;}
.menu ul.top6 {top:129px;}
.menu ul.top7 {top:155px;}

Code html :

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

1
2
3
4
5
6
</style>
<!--[if IE 7]>
<style type="text/css">
.menu li {float:left;}
</style>
<![endif]-->

et voici ce que je met dans ma page html

Code html :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<div class="menu">
<ul>
<li><a href="#nogo">D&eacute;pollution moteur »</a>
 <!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="top2bis">
  <li><a href="#nogo">Filtres a particules  »<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="top2">
			<li><a href="#nogo">Système passif  »</a>
			<!--[if lte IE 6]><table><tr><td><![endif]-->
					<ul class="top2bis">
					<li><a href="#nogo">Carmex SC additif</a></li>
					<li><a href="#nogo">Carmex CSC catalysé</a></li>
 
 </ul>	
 
 			</li> 
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			<li><a href="#nogo">Systéme actif »<!--[if IE 7]><!--></a><!--<![endif]-->
				<ul class="top2bis">
					<li><a href="#nogo">DUO Filter </a></li>
					<li><a href="#nogo">rechauffeur </a></li>
					<li><a href="#nogo">Regeneration electrique </a></li>
					<li><a href="#nogo">filtre démontable</a></li>
				</ul>
			</li>
		</ul>	
	<li><a href="#nogo">Catalyseur »<!--[if IE 7]><!--></a><!--<![endif]-->
		<ul class="top2">
			<li><a href="#nogo">AIRCAT</a></li>
			<li><a href="#nogo">AIRNOX <!--[if IE 7]><!--></a><!--<![endif]-->
			</li>
		</ul>
</ul>
<li><a href="#nogo">Atex »<!--[if IE 7]><!--></a><!--<![endif]-->
	<ul class="top3">
	<li><a href="#nogo">Chariot elevateur </a></li>
	<li><a href="#nogo">Travaux publics </a><li><li><a href="#nogo">Off shore</a></li>
	<li><a href="#nogo">Mine</a></li>
<li><a href="#nogo">Accessoires »</a>
 
		<ul class="top4">
			<li><a href="#nogo">Coffret, éclairage, signalisation</a></li>
			<li><a href="#nogo">Clapet « STOP AIR » »</a></li>
			<li><a href="#nogo">Survitesse</a></li>
			<li><a href="#nogo">Pare étincelles</a></li>
			<li><a href="#nogo">Pare flammes</a></li>
			</li>	
		</ul>
	</li>
	</ul>
	</li>
<li><a href="#nogo">Protections IP</a></li>
<li><a href="#nogo">Silencieux d'échappement</a></li>
</ul>
</div>

le probléme que j'ai c'est qu'on bout d'un moment je ne sais plus ou mettre ces commentaires ....quelq'un peut m'aider ?????

Merci d'avance

[beeboo]

Salut,
Mon avis : oublie les commentaires conditionnels de IE et essaie de faire du HTML propre.
IE 6 et 7 arrive à afficher correctement les <ul><li> avec les CSS qui vont bien, c'est donc pas la peine d'insérer des codes de tabulation avec ces commentaires conditionnels.
C'est carrément illisible.
Alors même si tu arrives à une solution aujourd'hui, je te dis pas les cheveux que tu vas perdre quand il faudra faire des mises à jour dans 3 mois.

[Candygirl]

essaie de faire du HTML propre.

+1

Je rejoins les propos de beeboo. Ce genre de menu déroulant full css et fonctionnant sur IE6 est une belle réussite, un beau challenge, mais ne devrait rester que pour une utilisation anegdotique vu la pollution du html que cela intraîne et la difficulté à entretenir et personnaliser.

Tu peux très bien faire un menu déroulant accessible, avec du javascript non obstrusif.

[vava1978]

bonjour tout le monde

a ce que j en lis je sais ce qu il me reste a faire ..
merci a vous