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

10 réponses
AuteurMessage

krucial |
Administrateur

Photo de krucial

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.phpOuvrir dans une nouvelle fenetre

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 sitesOuvrir dans une nouvelle fenetre | Affiliation devis travauxOuvrir dans une nouvelle fenetre | Cotes voitures anciennesOuvrir dans une nouvelle fenetre

devtribu | Olivier
Modérateur

Photo de devtribu

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/2PoLd0fOuvrir dans une nouvelle fenetre

krucial | Jean Christophe
Administrateur

Photo de krucial

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 sitesOuvrir dans une nouvelle fenetre | Affiliation devis travauxOuvrir dans une nouvelle fenetre | Cotes voitures anciennesOuvrir dans une nouvelle fenetre

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

Photo de krucial

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 sitesOuvrir dans une nouvelle fenetre | Affiliation devis travauxOuvrir dans une nouvelle fenetre | Cotes voitures anciennesOuvrir dans une nouvelle fenetre

krucial | Jean Christophe
Administrateur

Photo de krucial

Inscrit le : 09/03/2005

# Le 19/02/2009 à 12:54

Par exemple, ceci https://developer.mozilla.org/fr/Comprendre_le_z-i...Ouvrir dans une nouvelle fenetre ne fonctionne pas sous IE : http://www.forumconstruire.com/home/aeff3.phpOuvrir dans une nouvelle fenetre

JC - Mes sitesOuvrir dans une nouvelle fenetre | Affiliation devis travauxOuvrir dans une nouvelle fenetre | Cotes voitures anciennesOuvrir dans une nouvelle fenetre

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

Photo de krucial

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 sitesOuvrir dans une nouvelle fenetre | Affiliation devis travauxOuvrir dans une nouvelle fenetre | Cotes voitures anciennesOuvrir dans une nouvelle fenetre

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

Photo de krucial

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 sitesOuvrir dans une nouvelle fenetre | Affiliation devis travauxOuvrir dans une nouvelle fenetre | Cotes voitures anciennesOuvrir dans une nouvelle fenetre

krucial | Jean Christophe
Administrateur

Photo de krucial

Inscrit le : 09/03/2005

# Le 19/02/2009 à 14:27

Merci tonton

JC - Mes sitesOuvrir dans une nouvelle fenetre | Affiliation devis travauxOuvrir dans une nouvelle fenetre | Cotes voitures anciennesOuvrir dans une nouvelle fenetre

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.

© MHN - Tous droits réservés | CNIL N°844440 | 30/11/2020 12:44:35 | Généré en 7.21ms | Contacts | Mentions légales |