Sujet Précédent Sujet Suivant

Problème affichage menu déroulant en flash

Fermé
norhell - 24 juin 2009 à 18:04
resalut Messages postés 784 Date d'inscription vendredi 26 juin 2009 Statut Membre Dernière intervention 21 janvier 2010 - 10 juil. 2009 à 11:53
Bonjour à tous,
Je suis un petit nouveau en matière de création de site internet
et malgré l'ensemble des tutos et forum présent sur les différents sites
consacrés à la créations de site, je n'ai pas trouvé de réponse à mon problème.
Je m'explique. Le site que je code actuellement en mixte de xhtml/php/css et composé
d'un menu déroulant horizontale classique codé en flash. Or le problème est que lorsque
je l'ajoute à ma page le cadre invisible du menu m'empêche de selectionner le texte et les liens situé dans
le conteneur au dessous... si je ne suis pas très clair regardez cette page et essayer de
cliquer sur le texte du conteneur central, http://the.aurel59.free.fr

voici le code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page d'accueil</title>

<!--[if IE]>
<link rel="stylesheet" href="../style_ie.css" type="text/css" />
<![endif]-->

<!--[if !IE]><-->
<link rel="stylesheet" href="../style.css" type="text/css" />
<!--><![endif]-->

<script type="text/javascript" src="swfobject.js"></script>
</head>

<body>
<center><img src="../img/imageTop.png" alt="Logo technifrance"
width="1050" height="150" /></center>

<!-- Le menu déroulant en flash -->

<div id="anim">
<center><object width="1000" height="240"
type="application/x-shockwave-flash"
data="../img/menu fr.swf">
<param name="movie" value="../img/menu fr.swf" />
<param name="wmode" value="transparent" />
<param name="scalemode" value="exactfit" />
</object></center>
</div>

<!-- La contenaire central -->

<center><div id="contenaire">
<center><div id="centre">
<h1>Bienvenue sur le site de TECHNIFRANCE</h1>
<div class="texte">blablablablablablablablablabla
<br/>blablablablablablablablablablablablablablablablaaaaaaaaaaaaaaaaaaaaaa...
<br/>
<br/>
<br/>
</div>
</div></center>

<center><object width="700" height="200"
type="application/x-shockwave-flash"
data="../Carousel.swf">
<param name="movie" value="../Carousel.swf" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="xmlfile=default.xml"/>
</object></center>

</div></center>


<!-- Code du pied de page avec les liens pour naviguer rapidement -->

<center><div id="bas_de_page">
<a href="../index.php">Accueil,</a>
<a href="../php_fr/societe.php"> la société,</a>
<a href="../php_fr/activites.php"> activités,</a>
<a href="../php_fr/info.php"> les news,</a>
<a href="../php_fr/contact.php"> nous contacter,</a>
<a href="../php_fr/plan_du_site.php"> plan du site,</a>
<a href="../php_fr/acces_employes.php"> espace employés</a>
<br/>
<br/>
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" border="none" height="31" width="88" /></a>

<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="CSS Valide !" />
</a>
</p>
</div></center>

</body>
</html>

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

Voici maintenant le code du css:

body
{
text-align: center;
font-family: Verdana;
margin: 0 auto;
color: #7bb1dd;
font-size: 50px;
background: #004c92;

}

#contenaire
{
width:1020px;
text-align: center;
margin:auto;
z-index:0;
}
#centre /*style du conteneur principal*/
{
margin-top: 70px;
width:600px;
height:auto;
font-size: 15px;
color: #f49a12;
text-align: center;
-moz-border-radius:20px;
border:3px outset #777777;
background:#7bb1dd;

}

#centre a
{
font-size: 15px;
color: #fff;
text-decoration: none;
}

#centre a:hover /*style des liens au passage de la souris dans le conteneur*/
{
text-decoration: underline;
}

#centre ul
{
text-align:justify;
font-size: 10px;
}

#centre ul a
{
font-weight:bold;
font-size:15px;
color:#f49a12;
}

#centre ul li ul a
{
font-weight:bold;
font-size:10px;
color:#fff;
}


#droite
{
margin-top: 70px;
float:right;
font-size: 15px;
color: #f49a12;
text-align: center;
border:3px outset #777777;
background:#7bb1dd;
height:auto;
}

#droite img
{
margin-top:10px
}

#droite a
{
font-size: 15px;
color: #fff;
text-decoration: none;
}

#droite a:hover /*style des liens au passage de la souris dans le conteneur*/
{
text-decoration: underline;
}

a:hover /*style des liens au passage de la souris*/ {
text-decoration: underline;
}

p
{
margin: inherit;
font-size: 10px;
color: #f49a12;
text-align: center;
border:none;
}

p a
{
font-size: 15px;
text-decoration: none;
}
h1 /*style des titres principaux*/ {
font-size: 15px;
color: #f49a12;
display: block;
}
h2 /*Style des titres secondaire*/
{
color: #ccc;
font-size: 10px;
}

.texte /*Style des textes de description*/
{
font-size: 15px;
color: #000000;
}


#bas_de_page /*style du bas de page*/
{
margin: 0;
float:none;
font-size: 10px;
color: #f49a12;
text-align: center;
}

#bas_de_page a /*style des liens en bas de page*/
{
font-size: 15px;
color: #f49a12;
text-decoration: none;
}

#bas_de_page a:hover /*style des liens au passage de la souris*/ {
text-decoration: underline;
}


#anim
{
position:absolute;
float:left;
width:100%;
margin: auto;
text-align: center;
}



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

C'est codé "salement" je suppose mais bon on à tous été un débutant un jour.
Merci de votre aide qui m'est plus qu'indispensable !
A voir également:

14 réponses

Réponse 1 / 14
norhell Messages postés 12 Date d'inscription vendredi 19 juin 2009 Statut Membre Dernière intervention 4 août 2009
10 juil. 2009 à 09:17
Vraiment personne ?
...
0
Réponse 2 / 14
resalut Messages postés 784 Date d'inscription vendredi 26 juin 2009 Statut Membre Dernière intervention 21 janvier 2010 55
10 juil. 2009 à 09:19
il faut que tu definisse le z-index de tes calques et mettres celui du flash au plus haut
0
Réponse 3 / 14
resalut Messages postés 784 Date d'inscription vendredi 26 juin 2009 Statut Membre Dernière intervention 21 janvier 2010 55
10 juil. 2009 à 09:20
ah et j'oubliai z-index ne fonctionne que sur des bloc dont la position est defini
0
Réponse 4 / 14
norhell Messages postés 12 Date d'inscription vendredi 19 juin 2009 Statut Membre Dernière intervention 4 août 2009
10 juil. 2009 à 10:17
En fait mon code a changé depuis le message original, et justement j'avais changé les "position" des blocs et ajouté des "z-index" comme cela (le code html est resté identique par contre). Le problème est que lorsque je baisse le z-index de mon calque anim correspondant à l'animation flash, celui ci passe bien évidement au dessous des autres calques...

Voici le css en espérant trouver une réponse (je galère dessus depuis une semaine ça commence à faire long)

/*---------- Style de la page ----------*/
body
{
text-align: center;
font-family: arial;
height:100%;
margin: 0 auto;
color: #7bb1dd;
background: #fff;
background-image:url(../img/fond.jpg);
background-repeat:repeat-x;
background-position:top center;
}

#page
{
margin-left: auto;
position:relative;
z-index:50;
margin-right: auto;
margin:0 auto;
min-height:768px;
width: 1020px;
text-align: left;
}

/*---------- Style des contenaires flottants ----------*/

#contenaire
{
padding-top:90px;
width:1000px;
text-align: center;
margin:auto;
position:relative;
z-index:2;
}
#centre
{
padding:5px;
width:570px;
position:relative;
z-index:50;
font-size: 12px;
font-family:arial;
color: #f49a12;
text-align: center;
-moz-border-radius:20px;
border:3px outset #777777;
background:#7bb1dd;
height:auto;
}

#centre a
{
font-size: 12px;
color: #fff;
text-decoration: none;
}

#centre a:hover /*style des liens au passage de la souris dans le conteneur*/
{
text-decoration: underline;
}

#centre ul
{
text-align:justify;
font-size: 10px;
}

#centre h3
{
font-size: 12px;
color: #004c92;
font-weight:bold;
font-family: cursive;
}
#centre ul a
{
color:#f49a12;
}

#centre ul li ul a
{
font-weight:bold;
font-size:10px;
color:#fff;
}

.droite
{
margin-bottom:10px;
position:relative;
z-index:50;
float:right;
font-size: 12px;
font-family:arial;
color: #f49a12;
text-align: center;
-moz-border-radius:20px;
border:3px outset #777777;
background:#7bb1dd;
height:auto;
}

.droite ul
{
text-align:justify;
font-size: 10px;
color:#f49a12;
}

.droite ul li
{

font-size: 12px;
color: #004c92;
text-align:left;
font-weight:bold;
font-family: cursive;
}

.droite h2
{
margin-left:20px;
font-size: 12px;
color: #004c92;
text-align:left;
font-weight:bold;
font-family: cursive;
}


.droite img
{
margin-top:10px
}

.droite a
{
font-size: 15px;
color: #fff;
text-decoration: none;
}

.droite a:hover /*style des liens au passage de la souris dans le conteneur*/
{
text-decoration: underline;
}

a:hover /*style des liens au passage de la souris*/ {
text-decoration: underline;
}


#map
{
padding-top:15px;
position:relative;
left:0%;
z-index:100;
font-size: 15px;
color: #f49a12;
text-align: center;
-moz-border-radius:20px;
background:#7bb1dd;
height:auto;
}

/*---------- Style des écritures ----------*/

p
{
font-size: 15px;
color: #004c92;
text-align:left;
font-weight:bold;
font-family: cursive;
}

p a
{
font-size: 15px;
text-decoration: none;
}
h1 /*style des titres principaux*/ {
font-size: 15px;
color: #f49a12;
display: block;
}
h2 /*Style des titres secondaire*/
{
font-size: 15px;
color: #004c92;
text-align:left;
font-weight:bold;
font-family: cursive;
}

.texte /*Style des textes de description*/
{
padding:5px;
font-size: 15px;
color: #000000;
text-align:justify;
text-indent: 20px

}


/*---------- Style du bas de page ----------*/

#bas_de_page /*style du bas de page*/
{
width:1000px;
margin: 0;
float:none;
font-size: 10px;
color: #004c92;
text-align: center;
}

#bas_de_page a /*style des liens en bas de page*/
{
font-size: 15px;
color: #004c92;
text-decoration: none;
}

#bas_de_page a:hover /*style des liens au passage de la souris*/ {
text-decoration: underline;
}


#anim
{
position:absolute;
z-index:100;
left:0px;
width:100%;
margin: auto;
text-align: center;
}

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 14
resalut Messages postés 784 Date d'inscription vendredi 26 juin 2009 Statut Membre Dernière intervention 21 janvier 2010 55
10 juil. 2009 à 10:20
je t'ai dis que z-index ne fonctionne que si tu definis les position
0
Réponse 6 / 14
norhell Messages postés 12 Date d'inscription vendredi 19 juin 2009 Statut Membre Dernière intervention 4 août 2009
10 juil. 2009 à 10:31
Mes position relative sur les mes conteneurs ne suffisent pas la ? De plus, je ne comprends pas la logique, en quoi mettre le calque du flash au plus haut me permettra de selectionner quelquechose plus bas...
Soyez patient :)
0
Réponse 7 / 14
resalut Messages postés 784 Date d'inscription vendredi 26 juin 2009 Statut Membre Dernière intervention 21 janvier 2010 55
10 juil. 2009 à 10:35
désolé j'avais mal lu :x
en fait c'est la taille du flash qui est trop grande donc met son z-index au minimum (à 1) :x
0
Réponse 8 / 14
resalut Messages postés 784 Date d'inscription vendredi 26 juin 2009 Statut Membre Dernière intervention 21 janvier 2010 55
10 juil. 2009 à 10:38
je viens de reflechir la solution que je t'ai donné va fonctionné mais les liens dans le flash ne seront plus cliquable( etant donné que le menu invisible sera en dessous des calques du textes.
je pense qu'il serait plus sage de faire un menu déroulant type javascript
0
Réponse 9 / 14
norhell Messages postés 12 Date d'inscription vendredi 19 juin 2009 Statut Membre Dernière intervention 4 août 2009
10 juil. 2009 à 10:46
Efffectivement plus rien n'est cliquable :/ a la base je l'avais codé en mix css html mais évident IE affichait ça n'importe comment d'où mon choix de passer au flash. Par contre il existe des tuto partout sur le net permettant de construire ce type de menu mais absolument rien vis à vis de ce genre de problème... Sinon je pensais a une solution de secours : bidouiller des boutons invisible qui lors du rollOver qui change le z-index de l'anim quand on passe dessus. Cependant, je ne sais pas du tout quoi mettre au niveau du code dans mon action...
0
Réponse 10 / 14
resalut Messages postés 784 Date d'inscription vendredi 26 juin 2009 Statut Membre Dernière intervention 21 janvier 2010 55
10 juil. 2009 à 10:48
c'est ca que tu veux ?
(passe sous ie)
http://sitastress.free.fr/testjs/essai.html

(au pire on peut l'adapter)
0
Réponse 11 / 14
norhell Messages postés 12 Date d'inscription vendredi 19 juin 2009 Statut Membre Dernière intervention 4 août 2009
10 juil. 2009 à 11:18
C'est l'idée mais en horizontale et avec du texte ou des liens sous ton menu. Lorsque l'on deroulerait le menu, le texte serait donc caché. Mais bon je ne comprends pas comment les sites avec des menus déroulants en flash font...
0
Réponse 12 / 14
resalut Messages postés 784 Date d'inscription vendredi 26 juin 2009 Statut Membre Dernière intervention 21 janvier 2010 55
10 juil. 2009 à 11:37
j'avais compris tiens une autre version :)
http://simplycode.free.fr/ on peut aussi l'adapter si ta besoin
0
Réponse 13 / 14
norhell Messages postés 12 Date d'inscription vendredi 19 juin 2009 Statut Membre Dernière intervention 4 août 2009
10 juil. 2009 à 11:44
C'est ça ! me reste plus qu'à me mettre au boulot et rajouter des images etc a la place des textes.
Merci !
0
Réponse 14 / 14
resalut Messages postés 784 Date d'inscription vendredi 26 juin 2009 Statut Membre Dernière intervention 21 janvier 2010 55
10 juil. 2009 à 11:53
jpeut t aider au besoin ;)
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
adele
marine carnet-pantier -
irongege -

2 réponses
Leboncoin : j'ai un problème d'affichage
maria1508 -
msi123 -

5 réponses