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 !
Version complète: sur le forum Webmaster Hub : Chevauchement des <div> sous IE
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 !
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 !
Bonjour,
Dans la mesure où tu utilises un positionnement absolu et un z-index différent pour chaque <div>, c'est très simple
A toi d'ajuster le padding de la <div> qui est en-dessous
Dans la mesure où tu utilises un positionnement absolu et un z-index différent pour chaque <div>, c'est très simple
CODE
<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>
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
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
Avec ce code, la <div> "b" vient se coller sous la <div> "a", sans le moindre chevauchement
On ne doit pas avoir la même définition du "chevauchement" alors 
Que cherches-tu à faire exactement ?
Que cherches-tu à faire exactement ?
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.
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.
CODE
<!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
.
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 :
Il suffit d'ajouter ceci dans le code html :
CODE
<!--[if IE]>
<style type="text/css">
<!--
#menu {position: absolute;}
-->
</style>
<![endif]-->
<style type="text/css">
<!--
#menu {position: absolute;}
-->
</style>
<![endif]-->
CITATION(Dhamma @ lundi 13 novembre 2006, 13h19) 
Il suffit d'ajouter ceci dans le code html :
CODE
<style type="text/css">
<!--
#menu {position: absolute;}
-->
</style>
<!--
#menu {position: absolute;}
-->
</style>
Et j'ai mis quoi dans l'exemple que je te donne ?
La différence est que je n'ai pas appelé la <div> "menu" mais "a" et "b" ...
CITATION(Dan @ lundi 13 novembre 2006, 14h01)
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
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.