Menu deroulant en dessous d'un doc PDF

Version imprimable

Bonjour,

j'ai fait un menu déroulant qui fonctionne correctement sur toutes mes page sauf celles où j'affiche un document pdf, il se retrouve en dessous du document pdf et du coup le menu n'est pas complet et cela empèche la navigation.

Mes pages fonctionnent avec des <Div> et du CSS.

voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12  <Div id=MenuHeadCenter> <?php Include "MenuPrincipal.php" ?> </Div>  <Div id=ContentSMG> <object data="Doc.pdf" type="application/pdf" width="100%" height="100%"> </object> </Div>
je trouve des infos pour les animations flash mais je n'arrive pas à les adapter à mon cas.

Je vous remercie par avance.

18/02/2009, 17h16
beeboo

Salut,
tu veux bien nous montrer le CSS relatif à ce code stp ?
19/02/2009, 09h12
RomainVALERI

Pour gérer les recouvrements / superpositions, essaie déjà d'attribuer des propriétés z-index aux éléments litigieux, histoire de déterminer la "profondeur" toi-même... ça ne résoud pas toujours le problème car il existe certains éléments (par exemple les <select>) qui, dans certains navigateurs, ne respectent pas cette règle (vous avez vu j'ai pas dit "IE nous fait encore ch***" :aie:)

Bonjour,

voici la partie de mon code CSS concerné :
Code:

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 #MenuHeadCenter { Top : 2%; Left : 0%; Right : 0%; Bottom : 0%; Position : absolute; Width : 95%; Height : 30%; Padding-right : 0%; Padding-Left : 0%; Margin-right : 2%; Margin-left : 2%; Overflow : hidden; z-index:2; } #ContentSMG { Top : 20%; Left : 0%; Right : 0%; Bottom : 0%; Position : absolute; Width : 96%; Height : 78%; Padding-right : 0%; Padding-Left : 0%; Margin-right : 2%; Margin-left : 2%; overflow: auto; border: 2px solid; z-index:0; }
Sinon j'ai tenté d'utiliser une iframe, là ça fonctionne, mais le problème maintenant et lors du rafraichissement, une partie de l'iframe masque le haut du document lors de la navigation sur le menu juque là c'est normal, mais après la navigation sur le menu il ne réapparait pas ! Ou alors lorsque l'on force le rafraichissement du navigateur (avec F5) alors l'iframe ne fonctionne plus !

19/02/2009, 10h47
beeboo

Salut,
J'ai un doute quant à la présence de majuscule pour les propriétés, je me demande si elle sont bien interprétées à cause de ça.
19/02/2009, 10h53
gpanpan

Dans le doute je viens de tester en mettant tout en minuscule et le problème reste le même.
19/02/2009, 13h16
gpanpan

1 pièce(s) jointe(s)

Hello,

Bon maitenant en jouant mieux avec z-index et mon iframe j'ai ce que je voulais, sauf qu'après la navigation sur le menu j'ai mon document qui reste toujours masqué (voir image ci-joite). Si vous avez une idée ?
d'avance merci.
Pièce jointe 42018

Citation:

Envoyé par gpanpan

Hello,

Bon maitenant en jouant mieux avec z-index et mon iframe j'ai ce que je voulais, sauf qu'après la navigation sur le menu j'ai mon document qui reste toujours masqué (voir image ci-joite). Si vous avez une idée ?
d'avance merci.
Pièce jointe 42018

Est-ce que ça marche si tu ajoutes un bouton dans un coin (pour exécuter un bout de javascript sur demande) ?
Code:

1 2 3 4 5 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <input type="button" value="Refresh" onclick="$('#ContentSMG ').hide(); $('#ContentSMG ').show(); " />

19/02/2009, 14h03
gpanpan

Non le problème reste !

Merci
19/02/2009, 14h19
cowa

Citation:

Envoyé par gpanpan

Non le problème reste !

Merci

Est-ce qu'il y a une erreur Javascript ?
Et si tu essaies avec l'autre élément ?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<input type="button" value="Refresh" onclick="$('#MenuHeadCenter
').toggle();" />
19/02/2009, 14h26
gpanpan

Non pas d'erreur JS.

j'ai effectivement essayé avec l'autre élément et le problème est toujours là.

C'est l'iframe qui reste, j'ai essayé avec un onmouseover et un onmouseout, mais rien n'y fait !
19/02/2009, 14h48
cowa

Citation:

Envoyé par gpanpan

Non pas d'erreur JS.

j'ai effectivement essayé avec l'autre élément et le problème est toujours là.

C'est l'iframe qui reste, j'ai essayé avec un onmouseover et un onmouseout, mais rien n'y fait !

Tu veux dire que même si tu masques l'iframe avec mon code javascript, elle ne part pas ?
Sinon ce doit être un bug lié au PDF et là je ne vois pas.
19/02/2009, 15h00
gpanpan

Autant pour moi j'ai revu ma copie :aie:
Ton code fonctionne :king:, sauf qu'après les sous menu de mon menu déroulant se trouvent de nouveau derrière le document pdf.
19/02/2009, 15h12
cowa

Citation:

Envoyé par gpanpan

Autant pour moi j'ai revu ma copie :aie:
Ton code fonctionne :king:, sauf qu'après les sous menu de mon menu déroulant se trouvent de nouveau derrière le document pdf.

Tu veux dire que le PDF est affiché au complet de nouveau quand tu masques l'iframe avec mon code ?
Si ton sous-menu est de nouveau derrière, il faut remettre les valeurs de z-index "à la main" (via Javascript). Je peux t'expliquer comment, mais il me faudrait déjà connaitre les balises CSS qui marchent pour ton cas.
19/02/2009, 15h19
gpanpan

je viens de me remttre sur mon problème à temps plein car je devais régler d'autre truc en parallèle. Désolé ! :oops:

Ton code marche impec quand je clique sur le bouton, j'ai bien l'iframe qui est masqué et si je reclique sur le bouton elle reviens et là mon menu fonctionne de nouveau normalement.

Maintenant il faut que je trouve un moyen pour déclencher cette évènement (clique sur le bouton) de façon automatique, sans passé par le bouton, un truc du genre onmouseover.
19/02/2009, 17h17
cowa
Citation:

Envoyé par gpanpan

je viens de me remttre sur mon problème à temps plein car je devais régler d'autre truc en parallèle. Désolé ! :oops:

Ton code marche impec quand je clique sur le bouton, j'ai bien l'iframe qui est masqué et si je reclique sur le bouton elle reviens et là mon menu fonctionne de nouveau normalement.

Maintenant il faut que je trouve un moyen pour déclencher cette évènement (clique sur le bouton) de façon automatique, sans passé par le bouton, un truc du genre onmouseover.

Ah super ! Pas mal pour du code écrit à l'aveugle ;)

Alors il ne te reste plus qu'à faire un
Code:

1 2 <Div id=MenuHeadCenter onmouseout="lecodequivabien()">
Soit sur le div, soit sur un autre élément...