Problème bordure blanche autour d'un flash

Résolu

peexstudio Messages postés 10 Date d'inscription Statut Membre Dernière intervention -
peexstudio Messages postés 10 Date d'inscription Statut Membre Dernière intervention - 27 avril 2010 à 19:10

Bonsoir à tous, je suis entrain de bricoler mon code. Enfaite l'idée c'était d'utiliser une image que je transforme en block et que duplique en "reapeat-x". Je lui attribue le z-index:-1; pour qu'il reste en arrière plan.
Je souhaite ajouter par dessus des boutons de menu.

Alors voila, j'ai un ancêtre englobant tout un tas de parents, mais normalement, si je transforme cet ancêtre en block et que je lui attribue le z-index:1; cela devrait aider à le placer au dessus de l'image du haut (en-tête), non?

Code : HTML

<!--Header (Menus)-->    
      <img src="http://peexstudio.fr/aa.jpg" alt="barre de menu" id="en_tete" > 
     
        <ul id="skyline"> 

          <li id="panel1b"> 
            <a href="http://peexstudio.fr/fr/accueil.html"></a> 
          </li> 
  
          <li id="panel2b"> 
            <a href="http://peexstudio.fr/fr/presentation.html"></a> 
          </li> 
        
          <li id="panel3b"> 
            <a href="http://peexstudio.fr/fr/portfolio.html"></a> 
          </li> 

        
          <li id="panel4b"> 
            <a href="http://peexstudio.fr/fr/nosservices.html"></a> 
          </li> 
  
          <li id="panel5b"> 
            <a href="http://peexstudio.fr/fr/nouscontacter.html"></a> 
          </li> 
        
        </ul>

et la partie CSS qui leur est attribué:

Code : CSS

#en_tete{ 
 display: block; 
 width: 100%; 
 height:200px; 
 background-repeat:repeat-x; 
 padding-top:30px; 
 z-index: -1; 
} 
    
 #skyline { 
 display: block; 
 width: 893px; 
 height: 79px; 
 background: url(http://peexstudio.fr/barre_menu.png); 
 position: relative; 
 margin: 0 auto; 
 z-index: 1; 
} 

#skyline li {border: none; padding: 0; list-style: none; position: absolute;  top: 0;} 

#skyline li, #skyline a {border: none; height: 79px; display: block;} 
#panel1b {border: none; left: 0; width: 131px;} 
#panel2b {border: none; left: 131px; width: 201px;} 
#panel3b {border: none; left: 332px; width: 145px;} 
#panel4b {border: none; left: 477px; width: 195px;} 
#panel5b {border: none; left: 674px; width: 220px;} 

#panel1b a:hover { 
   background: transparent url(http://peexstudio.fr/barre_menu_hover.png) 0 0px no-repeat; 
   border: none 
} 
#panel2b a:hover { 
   background: transparent url(http://peexstudio.fr/barre_menu_hover.png) -131px 0px no-repeat; 
   border: none 
} 
#panel3b a:hover { 
   background: transparent url(http://peexstudio.fr/barre_menu_hover.png) -332px 0px no-repeat; 
   border: none 
} 
#panel4b a:hover { 
   background: transparent url(http://peexstudio.fr/barre_menu_hover.png) -477px 0px no-repeat; 
border: none 
} 
#panel5b a:hover { 
   background: transparent url(http://peexstudio.fr/barre_menu_hover.png) -674px 0px no-repeat; 
   border: none 
}

J'ai beau chercher je ne trouves pas la solution, normalement ma "skyline" contenant tout les parents devrait pouvoir se placer au dessus de l'image block "en_tête" non?

Pour vous donner un aperçu de se que sa doit faire voici le lien de mon site: http://peexstudio.fr/fr/accueil.html

Voila voila en espérant avoir quelques éclaircissements, merci à vous!

Afficher la suite

A voir également:

Problème bordure blanche autour d'un flash
Flash drive tester - Télécharger - Divers Utilitaires
Adobe flash player - Télécharger - Divers Web & Internet
Supprimer page blanche word - Guide
Bordure de page word - Guide
Google earth autour de moi - Guide

3 réponses

Réponse 1 / 3

Angelneonizz Messages postés 788 Date d'inscription Statut Membre Dernière intervention 137

Salut,

je ne suis pas sur que le z-index peut prendre une valeur négative.

essais en mettant ton block à 1 et ton menu à 2

Réponse 2 / 3

clemssouille Messages postés 4 Date d'inscription Statut Membre Dernière intervention

Bonjour,

Tu ne peux pas mettre ton image en background?
c'est plus simple non?

Réponse 3 / 3

peexstudio Messages postés 10 Date d'inscription Statut Membre Dernière intervention

Bonsoir à tous, j'ai presque réussi à refaire tout ça (avec le conseil de clemssouille et le background) car c'était pas propre mais j'ai un autre petit soucis ^^

J'ai créer une feuille de style pour tout les navigateurs sauf IE. Et une autre reservé à IE même.
Pourquoi? parce que l'affichage diffère selon les deux navigateurs principaux (firefox et IE).

J'ai crée une feuille de style qui ce nomme: "style2".
Là j'ai fais la mise en page correctement selon l'affichage de Firefox.

j'ai créé ensuite une autre feuille de style nommé: "style_ie".
J'ai modifié la mise en page pour qu'il s'affiche correctement sur IE.

Voila qui est fait et j'ai mis se qu'il fallait au niveau du code html.

PROBLÈME: Durant l'aperçu sur Firefox, la feuille de style qui lui est approprié est correctement chargé. Cependant lorsque j'ouvre ce même site sur IE, sa feuille de style n'est pas chargé... Par défaut j'ai comme l'impression que c'est "style2" (style pour mozilla etc...) qui est chargé.

Pourquoi? Ais-je fais quelques chose qu'il ne fallait pas?

Voici le code html:

 
<html> 
<head> 
    <title>Peexstudio | A new glance in the graphic work</title> 
    <link rel="icon" type="image/x-icon" href="http://peexstudio.fr/favicon.png" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <meta name="description" content="Réalisation de travaux divers et variés dans le domaine de la communication graphique." /> 
    <meta name="keywords" content="design, peexstudio, pinto, gobelins, graphique" /> 
    <link href="style2.css" rel="stylesheet" type="text/css" /> 

</head> 

<body background="http://peexstudio.fr/aa.jpg" > 

<!--Flash EQUALIZER--> 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="72" height="29" align="right" id="FlashID"> 
<param name="movie" value="http://peexstudio.fr/fr/Equalizer_peexstudio.swf"/> 
            <param name="quality" value="high"/> 
            <param name="wmode" value="opaque"/> 
            <param name="swfversion" value="9.0.45.0"/> 
            <!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. --> 
            <param name="expressinstall" value="Scripts/expressInstall.swf"/> 
            <!-- La balise <object> suivante est destin_e aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. --> 

            <object data="http://peexstudio.fr/fr/Equalizer_peexstudio.swf" type="application/x-shockwave-flash" width="72" height="29" align="right"> 
              <param name="quality" value="high"/> 
              <param name="wmode" value="opaque"/> 
              <param name="swfversion" value="9.0.45.0"/> 
              <param name="expressinstall" value="Scripts/expressInstall.swf" /> 
              <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. --> 

              <div> 
                <h4>Le contenu de cette page nécessite une version plus récente d'Adobe Flash Player.</h4> 

                <p><a href="https://get.adobe.com/flashplayer/"><img src="https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p> 

              </div> 
            </object> 
         </object> 
          
<p><img src="Peexstudio V2 (AVRIL 2010)/logo.jpg" width="313" height="106" id="logo"></p> 

      <div class="c3"> 
      <ul id="skyline"> 

          <li id="panel1b"> 
            <a href="http://peexstudio.fr/fr/accueil.html"></a> 
          </li> 
  
          <li id="panel2b"> 
            <a href="http://peexstudio.fr/fr/presentation.html"></a> 
          </li> 
     
          <li id="panel3b"> 
            <a href="http://peexstudio.fr/fr/portfolio.html"></a> 
          </li> 

     
          <li id="panel4b"> 
            <a href="http://peexstudio.fr/fr/nosservices.html"></a> 
          </li> 
  
          <li id="panel5b"> 
            <a href="http://peexstudio.fr/fr/nouscontacter.html"></a> 
          </li> 
     
        </ul> 
     </div> 


<!--[if IE]> 
<link rel=&quot;stylesheet&quot; href=&quot;http://peexstudio.fr/fr/style_ie.css&quot; type=&quot;text/css&quot; /> 

      <div class=&quot;c3&quot;> 
      <ul id=&quot;skyline&quot;> 

          <li id=&quot;panel1b&quot;> 
            <a href=&quot;http://peexstudio.fr/fr/accueil.html&quot;></a> 
          </li> 
  
          <li id=&quot;panel2b&quot;> 
            <a href=&quot;http://peexstudio.fr/fr/presentation.html&quot;></a> 
          </li> 
     
          <li id=&quot;panel3b&quot;> 
            <a href=&quot;http://peexstudio.fr/fr/portfolio.html&quot;></a> 
          </li> 

     
          <li id=&quot;panel4b&quot;> 
            <a href=&quot;http://peexstudio.fr/fr/nosservices.html&quot;></a> 
          </li> 
  
          <li id=&quot;panel5b&quot;> 
            <a href=&quot;http://peexstudio.fr/fr/nouscontacter.html&quot;></a> 
          </li> 
     
        </ul> 
     </div> 
<![endif]--> 

        
</body> 


</html>

Et voici le code css (style2) si sa peut servir:

 
body { 
color: white; 
background-color:black; 
background-repeat: repeat-x; 
outline-style:none; 
margin: 0; 
} 

 div.c3 {position: absolute; width: 100%; margin:auto; text-align: center; margin-top: -15.5px;} 

#logo 
{ 
width: 313.5px; 
position: relative; 
z-index: 1; 
display : inline; 
border: 0; 
outline-style:none; 
left: 50%; 
margin-left: -145px; 
} 

#FlashID 
{ 
margin-right: 10px; 
margin-top: 10px; 
} 

#skyline { 
 width: 893px; 
 height: 79px; 
 background: url(http://peexstudio.fr/barre_menu.png); 
 padding: 0; 
 position: relative; 
 border: none; 

} 
#skyline li {border: none; padding: 0; list-style: none; position: absolute;  top: 0;} 

#skyline li, #skyline a {border: none; height: 79px; display: block; } 
#panel1b {border: none; left: 0; width: 131px;} 
#panel2b {border: none; left: 131px; width: 201px;} 
#panel3b {border: none; left: 332px; width: 145px;} 
#panel4b {border: none; left: 477px; width: 195px;} 
#panel5b {border: none; left: 674px; width: 220px;} 

#panel1b a:hover { 
   background: transparent url(http://peexstudio.fr/barre_menu_hover.png) 0 0px no-repeat; 
   border: none 
} 
#panel2b a:hover { 
   background: transparent url(http://peexstudio.fr/barre_menu_hover.png) -131px 0px no-repeat; 
   border: none 
} 
#panel3b a:hover { 
   background: transparent url(http://peexstudio.fr/barre_menu_hover.png) -332px 0px no-repeat; 
   border: none 
} 
#panel4b a:hover { 
   background: transparent url(http://peexstudio.fr/barre_menu_hover.png) -477px 0px no-repeat; 
border: none 
} 
#panel5b a:hover { 
   background: transparent url(http://peexstudio.fr/barre_menu_hover.png) -674px 0px no-repeat; 
   border: none 
} 

 #texte 
  { 
  padding-top: 50px; 
  font-family: Arial, Verdana, serif; 
  font-size: x-small; 
  color: white; 
  }

Merci à tous,
PS: j'ai ré-intitulé mon premier poste car le problème diffère :)

Votre réponse