déplacement de div sous ie

Consultez la formation au référencement naturel Google de WebRankInfo / Ranking Metrics

Friedrich
Nouveau WRInaute
 
Messages: 14
Inscription: Mar Nov 04, 2008 23:44

déplacement de div sous ie

Message le Dim Jan 11, 2009 13:07

Bonjour à tous,

Je suis novice dans la création de sites web et j'ai un petit problème avec internet explorer.

Mes pages s'affichent parfaitement sous mozilla,mais avec certaines versions de ie (anciennes) et/ou certaines résolutions d'écran, mes div prennent trop de place et déplacent les autres.

Il parait que c'est un problème récurrent avec ie mais je ne parviens pas à trouver de réponses adaptées à mon problème.

Voici une partie du code de mon interface graphique :

body {
position:absolute;
background-color:#FFFFFF;
width:100%; min-width:900px
margin:auto;
font-size:12px;
font-family:Arial;
text-align:center;
color:#969696;
}


#conteneur {
position:relative; margin-left:auto; margin-right:auto;

background-color:#FFFFFF;
width:100%; min-width: 900px;
height:auto;
text-align: left;
}


h1#header {
width:100%;
height:130px;
background-color: #0000FF;

margin-top:0px;
}


div#menu {
float:left;
padding-left:2%; padding-top:5px; padding-right:1%; margin-top:10px;
width:15%; min-width:160 px; background-color:#FFFFFF;
}


div#menu ul {

margin:0;
padding:0; background-color:#FFFFFF;
}


div#menu li { margin-left:20px; }


div#corps {
float:left;
width:60%; min-width:500px;
padding-right:2%; padding-top:5px; margin-top:10px; margin-left:1%;
background-color:#FFFFFF; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-left:2%;
}


div#droit {
float:left;
width:13%; min-width:100px;
height:auto;
padding-top:5px; padding-right:2px; padding-left:3px; margin-top:10px; margin-left:1%; margin-right:1%;
background-color:#FFFFFF;
}






p#footer {
width:100%;
height:73px;

margin-bottom:0;
clear:both; background-color:#FFFFFF
;
text-align:center;
}


screuscreu
WRInaute passionné
WRInaute passionné
 
Messages: 938
Inscription: Lun Jan 14, 2008 12:14

Message le Lun Jan 12, 2009 0:33

sans url/html ... ,on peut quasiment rien faire

Friedrich
Nouveau WRInaute
 
Messages: 14
Inscription: Mar Nov 04, 2008 23:44

Message le Lun Jan 12, 2009 0:49

Voici l'url :

http://www.code-promotion-poker.com/

Je suis également preneur d'autres conseils concernant design ou référencement.
Merci bien.


dd32
Modérateur
Modérateur
 
Messages: 3262
Inscription: Ven Sep 09, 2005 10:21

Message le Lun Jan 12, 2009 1:17

Bonjour,

En général ce genre de problèmes sous IE est dû aux margin qui sont affectés aux div quand on leur applique un float.
Afin de résoudre le problème et de réduire ces margin, il suffit d'appliquer un "display:inline;" au div auquel tu as mis un float.


rudddy
WRInaute accro
WRInaute accro
 
Messages: 1744
Inscription: Mer Aoû 01, 2007 19:00

Message le Lun Jan 12, 2009 7:48


Friedrich
Nouveau WRInaute
 
Messages: 14
Inscription: Mar Nov 04, 2008 23:44

Message le Lun Jan 12, 2009 13:00

Merci pour vos réponses.

Je viens de me rendre compte que les div vont à la ligne uniquement quand la résolution d'écran est inférieure (en pixels) à la largeur cumulée de mes div (chose étrange puisque la largeur des div est exprimée en %).
Et ce uniquement sous ie6 apparemment.

Voici le résultat avec une réso de 640 X 1534 :
http://browsershots.org/screenshots/139 ... 55e057ddc/

J'ai vu que j'avais laissé trainer des "margin-left: 20px" ... par ci par là (voir code plus haut). Le problème viendrait-il de là?


rudddy
WRInaute accro
WRInaute accro
 
Messages: 1744
Inscription: Mer Aoû 01, 2007 19:00

Message le Lun Jan 12, 2009 13:02

donc ie 6 rajoute 3 px sur chaque div (vu que j'avais 3 colonnes c'était 9 px qui étaient apparu !!!)

source : http://www.webrankinfo.com/forums/viewt ... htm#966496

Friedrich
Nouveau WRInaute
 
Messages: 14
Inscription: Mar Nov 04, 2008 23:44

Message le Lun Jan 12, 2009 13:10

rudddy a écrit:donc ie 6 rajoute 3 px sur chaque div (vu que j'avais 3 colonnes c'était 9 px qui étaient apparu !!!)


Et donc tu as juste ajouté "-margin:0 0 0 7px;" dans ton code et le problème était résolu?


rudddy
WRInaute accro
WRInaute accro
 
Messages: 1744
Inscription: Mer Aoû 01, 2007 19:00

Message le Lun Jan 12, 2009 13:11

exact : le tiret signifie "ne prendre en compte cette ligne que si nav = IE6"

Friedrich
Nouveau WRInaute
 
Messages: 14
Inscription: Mar Nov 04, 2008 23:44

Message le Lun Jan 12, 2009 13:16

Cool, j'essaye ça. Merci


Formation recommandée sur ce thème :

Formation Référencement naturel Google : apprenez une méthode efficace pour optimiser à fond le référencement naturel dans Google de façon durable... Formation animée par Olivier Duffez et Fabien Facériès, experts en référencement naturel.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :



Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités