Explications concises menu déroulant en CSS

**No3l_tek** · 22/04/2008, 08h40

Bonjour à tous.

J'ai suivi le tutorial du site pour créer un menu déroulant rien qu'en css.
J'ai retouché le code pour le mettre à ma manière mais il est vrai que certaines choses sont floues.

J'aimerai savoir qu'elles propriétés font qu'un menu rien qu'en css sera un menu déroulant horizontal ou vertical (déploiement)

Ce que j'arrive à faire c'est un menu horizontal qui se déplie verticalement et un menu vertical qui se déplie verticalement.

Mais Vertical -- > déploiement horizontale Comment faire ??

Je pense que c'est une histoire de float et de position et peut être de display non?
Merci de votre aide

Voici ce à quoi j'arrive : ICI

Voici le code du menu HTMl

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
 
<ul id="menuDeroulant">
			<li><a href="#">Accueil</a> <!-- Nom du premier menu  --></li>
 
			<li><a href="#">Comite</a> <!-- Nom du deuxieme menu  -->
				<ul class="sousMenu">
					<li><a href="#">Dates et reunions</a></li>
					<li><a href="#">Bureau directeur</a></li>
					<li><a href="#">Conseil d'administration</a></li>
					<li><a href="#">Commissions</a></li>
				</ul>
			</li>
 
			<li><a href="#">Competitions</a> <!-- Nom du troisieme menu  -->
				<ul class="sousMenu">
					<li><a href="#">Rencontres</a></li>
					<li><a href="#">InterComites</a></li>
					<li><a href="#">Gest'hand</a></li>
					<li><a href="#">Calendrier</a></li>
					<li><a href="#">Sanctions</a></li>
				</ul>
			</li> 
 
			<li><a href="#">Formations</a> <!-- Nom du quatrieme menu  -->
				<ul class="sousMenu">
					<li><a href="#">Joueurs</a></li>
					<li><a href="#">Animateurs</a></li>
					<li><a href="#">Arbitres</a></li>
					<li><a href="#">Diverses</a></li>
					<li><a href="#">Anim'Hand</a></li>
				</ul>
			</li>
 
			<li><a href="#">Annuaire Clubs</a> <!-- Nom du cinquieme menu  --></li> 
 
			<li><a href="#">Ressources</a> <!-- Nom de premier menu  -->
				<ul class="sousMenu">
					<li><a href="#">Memento</a></li>
					<li><a href="#">Modèles à télécharger</a></li>
					<li><a href="#">Partenaires du comité</a></li>
				</ul>
			</li>
		</ul>

Et là le 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
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
 
@charset "utf-8";
/* CSS Document */
 
#menuDeroulant
{
	 width: 960px;
	 list-style-type: none;
	 margin: 0;
	 padding: 0;
	 border: 0;
	 font: 12px verdana, sans-serif;
	 text-align: center;
	 z-index: 3;
}
/* --------------------------------------------- */
#menuDeroulant li
{
	 float: none;
	 width: 150px;
	 margin: 0;
	 padding: 0;
	 border: 0;
	 left: 50%; 
	 right: 50%;
	 z-index: 3;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu
{
	 display: none; /* rendre invisble les sous */
	 position: relative;
	 list-style-type: none;
	 margin: 0;
	 padding: 0;
	 border: 0;
}	
/* --------------------------------------------- */
#menuDeroulant .sousMenu li
{
	 float: none;
	 margin-left: 150px;
	 padding: 0;
	 border: 0;
	 width: 149px;
	 border-top: 1px solid transparent; /* 1px solid transparent */
	 border-right: 1px solid transparent;  /* 1px solid transparent */
}			
/* --------------------------------------------- */	
#menuDeroulant li a:link,
#menuDeroulant li a:visited
{
	 display: block;
	 height: auto;
	 color: #FFF;
	 background-image:url(fondT.png);
	 margin: 0;
	 padding: 4px 8px; /* 4px 8px */
	 border-right: 1px solid #fff;
	 text-decoration: none;
}
/* --------------------------------------------- */
#menuDeroulant li a:hover { background-image:url(fondT2.png); } /* Image RollOver des Menus */
/* --------------------------------------------- */
#menuDeroulant li a:active { background-color: #5F879D; } /* Couleur de la police lors du clic */
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
	 display: block;
	 float : none;
	 color: #FFF;
	 margin: 0;
	 border: 0;
	 text-decoration: none;
	 background: transparent url("fondTR.png") repeat;  /* Image de fond  des sous-menus */
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:hover {background-image: none;background-color: #ae4343;}
/* --------------------------------------------- */
#menuDeroulant li:hover > .sousMenu { display: block; }		
/* --------------------------------------------- */

**pierre24** · 22/04/2008, 09h48

Pas forcement une histoire de float !

Mais il à a du display dans l'air oui !
Par exemple, initialement ton sous menu aura la propriété Display : none (caché). Et lorsque tu passe sur un lien, cette meme propriété passe a Display : bloc par exemple. Ton probleme vient de la propriété z-index que tu as du oublier ce qui fait que lors de l'affichage de ton sous menu, celui-ci décale les autres éléments de ta page !

Moi je ferais de la maniere suivante :

Code :

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

1
2
3
4
5
6
7
8
 
.sousMenu{
   position : absolute; /* en faisant garde à d'autres éléments en dessus qui pourraient venir contraindre au choix du absolute*/
   top: 100px; /*pour placer ton sous menu à l'endroit exact par exemple.*/
   left: 100px; /*toujours pour placer ton sous menu à l'endroit exact*/
   z-index:1; /* tres important ds la constitution d'un sous menu*/
...
}

Apres je ne suis pas un pro, mon code est surement criticable !

**pierre24** · 22/04/2008, 09h51

J'avoue que je regarde les CSS présentés sur ce forum, et je pense qu'il y a moyen d'écrire plus simplement et plus clairs certaines choses

Pour ma part, j'ecrit du CSS beaucoup plus simplement pour arriver aux memes résultats mais après je ne suis qu'un novice, il y certainement pleins de choses qui m'échappent !

**No3l_tek** · 22/04/2008, 10h08

Merci de ta réponse.
De mon coté j'ai avancé je mets le rendu sur le même lien plus haut.

Je n'arrive pas à résoudre l'alignement.

Je sais que je mets des choses qui ne servent à rien lol, je suis encore plus novice que toi ^^.

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
 
@charset "utf-8";
/* CSS Document */
 
#menuDeroulant
{
position: relative;
width: 960px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
font: 12px verdana, sans-serif;
text-align: center;
z-index: 3;
}
/* --------------------------------------------- */
#menuDeroulant li
{
float: none;
width: 150px;
margin: 0;
padding: 0;
border: 0;
left: 50%;
right: 50%;
z-index: 3;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu
{
display: none; /* rendre invisble les sous */
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li
{
top: 0;
margin-left: 150px;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent; /* 1px solid transparent */
border-right: 1px solid transparent; /* 1px solid transparent */
}
/* --------------------------------------------- */
#menuDeroulant li a:link,
#menuDeroulant li a:visited
{
display: block;
height: auto;
color: #FFF;
background-image:url(fondT.png);
margin: 0;
padding: 4px 8px; /* 4px 8px */
border-right: 1px solid #fff;
text-decoration: none;
}
/* --------------------------------------------- */
#menuDeroulant li a:hover { background-image:url(fondT2.png); } /* Image RollOver des Menus */
/* --------------------------------------------- */
#menuDeroulant li a:active { background-color: #5F879D; } /* Couleur de la police lors du clic */
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
display: block;
float : none;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fondTR.png") repeat; /* Image de fond des sous-menus */
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:hover {background-image: none;background-color: #ae4343;}
/* --------------------------------------------- */
#menuDeroulant li:hover > .sousMenu { display: block; }
/* --------------------------------------------- */

**No3l_tek** · 22/04/2008, 10h18

En fait ce que j'ai fait c'est bidouiller...
Du coup je viens de tester sous IE7 et c'est CRADE ^^ ...

Je vais recommencer au clair. Mais j'attends toujours vos conseils pour ce genre de menus...qui je trouve est très "embêtant" à concevoir pour un novice

**pierre24** · 22/04/2008, 10h20

je l'avoue c'est pas trivial !
Par contre , essais de mettre ton code dans les balises [CODE] et non pas [QUOTE], ce sera plus lisible !

**No3l_tek** · 22/04/2008, 10h29

lool

Oui je comprends, j'ai enlevé les cote " ' " dans mon le menu html.
Je suis en train de refaire à 0 avec seul exemple "ma tête".

Toujours prenant d'infos

**pierre24** · 22/04/2008, 10h30

tu peux creer une classe CSS pour chaque sous menu.

Par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
.sousMenu1{
   position: absolute;
   top: 30px; /*ce sont les valeurs a peu pres que je vois sur ta page
                     tu devras surement ajuster*/
   left: 100px /* pareil, tu ajusteras*/
   display: none;
   z-index: 1;

}

et ainsi de suite pour les autres sous menus

**No3l_tek** · 22/04/2008, 10h35

Oui j'ai vu ce script dans des menu css/javascript

Mais est-ce vraiment util, le seul moyen ??
Perso je ne sais pas si sa change beaucoup de chose pour le CSS

Sinon en horizontale j'ai ça : ICI

je continu mon p'tit truc et je verrai ça ensuite.

**pierre24** · 22/04/2008, 10h37

Perso, en général j'utilise une fonction javascript pour afficher ou cacher les blocs. En CSS je ne sais pas spécifier le fait que lorsque je passe sur un lien, je veux que tel block s'affiche ou se cache !

Va voir ICI

**No3l_tek** · 22/04/2008, 10h46

Il faut faire un :hover avec un display: block;

Regarde dans mon code c'est tout en bas normalement.
Je veux un script rien qu'en css...

**No3l_tek** · 22/04/2008, 10h50

GOOOOOOOAAAAAAAL !!!!!

J'ai réussi en reprenant tout à zéro !!
Donc voilà le code est beaucoup plus simple et je mets à jours les liens.

Pierre si tu veux comprendre comment faire regarde ce script (très simple) puisque je n'ai pas mis de mise en fome avec fond d'image et transparence.

Fier de moi ^^ mais je mettrai résolu qu'en j'aurai tout fini comme à mes habitudes.

SCRIPT

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
 
@charset "utf-8";
/* CSS Document */
 
*{
	margin:0;
	padding:0;
	color:#fff;
}
 
#menuDeroulant
{
position: relative;
list-style-type: none;
float: left;
}
/* --------------------------------------------- */
#menuDeroulant li
{
position: relative;
width: 150px;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu
{
position: absolute;
display: none;
list-style-type: none;
top: 0px;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li
{
margin-left: 150px;
width: 149px;
}
/* --------------------------------------------- */
#menuDeroulant li a:link,
#menuDeroulant li a:visited
{
display: block;
background-color: #000000;
}
/* --------------------------------------------- */
#menuDeroulant li a:hover{}
/* --------------------------------------------- */
#menuDeroulant li a:active {}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
display: block;
background-color: #000000;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:hover {background-color: #FF0000;}
/* --------------------------------------------- */
#menuDeroulant li:hover > .sousMenu {display: block;}
/* --------------------------------------------- */

voir résultat ideux qui fonctionne --> ICI <--

**No3l_tek** · 22/04/2008, 11h38

Ah...Problème...

Lorsque je mets en forme j'ai quelques complications.

Sous FF : Les liens (rollOver) du menu (principal) fonctionnent mal, essayez.

Sous IE7 : j'obtiens un décalage horizontal mais les liens (rollOver) fonctionnent bien.

Quelques peut-il m'aider j'ai essayé pas mal de choses sur les margin padding et border mais rien n'y fait.

Merci de l'aide

Voici le script 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
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
 
@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;
	color:#fff;
}
 
#menuDeroulant
{
position: relative;
list-style-type: none;
float: left;
 
border-top: 1px solid transparent; /* 1px solid transparent */
border-right: 1px solid transparent;  /* 1px solid transparent */
 
width: 350px;
text-align: center;
font: 12px verdana, sans-serif;
z-index: 1;
}
/* --------------------------------------------- */
#menuDeroulant li
{
position: relative;
width: 150px;
z-index: 1;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu
{
position: absolute;
display: none;
list-style-type: none;
top: 0px;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li
{
margin-left: 150px;
width: 149px;
 
border-top: 1px solid transparent; /* 1px solid transparent */
border-right: 1px solid transparent;  /* 1px solid transparent */
}
/* --------------------------------------------- */
#menuDeroulant li a:link,
#menuDeroulant li a:visited
{
display: block;
background-image:url(fondTR.png);
color: #FFF;
height: auto;
 
padding: 4px 8px; /* 4px 8px */
border-right: 1px solid #fff;
text-decoration: none;
}
/* --------------------------------------------- */
#menuDeroulant li a:hover{background-image: url(fondT2.png);}
/* --------------------------------------------- */
#menuDeroulant li a:active {background-color: #5F879D;}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
display: block;
text-decoration: none;
background: transparent url("fondTR.png") repeat;
 
margin: 0;
border: 0;
 
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:hover {background-image: none; background-color: #ae4343;}
/* --------------------------------------------- */
#menuDeroulant li:hover > .sousMenu {display: block;}
/* --------------------------------------------- */

**No3l_tek** · 22/04/2008, 11h54

J'arrive à un mieux... --> Là <--

Sa fonctionne même mieux sous IE7 ..j'en crois pas mes yeux

Il faudrait donc que sous FF mes menus se retrouvent avec une bordure et que les rollOver fonctionnent correctement.

SVP HELP !!

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
 
@charset "utf-8";
/* CSS Document */
 
 
#menuDeroulant
{
position: relative;
list-style-type: none;
float: left;
 
font: 12px verdana, sans-serif;
z-index: 1;
 
	margin:0;
	padding:0;
}
/* --------------------------------------------- */
#menuDeroulant li
{
position: relative;
width: 150px;
z-index: 1;
 
	margin:0;
	padding:0;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu
{
position: absolute;
display: none;
list-style-type: none;
top: 0px;
 
	margin:0;
	padding:0;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li
{
margin-left: 150px;
width: 149px;
 
border-top: 1px solid transparent; /* 1px solid transparent */
border-right: 1px solid transparent;  /* 1px solid transparent */
 
	padding:0;
}
/* --------------------------------------------- */
#menuDeroulant li a:link,
#menuDeroulant li a:visited
{
display: block;
background-image:url(fondTR.png);
color: #FFF;
height: auto;
 
padding: 4px 8px; /* 4px 8px */
border-right: 1px solid #fff;
text-decoration: none;
 
	margin:0;
}
/* --------------------------------------------- */
#menuDeroulant li a:hover{background-image: url(fondT2.png);}
/* --------------------------------------------- */
#menuDeroulant li a:active {background-color: #5F879D;}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
display: block;
text-decoration: none;
background: transparent url("fondTR.png") repeat;
 
	margin:0;
 
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:hover {background-image: none; background-color: #ae4343;}
/* --------------------------------------------- */
#menuDeroulant li:hover > .sousMenu {display: block;}
/* --------------------------------------------- */

**No3l_tek** · 22/04/2008, 14h24

J'ai encore avancé dans mon menu.

Il ne me reste plus qu'un petit bug.

Sous FF les liens le rollOver des menus qui ont des sous menu ne fonctionnent pas.

J'attends toujours un coup de main c'est pas trop tard ^^

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
87
88
89
90
91
92
93
 
@charset "utf-8";
/* CSS Document */
 
#conteneur_menuCSS
{
	position: absolute;
	top: 131px;
	left: 0px;
	left: 50%; 
	right: 50%;
	margin-left: -100px;
 	width: 200px;
	z-index: 1;
}
 
#menuDeroulant
{
position: absolute;
list-style-type: none;
 
font: 12px verdana, sans-serif;
margin: 0;
padding: 0;
border: 0;
z-index: 1;
}
/* --------------------------------------------- */
#menuDeroulant li
{
float: left;
position: relative;
width: 150px;
margin: 0;
padding: 0;
border: 0;
border-top: 1px solid transparent; /* 1px solid transparent */
border-right: 1px solid transparent;  /* 1px solid transparent */
z-index: 1;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu
{
position: absolute;
display: none;
list-style-type: none;
top: -1px;
margin: 0;
padding: 0;
border: 0;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li
{
float: left;
margin-left: 150px;
width: 149px;
border-top: 1px solid transparent; /* 1px solid transparent */
border-right: 1px solid transparent;  /* 1px solid transparent */
padding: 0;
}
/* --------------------------------------------- */
#menuDeroulant li a:link,
#menuDeroulant li a:visited
{
display: block;
background-image:url(fondTR.png);
color: #FFF;
height: auto;
padding: 4px 8px; /* 4px 8px */
border-right: 1px solid #fff;
text-decoration: none;
margin:0;
}
/* --------------------------------------------- */
#menuDeroulant li a:hover{background-image: url(fondT2.png);}
/* --------------------------------------------- */
#menuDeroulant li a:active {background-image: url(fondT2.png);}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
display: block;
text-decoration: none;
background: transparent url("fondTR.png") repeat;
margin:0;
border: 0;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:hover {background-image: none; background-color: #ae4343;}
/* --------------------------------------------- */
#menuDeroulant li:hover > .sousMenu {display: block;}
/* --------------------------------------------- */

**Candygirl** · 23/04/2008, 17h22

Envoyé par No3l_tek

Sous FF les liens le rollOver des menus qui ont des sous menu ne fonctionnent pas.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
#menuDeroulant .sousMenu
{
position: absolute;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li
{
margin-left: 150px;
width: 149px;
}
 
#menuDeroulant li a:hover{background-image: url(fondT2.png);}

Bonjour,

(pour référence ta page en ligne)

Tu attribues ton fond rouge à ton lien, lorsqu'il est survolé. Hors, lorsque le li est survolé, tu fais apparaître le menu secondaire qui est positionné en absolut, par dessus le lien en question (tu décales ensuite le li à l'aide d'un margin-left). FF doit donc considérer qu'il n'est plus survolé d'où ton fond qui apparait pour disparaître immédiatement.

Une manière d'éviter ce chevauchement est de positionner directement ton sous-menu en-dehors de ton menu; par exemple:

Code :

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

1
2
3
4
5
6
7
8
9
10
#menuDeroulant .sousMenu
{
position: absolute;
left:150px;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li
{
width: 149px;
}

Après tu peux aussi considérer que l'effet roll-over doit rester si tu te déplace dans les sous-menus auquel cas il faudrait plutôt attribuer ton over sur le li:hover a

Code :

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

#menuDeroulant li:hover a{background-image: url(fondT2.png);}

**No3l_tek** · 24/04/2008, 18h43

Ma page en ligne a changé ^^

http://noz.neuf.fr/PorpositionGraphique/index.html

Donc regardez.

Si on passe la souris sur les boutons qui ont des sous-menus, pas de rollOver. Et pourtant sous IE7 sa fonctionne c'est un comble ^^.

Je regarde ce que tu m'as dis mais je ne pense pas que ça change mon code actuel. Je le remets dessous.

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
 
@charset "utf-8";
/* CSS Document */
 
/* Style de mises en forme */
.styleText1
{
	color: #FFFFFF;
}
/* --------------------------------------------- */
/* Style de mises en forme */
.styleTitre1
{
	color: #FFFFFF;
	font-size: 12pt;
	font-weight: 700;
}
/* --------------------------------------------- */
/* Style de mises en forme */
.styleTitre2
{
	color: #cc6666;
	font-size: 12pt;
	font-weight: bold;
}
/* --------------------------------------------- */
/* Style de mises en forme */
.styleTitre3
{
	color: #2973ae;
	font-size: 12pt;
	font-weight: bold;
}
.margin
{
	padding-right: 10px;
	padding-left: 20px;
}
/* --------------------------------------------- */
 
table#Titre
{
padding :0;
border :0;
}
 
/* BODY */
* html #conteneur_principal
{
	height: 100%;
}
html, body
{
	background: white;
	font: 90%/200% verdana, arial, helvetica, sans-serif;
	height: 100%;
	margin: 0;
	padding: 0;
}
 
/* Conteneur principal : il regroupe tout sauf le body (fond de couleur) */
#conteneur_principal
{
	width:960px;
	padding:0 20px;
	height: 100%;
	background: #77b250;
	margin:0 auto; /* pour centrer */
	position:relative; /* qu'il serve de référence pour le positionnement absolu du footer */
}
/* --------------------------------------------- */
 
/* Conteneur : header (Bannière Comité Charente Handball) */
#conteneur_header
{
	left: 250px;
	height: 111px;
	background-image: url(Titre.png);
}
/* --------------------------------------------- */
/* Conteneur : footer (Bas de la page) */
#footer
{
    position: absolute;
	bottom:0;
	left:74px;
	width:960px;
	height: 70px;
	background-image: url(footer.png);
}
/* --------------------------------------------- */
/* Conteneur : footer (Bas de la page) */
#footer_graphique
{
    position: absolute;
	bottom:0;
	left: 0;
	width: 960px;
	height: 544px;
	background-image: url(footerGraphique2.png);
}
/* Conteneur : content (corps de la page) */
#conteneur_page
{
	background-color: #bbd9a8;
	position: absolute;
	top: 130px;
	bottom: 60px;
	left: 250px;
	width: 610px;
	border : 1px solid white;
	overflow-x: hidden;
	overflow-y: auto;
}
/* --------------------------------------------- */
 
#conteneur_menuCSS
{
	position: absolute;
	top: 180px;
	left: 40px;
 	width: 200px;
	z-index: 1;
}
 
#menuDeroulant
{
position: absolute;
list-style-type: none;
 
font: 12px verdana, sans-serif;
margin: 0;
padding: 0;
border: 0;
z-index: 1;
}
/* --------------------------------------------- */
#menuDeroulant li
{
float: left;
position: relative;
width: 150px;
margin: 0;
padding: 0;
border: 0;
border-top: 1px solid transparent; /* 1px solid transparent */
border-right: 1px solid transparent;  /* 1px solid transparent */
z-index: 1;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu
{
position: absolute;
display: none;
list-style-type: none;
top: -1px;
margin: 0;
padding: 0;
border: 0;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li
{
float: left;
margin-left: 150px;
width: 149px;
border-top: 1px solid transparent; /* 1px solid transparent */
border-left: 1px solid transparent;  /* 1px solid transparent */
padding: 0;
z-index:1;
}
/* --------------------------------------------- */
#menuDeroulant li a:link,
#menuDeroulant li a:visited
{
display: block;
 background-image:url(bouton.png);
color: #000000;
height: auto;
padding: 4px 8px; /* 4px 8px */
border-right: 1px solid transparent;
text-decoration: none;
margin: 0;
z-index: 1;
}
/* --------------------------------------------- */
#menuDeroulant li a:hover{background-image: url(boutonSurvol.png); color: #000000;}
/* --------------------------------------------- */
#menuDeroulant li a:active {background-image: url(boutonSurvol.png);}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
display: block;
text-decoration: none;
background-image: url(bouton.png);
margin:0;
border: 0;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:hover {background-image: url(boutonSurvol.png); color: #000000; z-index: 3;}
/* --------------------------------------------- */
#menuDeroulant li:hover > .sousMenu {display: block;}
/* --------------------------------------------- */

Dans #menuDeroulant .sousMenu

Si j'enlève le top : -1px ...les rollOver fonctionnent.
MAIS les menus sont décalés d'une case vers le bas, se serait une autre manière pour un affichage correct.

Leneuf affiche mal le menu mais on peut quand même voir les rollOver.

**No3l_tek** · 25/04/2008, 08h53

Hi,

Sa Marche !!!

J'ai mis ton code en enlevant certain bout du mien...
Je n'arrive pas à expliquer pourquoi.

Je vais donc tâcher d'alléger mon code qui reste lourd. Je vais le commenter et le mettre pour d'autres qui en auraient besoin pour apprendre.

Merci !! tu es une pro du css vraiment

Explications concises menu déroulant en CSS

CSS

Discussions similaires

Partager

Partager