z-index

Le
JKB
Bonjour à tous,

Je dois rater quelque chose dans l'utilisation de z-index. J'essaye
de mettre une image devant une autre et si l'image est bien placée
sur la page, elle reste à l'arrière.

Considérons la page suivante :
http://dev2.de-charybde-en-scylla.fr/panier.php

.logopanier img possède un z-index de 4 (l'image est actuellement
derrière) alors que le bandeau (.bandeau img) est positionné à 0.
J'ai dû rater quelque chose d'aussi gros qu'un camion, mais je ne
vois pas

Merci de vos lectures,

JKB

--
Si votre demande me parvient sur carte perforée, je titiouaillerai très
volontiers une réponse
=> http://grincheux.de-charybde-en-scylla.fr
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #23605841
Le 26/07/11 14:44, JKB a écrit :
Bonjour à tous,

Je dois rater quelque chose dans l'utilisation de z-index. J'essaye
de mettre une image devant une autre et si l'image est bien placée
sur la page, elle reste à l'arrière.



les z-index ça marche pô ! c'est la galère !

mieux vaut changer la position du truc dans le flux html

truc.parentNode.appendChild(truc); // truc passe devant à l'affichage

truc.parentNode.insertBefore(truc, truc.parentNode.firstChild); // derrière

ou l'inverse ... ? je sais plus !

Considérons la page suivante :
http://dev2.de-charybde-en-scylla.fr/panier.php



Fatal error: Call to a member function total() on a non-object in
/export/home/bertrand/public_html/monteiro/fonctions/substitutions/substitpanier.php
on line 26

.logopanier img possède un z-index de 4



pourquoi ça ? (un z-index dès l'arrivée)
et ... ça tient compte de la position de l'image dans le flux ?
(dans les recouvrements/superpositions)

(l'image est actuellement derrière)
alors que le bandeau (.bandeau img) est positionné à 0.




0 et 4 seront les z-index relatifs au z-index de leur(s) conteneur(s)
(me semble ?)

J'ai dû rater quelque chose d'aussi gros qu'un camion, mais je ne
vois pas...



faute d'avoir un lien vers un fichier "normal"
nous non plus

c'est positionné en absolute les machins ?

--
Stéphane Moriaux avec/with iMac-intel
JKB
Le #23606121
Le Tue, 26 Jul 2011 15:43:42 +0200,
SAM
Le 26/07/11 14:44, JKB a écrit :
Bonjour à tous,

Je dois rater quelque chose dans l'utilisation de z-index. J'essaye
de mettre une image devant une autre et si l'image est bien placée
sur la page, elle reste à l'arrière.



les z-index ça marche pô ! c'est la galère !

mieux vaut changer la position du truc dans le flux html

truc.parentNode.appendChild(truc); // truc passe devant à l'affichage

truc.parentNode.insertBefore(truc, truc.parentNode.firstChild); // derrière

ou l'inverse ... ? je sais plus !

Considérons la page suivante :
http://dev2.de-charybde-en-scylla.fr/panier.php



Fatal error: Call to a member function total() on a non-object in
/export/home/bertrand/public_html/monteiro/fonctions/substitutions/substitpanier.php
on line 26



Groumph... Corrigé...

.logopanier img possède un z-index de 4



pourquoi ça ? (un z-index dès l'arrivée)
et ... ça tient compte de la position de l'image dans le flux ?
(dans les recouvrements/superpositions)



Il me semble.

(l'image est actuellement derrière)
alors que le bandeau (.bandeau img) est positionné à 0.




0 et 4 seront les z-index relatifs au z-index de leur(s) conteneur(s)
(me semble ?)

J'ai dû rater quelque chose d'aussi gros qu'un camion, mais je ne
vois pas...



faute d'avoir un lien vers un fichier "normal"
nous non plus

c'est positionné en absolute les machins ?



En partie.

Cordialement,

JKB

--
Si votre demande me parvient sur carte perforée, je titiouaillerai très
volontiers une réponse...
=> http://grincheux.de-charybde-en-scylla.fr
JKB
Le #23607541
Le Tue, 26 Jul 2011 15:48:39 +0000 (UTC),
JKB
Bon... Quelques bugs de thelia corrigés plus tard, mon problème
reste le même. Je remercie au passage ceux qui m'ont signalé le
problème qui n'apparaissait pas chez moi (saletés de cache !).

Le code fautif est le suivant :

<div class="bandeau">
</div>
<div class="entete">
<ul>
<li><a href="ecrire/">Espace priv&eacute;</a></li>
</ul>
</div>
<a class="logopanier" href="http://dev2.de-charybde-en-scylla.fr/"
title="Aller sur la page d'accueil">
</a>

et le css correspondant est celui-ci.

.entete { width: 500px; position: absolute; z-index: 3;
margin: 33px 0px 0px 400px; }
.entete ul { float: right; padding: 0px 15px 0px 0px; font-weight: bold; }
.entete ul li { display: inline; list-style: none; }
.entete ul li a { display: block; float: left; padding: 2px 5px 2px 5px;
text-decoration: none; font-size: 100%; color: #660000; }
.entete ul li a:hover { text-decoration: none; color: #cc0000; }

.logopanier { background: #fcf4e9; z-index: 4; }
.logopanier img { padding-left: 50px; margin-top: 32px; border: none;
z-index: 5; }
.bandeau { position: absolute; z-index: 0; opacity: 0.7;}
.bandeau img { z-index: 1; }

Le résultat est toujours visible ici :

http://dev2.de-charybde-en-scylla.fr/panier.php

La transparence est là uniquement pour montrer que l'image logo3.png
est bien _derrière_ le bandeau.

J'ai essayé un tas de manipulations (même en isolant le montage des
trois images dans un div rien que pour lui), logo3.png reste
toujours derrière bg_head_middle.jpg.

Qu'ai-je raté ?

Merci de vos lumières,

JKB

--
Si votre demande me parvient sur carte perforée, je titiouaillerai très
volontiers une réponse...
=> http://grincheux.de-charybde-en-scylla.fr
SAM
Le #23607881
Le 27/07/11 09:49, JKB a écrit :
Le Tue, 26 Jul 2011 15:48:39 +0000 (UTC),
JKB
Bon... Quelques bugs de thelia corrigés plus tard, mon problème
reste le même. Je remercie au passage ceux qui m'ont signalé le
problème qui n'apparaissait pas chez moi (saletés de cache !).



On dirait qu'il y a du mieux ...

Peut-être ceci te conviendrait :

.logopanier {
background: none repeat scroll 0 0 #FCF4E9;
z-index: 0;
position: relative;
height: auto;
}


on peut virer tous les z-index (qui comme de juste ne servent à rien)

Pourquoi la position résout le pb ?
Ma foi ... no sè ... je n'ai pas autopsié les 372000 lignes de la FdS.

--
Stéphane Moriaux avec/with iMac-intel
JKB
Le #23608061
Le Wed, 27 Jul 2011 12:31:23 +0200,
SAM
Le 27/07/11 09:49, JKB a écrit :
Le Tue, 26 Jul 2011 15:48:39 +0000 (UTC),
JKB
Bon... Quelques bugs de thelia corrigés plus tard, mon problème
reste le même. Je remercie au passage ceux qui m'ont signalé le
problème qui n'apparaissait pas chez moi (saletés de cache !).



On dirait qu'il y a du mieux ...

Peut-être ceci te conviendrait :

.logopanier {
background: none repeat scroll 0 0 #FCF4E9;
z-index: 0;
position: relative;
height: auto;
}


on peut virer tous les z-index (qui comme de juste ne servent à rien)

Pourquoi la position résout le pb ?
Ma foi ... no sè ... je n'ai pas autopsié les 372000 lignes de la FdS.



C'est exactement ça. J'avoue ne pas comprendre non plus. Merci pour
tout.

Cordialement,

JKB

--
Si votre demande me parvient sur carte perforée, je titiouaillerai très
volontiers une réponse...
=> http://grincheux.de-charybde-en-scylla.fr
Publicité
Poster une réponse
Anonyme