CSS / IE / Depassement de bloc / je pete un plomb

10 réponses

Auteur	Message
krucial \| Administrateur Inscrit le : 09/03/2005	# Le 19/02/2009 à 12:15 Salut Voici un code d'exemple : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>Page test</title> </head> <body> <!-- debut header --> <div style="height:100px;position:relative;border:1px solid black"> <!-- debut pub --> <div style="height:50px;background:black;z-index:5;position:absolute;top:0px;left:25px;"> <img src="http://www.forumconstruire.com/img/pubs/autopromo/300x250/isolation.gif" /> </div> <!-- fin pub --> </div> <!-- fin header --> <!-- debut content --> <div> Du texte <!-- debut bloc relative --> <div style="background:red;z-index:2;position:relative">fdgfdgfdgfd</div> <!-- fin bloc relative --> encore du texte </div> <!-- fin content --> </body> </html> Voir le resultat ici : http://www.forumconstruire.com/home/aeff.php C'est assez simple : un premier bloc de 100px de haut qui accueille un second bloc de 50px contenant une pub. Cette pub est plus grande que le bloc (300px de haut) ce qui arrive dans le cas d'extend banner. Ensuite, en dessous, un bloc texte classique, contenant un autre bloc, placé en "relative" cette fois. FF / Safari : nickel IE : le bloc en relative passe par dessus ma pub, quoi que je fasse (z-index, etc) Avez-vous une solution à m'offrir ? Avez vous deja rencontré ce probleme ? Relou là ! JC - Mes sites \| Affiliation devis travaux \| Cotes voitures anciennes
devtribu \| Olivier Modérateur Inscrit le : 16/06/2005	# Le 19/02/2009 à 12:22 <div style="background:red;z-index:2;position:relative">fdgfdgfdgfd</div> devient : <div style="background:red;">fdgfdgfdgfd</div> Février 2019, mon futur livre Tout JavaScript chez Dunod https://amzn.to/2PoLd0f
krucial \| Jean Christophe Administrateur Inscrit le : 09/03/2005	# Le 19/02/2009 à 12:25 Oui mais, mon bug est là justement. J'ai besoin du positionnement relative de ce bloc. JC - Mes sites \| Affiliation devis travaux \| Cotes voitures anciennes
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 19/02/2009 à 12:28 Hum, tu peux mettre le z-index à -1 sur le bloc en relative. Après tout dépend du cas réel.
krucial \| Jean Christophe Administrateur Inscrit le : 09/03/2005	# Le 19/02/2009 à 12:50 Hum. Ca marche. Il faut que tu m'expliques. Essai 1 : bloc 1 de z-index = 5 bloc 2 de z-index = 2 Resultat : bloc 2 par dessus bloc 1 Essai 2 : bloc 1 de z-index = 5 bloc 2 sans z-index Resultat : bloc 2 par dessus bloc 1 Essai 3 : bloc 1 de z-index = 5 bloc 2 de z-index = -1 Resultat : bloc 1 par dessus bloc 2 C'est pas normal ! Mon probleme c'est que, ce qu'il y a dans mon bloc relatif contient des elements en z-index > 0. Merci a toi en tout cas. JC - Mes sites \| Affiliation devis travaux \| Cotes voitures anciennes
krucial \| Jean Christophe Administrateur Inscrit le : 09/03/2005	# Le 19/02/2009 à 12:54 Par exemple, ceci https://developer.mozilla.org/fr/Comprendre_le_z-i... ne fonctionne pas sous IE : http://www.forumconstruire.com/home/aeff3.php JC - Mes sites \| Affiliation devis travaux \| Cotes voitures anciennes
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 19/02/2009 à 13:18 Hum, disons que z-index négatif c'est une bidouille dans certains cas. Dans ton cas, j'ai pas testé mais je pense qu'il faudrait mieux que tu mettes le "<div>" contenant ton "<div> en relative" en relative. Soit : <div style="position:relative;"> Du texte <!-- debut bloc relative --> <div style="background:red;z-index:2;position:relative">fdgfdgfdgfd</div> <!-- fin bloc relative --> encore du texte </div> Pourquoi ? parce que z-index ne fonctionne qu'avec des éléments non statique et qu'à mon avis, le bloc contenant le bloc relative doit également être relative pour que le z-index fonctionne.
krucial \| Jean Christophe Administrateur Inscrit le : 09/03/2005	# Le 19/02/2009 à 14:15 Non parce que, dans ce cas, c'est tout le bloc de texte qui passe par dessus la pub. En gros, pour IE, si un div est chargé en position absolute ou relative, tous les elements précedents passent en dessous, peu importe le z-index (sauf si z-index -1) JC - Mes sites \| Affiliation devis travaux \| Cotes voitures anciennes
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 19/02/2009 à 14:20 Bon dernière solution, après je peux plus t'aider lol Essai de mettre un "z-index:3;" (c'est à dire au dessus de 2) dans le tout premier <div> en position relative. <div style="height:100px;position:relative;border:1px solid black;z-index:3;">
krucial \| Jean Christophe Administrateur Inscrit le : 09/03/2005	# Le 19/02/2009 à 14:27 Résolu, et c'est enorme. Si le bloc B dans le bloc A est en z-index 1000, et que le bloc A est en z-index 10, B sera en Z-index 10 sur IE. JC - Mes sites \| Affiliation devis travaux \| Cotes voitures anciennes
krucial \| Jean Christophe Administrateur Inscrit le : 09/03/2005	# Le 19/02/2009 à 14:27 Merci tonton JC - Mes sites \| Affiliation devis travaux \| Cotes voitures anciennes

Auteur

Message

krucial |
Administrateur

Inscrit le : 09/03/2005

# Le 19/02/2009 à 12:15

Salut

Voici un code d'exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Page test</title>
</head>
<body>

<div style="height:100px;position:relative;border:1px solid black">

<div style="height:50px;background:black;z-index:5;position:absolute;top:0px;left:25px;">
<img src="http://www.forumconstruire.com/img/pubs/autopromo/300x250/isolation.gif" />
</div>

</div>


<div>
Du texte

<div style="background:red;z-index:2;position:relative">fdgfdgfdgfd</div>

encore du texte
</div>


</body>
</html>

Voir le resultat ici : http://www.forumconstruire.com/home/aeff.php

C'est assez simple : un premier bloc de 100px de haut qui accueille un second bloc de 50px contenant une pub. Cette pub est plus grande que le bloc (300px de haut) ce qui arrive dans le cas d'extend banner.

Ensuite, en dessous, un bloc texte classique, contenant un autre bloc, placé en "relative" cette fois.

FF / Safari : nickel
IE : le bloc en relative passe par dessus ma pub, quoi que je fasse (z-index, etc)

Avez-vous une solution à m'offrir ? Avez vous deja rencontré ce probleme ? Relou là !

JC - Mes sites | Affiliation devis travaux | Cotes voitures anciennes

devtribu | Olivier
Modérateur

Inscrit le : 16/06/2005

# Le 19/02/2009 à 12:22

<div style="background:red;z-index:2;position:relative">fdgfdgfdgfd</div>

devient :

<div style="background:red;">fdgfdgfdgfd</div>

Février 2019, mon futur livre Tout JavaScript chez Dunod https://amzn.to/2PoLd0f

krucial | Jean Christophe
Administrateur

Inscrit le : 09/03/2005

# Le 19/02/2009 à 12:25

Oui mais, mon bug est là justement. J'ai besoin du positionnement relative de ce bloc.

JC - Mes sites | Affiliation devis travaux | Cotes voitures anciennes

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 19/02/2009 à 12:28

Hum, tu peux mettre le z-index à -1 sur le bloc en relative. Après tout dépend du cas réel.

krucial | Jean Christophe
Administrateur

Inscrit le : 09/03/2005

# Le 19/02/2009 à 12:50

Hum. Ca marche. Il faut que tu m'expliques.

Essai 1 :
bloc 1 de z-index = 5
bloc 2 de z-index = 2
Resultat : bloc 2 par dessus bloc 1

Essai 2 :
bloc 1 de z-index = 5
bloc 2 sans z-index
Resultat : bloc 2 par dessus bloc 1

Essai 3 :
bloc 1 de z-index = 5
bloc 2 de z-index = -1
Resultat : bloc 1 par dessus bloc 2

C'est pas normal ! Mon probleme c'est que, ce qu'il y a dans mon bloc relatif contient des elements en z-index > 0.

Merci a toi en tout cas.

JC - Mes sites | Affiliation devis travaux | Cotes voitures anciennes

krucial | Jean Christophe
Administrateur

Inscrit le : 09/03/2005

# Le 19/02/2009 à 12:54

Par exemple, ceci https://developer.mozilla.org/fr/Comprendre_le_z-i... ne fonctionne pas sous IE : http://www.forumconstruire.com/home/aeff3.php

JC - Mes sites | Affiliation devis travaux | Cotes voitures anciennes

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 19/02/2009 à 13:18

Hum, disons que z-index négatif c'est une bidouille dans certains cas.

Dans ton cas, j'ai pas testé mais je pense qu'il faudrait mieux que tu mettes le "<div>" contenant ton "<div> en relative" en relative.

Soit :

<div style="position:relative;">
Du texte

<div style="background:red;z-index:2;position:relative">fdgfdgfdgfd</div>

encore du texte
</div>

Pourquoi ? parce que z-index ne fonctionne qu'avec des éléments non statique et qu'à mon avis, le bloc contenant le bloc relative doit également être relative pour que le z-index fonctionne.

krucial | Jean Christophe
Administrateur

Inscrit le : 09/03/2005

# Le 19/02/2009 à 14:15

Non parce que, dans ce cas, c'est tout le bloc de texte qui passe par dessus la pub. En gros, pour IE, si un div est chargé en position absolute ou relative, tous les elements précedents passent en dessous, peu importe le z-index (sauf si z-index -1)

JC - Mes sites | Affiliation devis travaux | Cotes voitures anciennes

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 19/02/2009 à 14:20

Bon dernière solution, après je peux plus t'aider lol

Essai de mettre un "z-index:3;" (c'est à dire au dessus de 2) dans le tout premier <div> en position relative.

<div style="height:100px;position:relative;border:1px solid black;z-index:3;">

krucial | Jean Christophe
Administrateur

Inscrit le : 09/03/2005

# Le 19/02/2009 à 14:27

Résolu, et c'est enorme. Si le bloc B dans le bloc A est en z-index 1000, et que le bloc A est en z-index 10, B sera en Z-index 10 sur IE.

JC - Mes sites | Affiliation devis travaux | Cotes voitures anciennes

krucial | Jean Christophe
Administrateur

Inscrit le : 09/03/2005

# Le 19/02/2009 à 14:27

Merci tonton

JC - Mes sites | Affiliation devis travaux | Cotes voitures anciennes

Répondre

Vous ne pouvez pas participer au forum, car votre inscription n'a pas été validée. Pour vous faire valider en tant que Membre, cliquez ici.