Sujet Précédent Sujet Suivant

Problème bordure blanche autour d'un flash

Résolu/Fermé
peexstudio Messages postés 10 Date d'inscription vendredi 5 septembre 2008 Statut Membre Dernière intervention 26 août 2010 - Modifié par peexstudio le 27/04/2010 à 22:53
peexstudio Messages postés 10 Date d'inscription vendredi 5 septembre 2008 Statut Membre Dernière intervention 26 août 2010 - 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!
A voir également:

3 réponses

Réponse 1 / 3
Angelneonizz Messages postés 784 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
22 avril 2010 à 12:54
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
Réponse 2 / 3
clemssouille Messages postés 4 Date d'inscription mercredi 14 avril 2010 Statut Membre Dernière intervention 22 avril 2010
22 avril 2010 à 14:09
Bonjour,

Tu ne peux pas mettre ton image en background?
c'est plus simple non?
0
Réponse 3 / 3
peexstudio Messages postés 10 Date d'inscription vendredi 5 septembre 2008 Statut Membre Dernière intervention 26 août 2010
Modifié par peexstudio le 27/04/2010 à 19:11
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 :)
0

Discussions similaires

Transparence en tete et bas de page
Sabrina -
sabrina -

8 réponses
Facebook : page blanche
Véro -
athina -

287 réponses
IMAGE BLANCHE
LaSuperCoco -
LaSuperCoco -

7 réponses