28173 sujets

CSS et mise en forme, CSS3

[Résolu] Z-index sans effet sous FF

Bonjour,

Mon z-index ne semble pas prendre effet sous FF. Cela est surement de ma faute, mais ou est la faute justement Smiley lol
Car pourtant sous IE, cela fonctionne. Smiley biggol

Je vous laisse jeter un coup d'oeil a mon code :

#header { width: 780px; height: 130px; }
#headerTop { z-index: -1;position: absolute; width: 100%; height: 100px; top: 0px; left: 0px; background-color:#f3f3f3; } 
#headerTop img { position: absolute; top: 20px; left: 5px;}
#headerBottom { position: absolute; top: 100px; width: 100%; height: 30px; background-color: #353334; }


<div id="header">
	<ul id="menu">
		<li><img src="./img/menu_home.gif"/></li>
		<li><img src="./img/menu_music.gif"/></li>
		<li><img src="./img/menu_art.gif"/></li>
		<li><img src="./img/menu_fashion.gif"/></li>
		<li><img src="./img/menu_events.gif"/></li>
	</ul>
</div>
<div id="headerTop"><img src="./img/title.gif" /><div id="headerBottom"></div></div>


Merci pour votre aide,
Sven
Modifié par Sven (21 Aug 2007 - 16:12)
Salut,

as-tu essayé d'éviter la valeur négative du z-index ? Par exemple en utilisant 
#header {
   position: relative;
   z-index: 2;
}
#headerTop {
   position: absolute;
   z-index: 1;
}


La définition du type "entier" dans la spécification est ambigue :
CSS2 a écrit :
Noter que plusieurs propriétés, qui admettent comme valeur un entier ou un nombre, limitent en fait leurs valeurs dans une plage donnée, souvent à une valeur positive.

Modifié par Thomas D. (21 Aug 2007 - 13:04)
Non, ca ne marche toujours pas !

Je me demande si le position:absolute n'y est pas pour quelque chose....
Enfaite, je cherche a faire apparaitre mon menu sur un background-color de fond qui doit prendre toute la largeur.

Mais mon menu depend d'un div independant car il doit etre aligne avec les blocs Music et Art.

Voici le lien :
www.krambox.com/beta (IE c'est pas encore ca.... )

Le menu devrait etre sur la bande grise : headerTop

Voici le code CSS du menu :
/*Menu*/
#menu { float: right; padding-top: 80px; list-style-type: none;}
#menu li { float: left; padding-left: 10px;}


Le html :
<div id="headerTop"><img src="./img/title.gif" /><div id="headerBottom"></div></div>
<div id="header">
	<ul id="menu">
		<li><img src="./img/menu_home.gif"/></li>
		<li><img src="./img/menu_music.gif"/></li>
		<li><img src="./img/menu_art.gif"/></li>
		<li><img src="./img/menu_fashion.gif"/></li>
		<li><img src="./img/menu_events.gif"/></li>
	</ul>
</div>


Ca t'aidera peut etre Smiley smile
Je ne comprends pas très bien, en fait. Tu veux mettre ton menu en dessous du titre, dans la zone grise et l'aligner avec les blocs Music & Art ? Pas besoin de positionnements scabreux pour ça, a priori.

Pourquoi pas tout simplement : 
<div id="header">
   <h1><img src="title.gif" alt="krambox" /></h1>
   <ul id="menu">
      <li><a href="..." title="...>...</a></li>
      ...
   </ul>
</div>
et 
#menu {
   overflow: hidden;
   margin-left: ...px; /* Marge pour aligner le menu avec les blocs Music & Art */
   padding: 0;
}
#menu li {
   float: left;
}
Smiley cligne

Mais le probleme, c'est que je veux avoir deux bandes qui font offices de banniere en arriere plan.
On peut dire que c'est le background du menu.

Ex :


----------------------------------
Bande 1 
TITRE                        MENU
---------------------------------
Bande 2
---------------------------------


Je pourrais tres bien les faire en .gif mais je gagne en chargement de la page si j'evite cela !

Tu vois ce que je veux dire ?
Ok, et en utilisant 
#header {
   background: #ddd;
   border-bottom: 30px solid #000;
}
en plus, ça le fait toujours pas ?
Bien vue Smiley biggrin

Et maintenant il faut que mon header fasse toute la largeur de l'ecran.

Facile avec 
width:100%


Sauf que mon menu doit toujours rester aligner avec mes blocs du dessous. Et le margin-left ne marchera pas car si ma page est center avec 
margin-left: auto margin-right: auto
, ma distance avec le bord gauche ne sera pas fixe.

Tu vois ce que je veux dire ?
Mmmmh ...

Tes liens, ce sont des images, non ? Dans ce cas, on pourrait utiliser quelque chose comme ceci : 
#menu {
   width: XXXpx;
   margin: 0 auto;
   padding-left: YYYpx;
   }

avec XXX + YYY égal à la largeur du reste du site, en ajustant pour que la liste se mette au bon endroit (ça devrait aussi marcher avec des pourcentages, d'ailleurs).

Pour mettre les <li> sur une ligne, il ne reste qu'a ajouter 
#menu li {
   display: inline;
}
et le tour est joué ...
Modifié par Thomas D. (21 Aug 2007 - 15:35)
Sujet clos
Aller à