Problème bordure blanche autour d'un flash [Résolu/Fermé]

Signaler
Messages postés
10
Date d'inscription
vendredi 5 septembre 2008
Statut
Membre
Dernière intervention
26 août 2010
-
Messages postés
10
Date d'inscription
vendredi 5 septembre 2008
Statut
Membre
Dernière intervention
26 août 2010
-
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!

3 réponses

Messages postés
784
Date d'inscription
mardi 9 décembre 2003
Statut
Membre
Dernière intervention
19 février 2018
175
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
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
4
Date d'inscription
mercredi 14 avril 2010
Statut
Membre
Dernière intervention
22 avril 2010

Bonjour,

Tu ne peux pas mettre ton image en background?
c'est plus simple non?
Messages postés
10
Date d'inscription
vendredi 5 septembre 2008
Statut
Membre
Dernière intervention
26 août 2010

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 :)