Chevauchement des <div> sous IE

Dhamma · 13 Novembre 2006

Cher tout le monde,

Voici une petite énigme que je ne parviens pas à résoudre :

Sauriez-vous comment faire chevaucher une <div> sur une autre, sous IE ?

Bonne journée à tous !

**Dan** · 13 Novembre 2006

Bonjour,

Dans la mesure où tu utilises un positionnement absolu et un z-index différent pour chaque <div>, c'est très simple

<style type="text/css">
div#a {position absolute;width:200px; height:200px;top:200px;left:200px;z-index:10 }
div#b {position absolute;width:200px; height:200px;top:250px;left:250px;z-index:15 }
</style>

A toi d'ajuster le padding de la <div> qui est en-dessous

Dhamma · 13 Novembre 2006

Merci d'avoir pris le temps de m'aider, mais je regrette...

Avec ce code, la <div> "b" vient se coller sous la <div> "a", sans le moindre chevauchement

**Dan** · 13 Novembre 2006

On ne doit pas avoir la même définition du "chevauchement" alors

Que cherches-tu à faire exactement ?

Dhamma · 13 Novembre 2006

Exactement comme dans l'image plus haut. Le <div> bleu "chevauche" le <div> vert, c'est-à-dire qu'une partie du vert est cachée par le bleu.

Alonnka · 13 Novembre 2006

J'ai fais ça :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#conteneur {
width:250px;
}
#menu {
margin-top:10px;
width:55px;
height:100%;
float:left;
padding:10px;
background-color:#FF00FF;
}
#bloc {
padding-top:10px;
margin-left:40px;
padding-left:40px;
background-color:#FFFF00;
}
</style>
</head>

<body>
<div id="conteneur">
 <div id="menu">
  Item 1<br />
  Item 2<br />
  Item 3<br />
 </div>
 <div id="bloc">
  Texte Texte<br />
  Texte Texte<br />
  Texte Texte<br />
  Texte Texte<br />
  Texte Texte<br />
  Texte Texte<br />
  Texte Texte<br />
 </div>
</div>
</body>
</html>

Je ne sais pas si c'est ce que tu veux mais si c'est le cas ben... Bonne chance pour régler le problème de decalage sous IE .

Après relecture je pense que c'est justement ce problème pour lequel tu cherches une solution... Ben je la cherche aussi alors .

Modifié 13 Novembre 2006 par Alonnka

Dhamma · 13 Novembre 2006

Merci beaucoup ! Je n'arrivais même pas à faire chevaucher les <div>. Pour le problème de décalage du texte, je viens de trouver la solution.

Il suffit d'ajouter ceci dans le code html :

<!--[if IE]>
<style type="text/css">
<!--
#menu {position: absolute;}
-->
</style>
<![endif]-->

Modifié 13 Novembre 2006 par Dhamma

**Dan** · 13 Novembre 2006

Il suffit d'ajouter ceci dans le code html :
<style type="text/css">

</style>

Et j'ai mis quoi dans l'exemple que je te donne ? :whistling:

La différence est que je n'ai pas appelé la <div> "menu" mais "a" et "b" ...

Dhamma · 13 Novembre 2006

Et j'ai mis quoi dans l'exemple que je te donne ?

Il était aussi question de "position: absolute", si c'est ce que vous insinuez, mais le fait est que le chevauchement ne fonctionnait pas du tout, ni sur IE, ni même sur FF.

Il fallait aussi mettre ma "citation" en entier, avec "<!--[if IE]>", car c'est justement ça qui fait toute la différence.

Merci quand même d'avoir pris le temps de m'aider

Modifié 13 Novembre 2006 par Dhamma

Connexion

Chevauchement des <div> sous IE

Sujets conseillés

Dhamma

Dan

Dhamma

Dan

Dhamma

Alonnka

Dhamma

Dan

Dhamma

Veuillez vous connecter pour commenter

Parcourir

Activité