Menu horizontal et PDF

fredroq · 16/12/2011, 15h34

Bonjour,

Je m'adresse à vous car j'ai fait un le tour de presque tout et je ne trouve pas de solution
Comme beaucoup j'ai le menu déroulant derrière le ....PDF. J'ai encapsulé le pdf dans iframe et le menu passe derrière, j'ai essayé avec Objet c'est pareil. ce qui m’épate , c'est que le même iframe avec un site fonctionne trés bien. je suis donc un perdu par mon incompétence.
voici le site en question/
escalade
Login : invite
Mdp : invite

ps ne fonctionne correctement qu'avec firefox

je réglerai le problème IE aprés

voici un bout de fichier 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
44
45
46
47
48
49
50
51
52
53
54
<!-- Début du menu horizontal -->
					<div id="menu">
						<ul class="niveau1">
						  <li><a href="http://escalade.asso.sport.free.fr/Escalade/">Accueil</a></li>
						  <li class="sousmenu"><a href="http://escalade.asso.sport.free.fr/Escalade/Photo.html">Photos</a>
							<ul class="niveau2">
							  <li><a href="http://escalade.asso.sport.free.fr/escalade_vallon_sourn_08_octobre_2011/index">Vallon sourn 08 octobre 2011</a></li>
							  <li><a href="http://escalade.asso.sport.free.fr/Escalade_CARCES_BRAUCH_23_octobre_2011/index">Carces 23 octobre 2011</a></li>
							  <li><a href="#">Coudon 20 novembre 2011</a></li>
							  <li><a href="#">Nd Fenouillet 4 décembre 2011</a></li>
							</ul>
						  </li>
						  <li class="sousmenu"><a href="http://escalade.asso.sport.free.fr/Escalade/fiches.html">Fiches Techniques</a>
							<ul class="niveau2">
								<li class="sousmenu"><a href="http://escalade.asso.sport.free.fr/Escalade/materiel.html">Matèriel</a>
									<ul class="niveau3">
									<li><a href="http://escalade.asso.sport.free.fr/Escalade/fte1.html">Le Baudrier</a></li>
									<li><a href="http://escalade.asso.sport.free.fr/Escalade/fte2.html">L'équipement</a></li>
									</ul>
								</li>
								<li class="sousmenu"><a href="http://escalade.asso.sport.free.fr/Escalade/securite.html">Sécurité</a>
									<ul class="niveau3">
									<li><a href="http://escalade.asso.sport.free.fr/Escalade/fts1.html">Le noeud de 8</a></li>
									<li><a href="http://escalade.asso.sport.free.fr/Escalade/fts2.html">L'assurage en 5 temps</a></li>
									<li><a href="http://escalade.asso.sport.free.fr/Escalade/fts3.html">La sécurité en escalade</a></li>
									<li><a href="http://escalade.asso.sport.free.fr/Escalade/fts4.html">Le langage</a></li>
									<li><a href="http://escalade.asso.sport.free.fr/Escalade/fts5.html">L'assurage dynamique</a></li>
									</ul>
								</li>
								<li class="sousmenu"><a href="#">Gestuelle</a></li>
								<li class="sousmenu"><a href="#">Echauffement</a></li>
							</ul>
						  </li>
						  <li><a href="http://escalade.asso.sport.free.fr/Escalade/agenda.html">Agenda</a></li>
						  <li><a href="http://escalade.asso.sport.free.fr/Escalade/ffcam.html">FFCAM</a></li>
						  <li><a href="http://escalade.asso.sport.free.fr/Escalade/asso_sport.html">A l'Asso du Sport</a></li>
						  <li><a href="http://escalade.asso.sport.free.fr/Escalade/edito.html">Edito</a></li>
						  <li><a href="http://escalade.asso.sport.free.fr/Escalade/actu.html">Actualité</a></li>
						</ul>
					</div>
					<!-- Fin du menu horizontal -->
 
					<div id="texte"><div id="overflow">
 
						<!-- Début de la zone de texte -->
 
						<p>
 
						<iframe  src="http://escalade.asso.sport.free.fr/fiches_techniques/Fiche_Technique_Equipement_1.pdf"align= "center" width="930" height="800"></iframe>
 
						</p><br />
						<!-- Fin de la zone de texte -->
 
					</div></div>

----------------------------------------------------
un bout du fichier 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
/* /////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////          TEXTE          ///////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////// */
 
#texte 
{
	padding : 20px;
	text-align : justify;
	font-size : 15px;
}
 
p
{
	margin-top : 0px;
}
 
h1
{
	font-size : 19px;
	margin-top : 0px;
}
 
h2
{
	font-size : 16px;
	margin-top : 0px;
}
 
a
{
	color : #288de8;
	text-decoration : none;
}
 
a:hover
{
	color : #ff8000;
}
 
#overflow
{
	overflow : hidden;
}
 
 
/* /////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////     MENU HORIZONTAL     ///////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////// */
 
body {behavior: url(csshover.htc);}
div#menu { height:50px; background: url("MH50.png");}
div#menu a {color:white; font-family: Comic Sans MS;font-size : 15px;}
div#menu ul {padding: 0; margin:0px; background: url("MH50.png"); text-align:center;}
div#menu ul {position: absolute;}
div#menu li {background:url("MH50.png")}
div#menu li:hover {background: url("MH50_hover.png")}
div#menu a:hover{color:#c8c8c8}
div#menu li.sousmenu:hover,
div#menu li.niveau1:hover,
div#menu li.niveau2:hover{background: url("MH50_hover.png")}
/* rejout couleur de fond */
div#menu li.sousmenu {background-color:url("MH50.png");}
/* rajout pr pour fleche direction bas et couleur de fond*/
/*div#menu li.plop { background:url(fleche2.gif) 95% 50% no-repeat #CCCCCC;}
 
/* une petite bordure en top*/
div#menu ul li {position:relative; list-style: none; float:left; border-top:1px solid;}
 
div#menu ul ul {position: absolute;display:none; width:120px;}
div#menu li a {text-decoration: none; padding: 4px 0 4px; display:block;width:120px;}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu ul.niveau3 {top:-1px; left: 120px;position:absolute;}
 
/* rajout de couleur de fond et de survol */
div#menu ul.niveau3 li { background: #4D4FF;}
div#menu ul.niveau3 li:hover { background: #99CC00;}
div#menu a.niveau3 ul:hover {color:#0000FF}
 
 
/* /////////////////////////////////////////////////////////////////////////////////////////// */

et le code source page

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<!-- Ce site a été créé avec <a href="http://www.creer-son-website.fr/" target="_blank">http://www.creer-son-website.fr/</a> -->
		<title>A l'Asso du sport - ESCALADE - Club Alpin Français</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design/style.css" />
		<!--[if IE 6]><link rel="stylesheet" media="screen" type="text/css" title="Design" href="design/ie6.css" /><![endif]-->
	</head>
 
	<body>
 
		<div id="conteneur">
 
			<div id="CHG"></div><div id="CHD"></div><div id="BH"></div>
			<div id="BG"><div id="BD">
 
				<div id="corps">
 
					<div id="banniere"></div>
 
					<!-- Début du menu horizontal -->
					<div id="menu">
						<ul class="niveau1">
						  <li><a href="http://escalade.asso.sport.free.fr/Escalade/">Accueil</a></li>
						  <li class="sousmenu"><a href="http://escalade.asso.sport.free.fr/Escalade/Photo.html">Photos</a>
							<ul class="niveau2">
							  <li><a href="http://escalade.asso.sport.free.fr/escalade_vallon_sourn_08_octobre_2011/index">Vallon sourn 08 octobre 2011</a></li>
 
							  <li><a href="http://escalade.asso.sport.free.fr/Escalade_CARCES_BRAUCH_23_octobre_2011/index">Carces 23 octobre 2011</a></li>
							  <li><a href="#">Coudon 20 novembre 2011</a></li>
							  <li><a href="#">Nd Fenouillet 4 décembre 2011</a></li>
							</ul>
						  </li>
						  <li class="sousmenu"><a href="http://escalade.asso.sport.free.fr/Escalade/fiches.html">Fiches Techniques</a>
							<ul class="niveau2">
 
								<li class="sousmenu"><a href="http://escalade.asso.sport.free.fr/Escalade/materiel.html">Matèriel</a>
									<ul class="niveau3">
									<li><a href="http://escalade.asso.sport.free.fr/Escalade/fte1.html">Le Baudrier</a></li>
									<li><a href="http://escalade.asso.sport.free.fr/Escalade/fte2.html">L'équipement</a></li>
									</ul>
								</li>
								<li class="sousmenu"><a href="http://escalade.asso.sport.free.fr/Escalade/securite.html">Sécurité</a>
 
									<ul class="niveau3">
									<li><a href="http://escalade.asso.sport.free.fr/Escalade/fts1.html">Le noeud de 8</a></li>
									<li><a href="http://escalade.asso.sport.free.fr/Escalade/fts2.html">L'assurage en 5 temps</a></li>
									<li><a href="http://escalade.asso.sport.free.fr/Escalade/fts3.html">La sécurité en escalade</a></li>
									<li><a href="http://escalade.asso.sport.free.fr/Escalade/fts4.html">Le langage</a></li>
									<li><a href="http://escalade.asso.sport.free.fr/Escalade/fts5.html">L'assurage dynamique</a></li>
 
									</ul>
								</li>
								<li class="sousmenu"><a href="#">Gestuelle</a></li>
								<li class="sousmenu"><a href="#">Echauffement</a></li>
							</ul>
						  </li>
						  <li><a href="http://escalade.asso.sport.free.fr/Escalade/agenda.html">Agenda</a></li>
 
						  <li><a href="http://escalade.asso.sport.free.fr/Escalade/ffcam.html">FFCAM</a></li>
						  <li><a href="http://escalade.asso.sport.free.fr/Escalade/asso_sport.html">A l'Asso du Sport</a></li>
						  <li><a href="http://escalade.asso.sport.free.fr/Escalade/actu.html">Edito</a></li>
						  <li><a href="http://escalade.asso.sport.free.fr/Escalade/actu.html">Actualité</a></li>
						</ul>
					</div>
					<!-- Fin du menu horizontal -->
 
					<div id="texte"><div id="overflow">
 
						<!-- Début de la zone de texte -->
 
						<p>
 
						<iframe  src="http://escalade.asso.sport.free.fr/fiches_techniques/Fiche_Technique_Equipement_1.pdf"align= "center" width="930" height="800"></iframe>
 
						</p><br />
						<!-- Fin de la zone de texte -->
 
					</div></div>
 
 
 
				</div>
 
			</div></div>
			<div id="CBG"></div><div id="CBD"></div><div id="BB"></div>
 
		</div>
 
	</body>
</html>

------------------------------------------------------------

Si quelqu'un peux me dépatouiller, çà serait vraiment sympa
je dois dire que je tourne en rond depuis quelques jours
j'ai essayé z-index certainement pas au bon endroit mais coincé par la position : absolute du menu
j'ai essayé le pdf en swf , le pdf flipbook

au secours!!!!!

merci d'avance

a+
fred

Emyleen · 20/12/2011, 11h11

Bonjour!

En fait ton problème peut se corriger avec la propriété z-index.

Comme je n'ai pas tout ton code, je t'ai refais un exemple :

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
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>A l'Asso du sport - ESCALADE - Club Alpin Fran&ccedil;ais</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design/style.css" />
<!--[if IE 6]><link rel="stylesheet" media="screen" type="text/css" title="Design" href="design/ie6.css" /><![endif]-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	width: 1000px;
	margin: auto;
}
header {
	height: 150px;
}
nav {
	height: 50px;
	z-index: 100;
}
nav a {
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
	line-height: 40px;
	font-size: 16px;
	padding: 5px;
}
.niveau1 {
	display: inline-block;
    list-style: none outside none;
    position: relative;
    z-index: 101;
	min-height: 40px;
	background-color: #333;
}
.niveau1 li {
	display: inline-block;
	min-height: 40px;
}
.niveau1 li a {
	display: inline-block;
	min-height: 40px;
}
.niveau1 li:hover {
	background-color: #666;
}
.niveau1 li:hover > .niveau2 {
	display: block;
}
.niveau2 {
	background-color: #666;
    display: none;
    position: absolute;
    width: 150px;
    z-index: 102;
}
.niveau2 li {
	display: block;
}
.niveau2 li:hover {
	background-color: #999;
}
.niveau2 li:hover > .niveau3 {
	display: block;
}
.niveau3 {
	background-color: #999;
    display: none;
    left: 150px;
    position: absolute;
    top: 0;
    width: 150px;
    z-index: 103;
}
.niveau3 li {
	display: block;
}
.niveau3 li:hover {
	background-color: #CCC;
}
#contenu {
	position: relative;
	z-index: 1;
	text-align: center;
}
</style>
</head>
 
<body>
	<header></header>
    <nav>
    	<ul class="niveau1">
        	<li><a href="#" title="">Lien de niveau 1</a>
            	<ul class="niveau2">
                	<li><a href="#" title="">Lien de niveau 2</a>
                        <ul class="niveau3">
                        	<li><a href="#" title="">Lien de niveau 3</a></li>
                            <li><a href="#" title="">Lien de niveau 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#" title="">Lien de niveau 2</a></li>
                    <li><a href="#" title="">Lien de niveau 2</a></li>
                </ul>
            </li>
            <li><a href="#" title="">Lien de niveau 1</a></li>
            <li><a href="#" title="">Lien de niveau 1</a></li>
        </ul>
    </nav>
    <div id="contenu">
    	<iframe  src="http://escalade.asso.sport.free.fr/fiches_techniques/Fiche_Technique_Equipement_1.pdf"align= "center" width="930" height="800"></iframe>
    </div>
    <footer></footer>
</body>
</html>

En espérant t'avoir aidé

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email