Discussion :

[CyrilD]

Bonjour,

alors mon but est dans le titre, mon problème est que ce ne marche, mais alors pas du tout
Et le problème vient pour moi de mon code CSS mais bon, peut être que je me trompe.

Mon code en question :

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
 
<td width="45%" >
 
      <div style="position: relative; z-index: 2;">
       <a href="#"> <img src="truc.jpg" width="520" height="80" border="0" /> </a>
      </div>   
 
      <div style="position: relative; z-index: 1;">
       <object type="application/x-shockwave-flash" data="flash/<?php echo $ban; ?>" width="520" height="80">
         <param name="movie" value="flash/<?php echo $ban; ?>" />
         <p>Bannière</p>          
       </object>
      </div>
 
    </td>

Donc là , l'image truc devrait se mettre par dessus la bannière avec les z-index mais là, l'image est dessus et l'objet flash dessous, sans 1 mm de superposition.
Quand je mets en position absolute les deux divs, le flash se met par dessus l'image malgré le z-index et ils sortent de la cellule du tableau ou ils sont censés etre affichés.

J'ai pourtant suivis la méthode de plusieurs site pour utiliser le z-index mais là, il y a un gros problème et je ne sais pas d'ou il vient.

Merci de votre aide.

[eckerdecker]

C'est le problème avec les objets flash, pour y palier tu dois indiquer

Code :

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

<param name="wmode" value="transparent" />

[Bisûnûrs]

Code html :

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

1
2
3
4
5
<div style="position:relative">
   <img en position absolute avec un z-index supérieur />
 
   <object en position absolute avec un z-index inférieur></object>
</div>

Ne pas oublier de renseigner les propriétés top et left de l'image et de l'objet.

[CyrilD]

Merci, ca m'a fait avancer mais c'est pas encore parfait ^^

J'ai mis ta ligne de code et quand mon image et l'objet flash sont en position absolute, le z-index marche sauf qu'elles sont en dehors de la cellule de tableau ou elle sont censés rester.

Avec une position relative, l'image et le flash ne se superposent toujours pas.

Aussi, ta ligne a supprimé la couleur de fond de ma bannière, c'est un peu embêtant.

EDIT : je vais tester ta méthode bizûnûrs

[Bisûnûrs]

Et pour que le fond ne disparaisse pas :

Code html :

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

<param name="wmode" value="opaque" />

[eckerdecker]

Je crois que tu n'aura pas le choix, quand tu auras régler les problèmes de placement, si tu veux que du html passe par dessus ton flash tu devras utiliser wmode=transparent, tu n'a qu'à donner une couleur de fond au conteneur de ton objet flash.

Et pour que le fond ne disparaisse pas :

Code html :

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

<param name="wmode" value="opaque" />

Ou alors je dis n'importe quoi ... y'a longtemps que j'ai pas eut à faire ça ^^

[CyrilD]

La propriété opaque marche nickel et le code proposé par bisûnûrs marche très bien aussi.

Je mets mon code final pour ceux que ca peut intéresser :

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
 
<td width="45%" >
 
     <div style="position: relative">
 
      <a href="#"> <img src="images/calque.gif" width="520" height="80" border="0" style="position: absolute; z-index: 2; top: -40px" /> </a>
 
      <object type="application/x-shockwave-flash" data="flash/<?php echo $ban; ?>" width="520" height="80" style="position: absolute; z-index: 1; top: -40px">
        <param name="movie" value="flash/<?php echo $ban; ?>" />
        <param name="wmode" value="opaque" />
        <p>Bannière</p>          
      </object>      
     </div>
 
    </td>

Merci à vous deux en tout cas

[Bisûnûrs]

Attention, tu n'as pas renseigné la propriété left ou la propriété right avec le position:absolute. Donc il se peut (en fait c'est même certain) que le positionnement par défaut soit différent selon le navigateur.

Pour une utilisation cross-browser du positionnement absolu, il faut en plus utiliser left ou right ET top ou bottom.

[CyrilD]

Sous FF et IE, le résultat est similaire en tout cas.

C'est peut etre parce que j'ai mise en forme le tout avec des tableaux