Background CSS et effet hover sur mon menu

---

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

Code: Tout sélectionner

<!--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

Code: Tout sélectionner

#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 esperant avoir quelques éclaircissements, merci à vous!

---

Bonjour et bienvenue,

Je ne suis pas sur d'avoir compris ce que tu cherchais à faire.
Tu aurais un exemple plus parlant ou un screenshot d'une version image ?

Pourquoi ne pas tout simplement utiliser le background pour faire un arrière plan ?

---

Bonjour, c'est pas évident à comprendre mais voila un screen que je viens de faire:

http://img94.imageshack.us/img94/4121/screennd.jpg

Mettre la skyline contenant mon menu (avec rollover) et mettre limage aa.jpg (autrement dit: #en_tête) en arriere plan et le placer

---

Oui mais pourquoi ne pas tout simplement faire un div pour la skyline avec un background, et placer ton menu dans ce div, chaque élément ayant son propre background.

Tu vois ?

HTML :

Code: Tout sélectionner

<div id="skyline">
<ul id="menu">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>
</div>

CSS :

Code: Tout sélectionner

#skyline{background:url('fond-skyline') repeat-x}
#menu li{background:url('fond-li') repeat-x}
#menu li:hover{background:url('image-pour-rollhover') repeat-x}

EDIT : je crois que c'est ce que tu essaies de faire (vu ton code plus haut) mais je ne vois pas ce qui coince. Par contre designer un site au pixel prêt, c'est rarement un bon plan.