Menu Full CSS quelques soucis..

**Etienne76** · 28/04/2009, 11h38

Bonjour,

Je dois develloper un site web intranet pour l'entreprise qui m'emploi en contrat de pro, je me suis dit quitte a faire quelque chose autant le rendre beau, simple d'utilistation, scriptable pour la mise a jour etc etc...
pour tout ca c'est bon

;

Mon Souci est le suivant mon menu vertical dois masquer certains elements (j'ai trois menu avec un sous menu a environ 12 13 elements ... ca fais moche sinon...) quand je passe la souris dessus mon "sous menu" s'affiche mais ne décalle pas le "menu" apres... je ne sais plus comment faire donc je poste mon code sources

Le code 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
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" ></style>	
<link href="Untitled-2.css" rel="stylesheet" type="text/css" ></link>
<title>Document sans nom</title>
</head>
 
<body>
<div id="menu"><ol id="navigation">Acceuil
	<li><a href="#" title="aller à la section 1">item1</a></li>
    <li><a href="#"	title"tatda">tada</a></li>
	<li><a href="#" title="aller à la section 2">item2</a></li>
	<li><a href="#" title="aller à la section 3">item3</a></li>
	<li><a href="#" title="aller à la section 4">item4</a></li>
	<li><a href="#" title="aller à la section 5">item5</a></li>
</ol>
 
<ol id="navigation1">S&eacute;curit&eacute;
	<li><a href="#" title="widéo">test</a></li>
</ol>
</div>
 
</body>
</html>

Le CSS 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
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
@charset "UTF-8";
/* CSS Document */
 
#menu {
	width:240px;
	height:800px;
	display:block;
	border:2px solid black;
	float:left;
	}
 
#navigation {
	background-image:url(images/boutonff.png);
	width: 221px;
	height: 41px;
	list-style: none;
	padding: 0;
	border:medium black;
	line-height: 40px;
	text-align:center;
	float:left;
 
 
/*	left: 11px;
	top: 27px;*/
	}
#navigation:hover, #navigation:focus, #navigation:active{
background-image:url(images/boutonon.png);
}
#navigation li{
	display:none;
	background-image:url(images/boutonff.png) ;
	color: #fff ;
	width:221px;
	height:41px;
	clear:both;
	}
 
#navigation li a {
	display: block ;
	color: #fff ;
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	line-height: 40px ;
	text-align: center ;
	text-decoration: none ;
	width:222px;
	height:41px;
	}
 
#navigation:hover li, #navigation:focus li, #navigation:active li{display:block;}
 
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
 
	background-image:url(images/boutonon.png);
	text-decoration: underline ;
	width:220px;
	height:40px;
	}
 
#navigation1 {
	background-image:url(images/boutonff.png);
	width: 221px;
	height: 41px;
	list-style: none;	
	padding: 0;
	border:medium black;
	line-height: 40px;
	text-align:center;
 
	}
#navigation1:hover{
background-image:url(images/boutonon.png);
}
#navigation1 li{
	display:none;
	background-image:url(images/boutonff.png) ;
	color: #fff ;
	width:221px;
	height:41px;
	clear:both
	}
 
#navigation1 li a {
	display: block ;
	color: #fff ;
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	line-height: 40px ;
	text-align: center ;
	text-decoration: none ;
 
	width:222px;
	height:41px;
	}
 
#navigation1:hover li{display:block;}
 
#navigation1 li a:hover, #navigation1 li a:focus, #navigation1 li a:active {
 
	background-image:url(images/boutonon.png);
	text-decoration: underline ;
	width:220px;
	height:40px;
	}

(ci joint les images des boutons que j'ai créé )

Voila,

Merci d'avance!

**devyan** · 28/04/2009, 14h25

Bonjour,

Et bien ça m'a l'air un peu compliqué tout ça

Commençons par simplifier (moins il y a de code moins nous risquons de faire des erreurs ^^)

+ #navigation et #navigation1 me semblent représenter exactement la même chose (pourquoi ne pas les remplacer par 1 classe .navigation utilisée pour tous les éléments de menu "niveau 1")

+ Tiens un float:left sur #navigation, a quoi sert-il ? (d'ailleurs seule différence entre #navigation et #navigation1)

+ Un menu à plusieurs niveaux (ici 2) est une liste d'éléments (tu as opté pour une structure ol li ) qui contient à son tour une liste d'éléments (les sous-menus)
=> Pourquoi tes 2 listes "principales" ne sont-elles pas dans une liste ?

**Etienne76** · 28/04/2009, 15h04

Merci de ta réponse , alors navigation 1 et navigation sont bien les même (merci copier coller quoi...) je suis parti de rien j'ai jamais fais de dev html + css ni html tout cours d'ailleurs

, je les ai différencié en pensant que peut etre au hazard j'allais avoir ce que je voulais

le float:left; je l'ai mis en pensant que le haut allait 'flotter' et j'ai testé sur navigation1 .... enfin la vrai explication au 2 navigation differents c'est pour faire des test et voir comment le bloque reagis avec ca ou ca comme options...

+ Un menu à plusieurs niveaux (ici 2) est une liste d'éléments (tu as opté pour une structure ol li ) qui contient à son tour une liste d'éléments (les sous-menus)
=> Pourquoi tes 2 listes "principales" ne sont-elles pas dans une liste ?
euh ouais .. mais comment on fais ??

Code html :

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

1
2
3
4
<ul> 
<li><a > Bouton Acceuil<a>
<li> elements 2</li>
</li>

?? un truc dans ce style la ou pas ?

Merci d'avance

**devyan** · 28/04/2009, 15h40

Plutôt comme ceci :

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
<div id="menu">
	<ol> <!-- menu -->
		<li class="navigation">
			<a href="#">Acceuil</a>
			<ol> <!-- sous-menu -->
				<li><a href="#" title="aller à la section 1">item1</a></li>
				<li><a href="#"	title"tatda">tada</a></li>
				<li><a href="#" title="aller à la section 2">item2</a></li>
				<li><a href="#" title="aller à la section 3">item3</a></li>
				<li><a href="#" title="aller à la section 4">item4</a></li>
				<li><a href="#" title="aller à la section 5">item5</a></li>
			</ol>
		</li>
		<li class="navigation">
			<a href="#">S&eacute;curit&eacute;</a>
			<ol> <!-- sous-menu -->
				<li><a href="#" title="widéo">test</a></li>
			</ol>
		</li>
	</ol>
 </div>

**Etienne76** · 28/04/2009, 15h51

merci merci encore un petit detail.... dans mon CSS je fais comment pour modifier comme j'avais mis ....

j'ai essayé mais du coup j'ai une liste sans format quoi... (un peu moche

)

**devyan** · 28/04/2009, 16h49

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
@charset "UTF-8";
/* CSS Document */
 
#menu {
	width:240px;
	height:800px;
	display:block;
	border:2px solid black;
	float:left;
	}
 
#menu ol {
	list-style: none;
	padding: 0;
	line-height: 40px;
	text-align:center;
}

#navigation{
	background-image:url(images/boutonff.png);
	width: 221px;
	height: 41px;
	/*list-style: none;*/
	/*padding: 0;*/
	border:medium black;
	line-height: 40px;
	/*text-align:center;*/
	/*float:left; */
 
	
/*	left: 11px;
	top: 27px;*/
	}
	
.navigation  a{
	background-image:url(images/boutonff.png);
	width: 221px;
	height: 41px;
	display: block;
	}

.navigation a:hover, .navigation a:focus, .navigation a:active{
background-image:url(images/boutonon.png);
}

.navigation ol{
	display:none;
	}
	
.navigation li{
	/*display:none;*/
	background-image:url(images/boutonff.png) ;
	color: #fff ;
	width:221px;
	height:41px;
	/*clear:both;*/
	}
	
.navigation li a {
	display: block ;
	color: #fff ;
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	line-height: 40px ;
	text-align: center ;
	text-decoration: none ;
	width:222px;
	height:41px;
	background-image:none;
	}

/* rend visible le sous-menu */	
.navigation a:hover ol, .navigation a:focus ol, .navigation a:active ol{display:block;}
	
.navigation li a:hover, .navigation li a:focus, .navigation li a:active {
	
	background-image:url(images/boutonon.png);
	text-decoration: underline ;
	width:220px;
	height:40px;
	}

Il y a une erreur dans le html de ma réponse précédente... (je te laisse la trouver ^^)

Menu Full CSS quelques soucis..

CSS

Vue hybride

Discussions similaires

Partager

Partager