Problème de Div avec IE
Arawn94
-
meuhlol Messages postés 1896 Date d'inscription Statut Membre Dernière intervention -
meuhlol Messages postés 1896 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je vous expose mon problème! Je souhaite mettre un Div devant un autre Div dans un Div contenaire.
Mon contenaire contient l'image header et les 2 autres div contiennent des images.
L'image 2 doit aussi être devant l'image 1.
Exemple code html :
<div id="contenaire" class="contenaire>
<div id="1" class="1"><img src="image1.gif"></div>
<div id="2" class="2"><img src="image2.gif"></div>
</div>
Exemple code css :
div.contenaire {
width: 500px;
height: 250px;
background: url('contenaire.gif') no-repeat;
}
div.1 {
position: relative;
text-align: center;
float:center;
padding: 160px 0px 0px 0px;
}
div.2 {
position: absolute;
float:left;
padding: 160px 0px 0px 0px;
}
Tout fonctionne à merveille sur Mozilla mais sur IE lorsque je redimensione la page avec le petit icon en haut du navigateur les 2 images des 2 div disparaissent et réaparaîssent si je réactualise la page...
Le problème vient sûrement de position relative et absolute...
Comment faire?
J'attends vos réponses avec impatience :)
Je vous expose mon problème! Je souhaite mettre un Div devant un autre Div dans un Div contenaire.
Mon contenaire contient l'image header et les 2 autres div contiennent des images.
L'image 2 doit aussi être devant l'image 1.
Exemple code html :
<div id="contenaire" class="contenaire>
<div id="1" class="1"><img src="image1.gif"></div>
<div id="2" class="2"><img src="image2.gif"></div>
</div>
Exemple code css :
div.contenaire {
width: 500px;
height: 250px;
background: url('contenaire.gif') no-repeat;
}
div.1 {
position: relative;
text-align: center;
float:center;
padding: 160px 0px 0px 0px;
}
div.2 {
position: absolute;
float:left;
padding: 160px 0px 0px 0px;
}
Tout fonctionne à merveille sur Mozilla mais sur IE lorsque je redimensione la page avec le petit icon en haut du navigateur les 2 images des 2 div disparaissent et réaparaîssent si je réactualise la page...
Le problème vient sûrement de position relative et absolute...
Comment faire?
J'attends vos réponses avec impatience :)
9 réponses
En utilisant
div.d1 {
position: absolute;
z-index : 1;
}
div.d2 {
position: absolute;
z-index : 2;
}
pas de pb particulier sous IE ni FF
div.d1 {
position: absolute;
z-index : 1;
}
div.d2 {
position: absolute;
z-index : 2;
}
pas de pb particulier sous IE ni FF
Salut,
Expliquez moi à quoi servent deux attributs à une div : <div id="contenaire" class="contenaire> ?
Voir ici pour l'utilisation de ces div : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3#ss_part_3
De plus, attention aux guillemets : <class="contenaire> ne marchera pas sans guillemet à la fin... ou fonctionnera mal.
Les mystères de IE étant impénétrables, ce n'est peut être pas la seule explication...
Bon courage.
Expliquez moi à quoi servent deux attributs à une div : <div id="contenaire" class="contenaire> ?
Voir ici pour l'utilisation de ces div : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3#ss_part_3
De plus, attention aux guillemets : <class="contenaire> ne marchera pas sans guillemet à la fin... ou fonctionnera mal.
Les mystères de IE étant impénétrables, ce n'est peut être pas la seule explication...
Bon courage.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
J'ai réecri trop vite, dans la vrai version il ne manque pas les guillemets, même si je ne mets pas id ca bug toujours! C'est vraiment flagrant! On redimensione et les 2 images disparaissent comme apr magie...
Je viens de tester chez moi avec tes css et html... tout fonctionne parfaitement.
testé avec Firefox 3.0.1 et IE 6.0
testé avec Firefox 3.0.1 et IE 6.0
Bjr
J'avoue que je ne vois pas trop ce que tu essais de faire ...
Sinon il me semble que l'attribute float ne supporte pas la valeur center.
Ensuite soit tu utilises float soit position absolute : mais les 2 ensembles ça paraît bizarre
Si tu veux être sûr que div2 soit au-dessus de div1 donne lui un z-index supérieur
.d1
{
z-index : 1;
}
.d2
{
z-index : 2;
}
Enfin je serais toi je changerais les noms des classes 1 et 2 pour d1 ou d2 par ex
J'avoue que je ne vois pas trop ce que tu essais de faire ...
Sinon il me semble que l'attribute float ne supporte pas la valeur center.
Ensuite soit tu utilises float soit position absolute : mais les 2 ensembles ça paraît bizarre
Si tu veux être sûr que div2 soit au-dessus de div1 donne lui un z-index supérieur
.d1
{
z-index : 1;
}
.d2
{
z-index : 2;
}
Enfin je serais toi je changerais les noms des classes 1 et 2 pour d1 ou d2 par ex
C'est des exemples biensûr que je ne mets pas que 1 ou 2.
Je veux rien faire il y a juste un problème de compatibilité avec IE apparement.
Mes 2 DIV du milieu disparaisse lorsque je redimenssione la page (le navigateur)...
Je veux rien faire il y a juste un problème de compatibilité avec IE apparement.
Mes 2 DIV du milieu disparaisse lorsque je redimenssione la page (le navigateur)...
