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 ^^)

**Etienne76** · 28/04/2009, 19h40

Envoyé par devyan

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

je l'ai trouvé

merci beaucoup pour ton aide

l'erreur est au niveau du <li><a href="#" title"tatda">tada</a></li>

il manque le "="

**Etienne76** · 19/05/2009, 15h03

J'ai pas mal bosser sur ce site.. néanmoins il me reste un probleme majeur...

Je dois respecter la charte graphique... qui est vraisemblement laide a mon gout (tres tres rouge.. vous savez la boite qui gere des grues rouges la... avec un monsieur tres tres vieux mort il n'y a pas tres longtemps...bref ce n'est pas la question

)

j'ai donc réécrit pas mal de chose : ca me donne ca:

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
#Nav {
padding: 0;
list-style: none;
margin: 6px;
}
 
#Nav img {
	width: 90%;
	}
 
#Nav li {
width: 30%;
background: #f10;
margin: 0px 0 0 0px;
float: left;
padding: 0;
text-align: center;
z-index: 1;
position:relative;
}
#Nav li a {
display: block;
background-color: #f00;
color: white;
text-decoration: none;	
margin: 0; 
padding: 3px;
z-index: 1;
position:relative;
}
#Nav li a:hover,#Nav li a:active {
display: block;
background-color: #000;
color: white;
text-decoration: underline;	
margin: 0;
padding: 3px;
text-align: center;
}
.Menu {
padding: 0;
list-style: none;
display: none;
}
.Content{
top: 200px;
padding: 0;
width:90%;
height:70%;
float: left;
z-index: -1;
position: absolute;
}

PHP de index.php

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
<html>
<head>
    <title>Accueil &amp; S&eacute;curit&eacute;</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<style type="text/css" ></style>	
	<link href="style.css" type="text/css" rel="stylesheet"></link>
	<script src="jquery.js" type="text/javascript"></script>
	<script src="menu.js" type="text/javascript"></script>
</head>
<body>	
<?php include('menu.php'); ?>
<div class="Content">
 
 <!--<object data="/pdf/securite/PolitiqueQualite.pdf" type="application/pdf" width="100%" height="100%"></object>-->
 <p> Bienvenue sur la Normandie</p>
  <p>&nbsp;</p>
  <p> Cette version num&eacute;rique de l'Accueil Sécurité necessite Internet Explorer 7 ou Firefox 3</p>
  <p>
    <a href="utilitaires/IE7.exe"><img src="/images/ie7.jpg" width="336" height="123" class="img"/></a>
      <a href="utilitaires/Firefox.exe"><img src="images/firefox3.jpg" width="364" height="123" /></a>  </p>
</div>
 
</body>
</html>

le include 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
	   <div>
	   	<ul id="Nav">
		<img src="images/image1.jpg" />
		<li>
			Accueil
			<ul class="Menu">
				<li><a href="index.php">Home</a></li>
            	<li><a href="video.php" >Vid&eacute;o</a></li>
				<li><a href="ref57.php" >Référence 57</a></li>
			</ul>
		</li>
 
		<li>
			S&eacute;curit&eacute;
			<ul class="Menu">
				<li><a href="charte.php">Charte</a></li>	
          		<li><a href="qualite.php">Qualit&eacute;</a></li>
          		<li><a href="objectifs.php">Objectifs</a></li>
         		<li><a href="DocUnique.php">Document Unique</a></li>
        		<li><a href="Minutepon.php">Minute Ponpon</a> </li>    	
        		<li><a href="bonpratique.php">Bonnes Pratiques</a> </li>      	
        		<li><a href="plan.php">Plan de circulation</a>	</li>	
				<li><a href="Regle1.php">Regle 1</a></li>			
				<li><a href="Regle2.php">Regle 2</a></li>			
				<li><a href="Regle3.php">Regle 3</a></li>			
				<li><a href="Regle4.php">Regle 4</a></li>	 		
				<li><a href="Regle5.php">Regle 5</a></li>
			</ul>
		</li>
		<li>
			Accueil
			<ul class="Menu">
				<li><a href="9001.php" title="Certificat ISO 9001">Certificat ISO 9001</a></li>
                <li><a href="" title="">Item 3.2</a></li>
				<li><a href='#' title="">Item 4.1</a></li>
			</ul>
		</li>
	</ul>
 
</div>

Le JS

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
var obj = null;
 
function checkHover() {
	if (obj) {
		obj.find('ul').fadeOut('fast');	
	} //if
} //checkHover
 
$(document).ready(function() {
	$('#Nav > li').hover(function() {
		if (obj) {
			obj.find('ul').slideUp('fast');
			obj = null;
		} //if
 
		$(this).find('ul').slideDown('fast');
	}, function() {
		obj = $(this);
		setTimeout("checkHover()",0); // si vous souhaitez retarder la disparition, c'est ici
	});
});

Et voila voila...

vous allez me dire ou est le probleme...
le probleme est : Le PDF ... en effet on me demande de pouvoir le mettre a jour meme si je suis absent etc etc ... un truc simple quoi.
Les utilisateur de ce site intranet ont tous une imprimante PDF sur leur poste... donc le choix du pdf est la en gros le site ne sert que d'interface avec les fichiers present sur le serveur ( 2 dossier images et pdf )
mon menu fonctionne bien meme sur ie6 je suis content de moi sur ce point, mais quand je veux afficher un pdf dans

Code :

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

<div class='Content'>

le menu apparait en dessous du PDF meme avec un z-index a -1 etc etc ..
existe t il une solution pour convertir a la volé (en php je pense.. ) un pdf en code HTML ?
en esperant avoir été clair...