Problème de css

Fermé
milo1986 Messages postés 126 Date d'inscription jeudi 23 août 2007 Statut Membre Dernière intervention 30 août 2011 - 19 oct. 2009 à 09:39
kartnia Messages postés 27 Date d'inscription mardi 6 octobre 2009 Statut Membre Dernière intervention 17 mai 2011 - 19 oct. 2009 à 12:23
Bonjour,
Voilà, j'ai un site qui me pose problème et je pense savoir d'où cela provient mais je demande confirmation et un peu d'aide si possible pour le résoudre.
Sous firefox, ie7 ou 8 et safari le problème ne se présente pas : mes éléments sont décalés sous ie6 c'est pour cela que je pense à un problème avec les attributs float sur mes différents div. Par contre je pense à inclure une deuxième feuille de style propre à ie mais je ne vois pas par quoi remplacer mes float. Si quelqu'un pouvais me donner un petit coup de pouce....

Je vous poste le css :

body {
margin:0;
margin:auto;
background-color:#267fae;
background-image:url(img/bg.png);
background-repeat:repeat-x;
}

#header {
margin:auto;
width:1121px;
height:209px;
}

#header-left {
background-image:url(img/header-left.png);
float:left;
width:289px;
height:209px;
}

#header-right {
background-image:url(img/header-right.png);
float:right;
width:311px;
height:209px;
}

#logo {
background-image:url(img/logo.png);
width:521px;
height:209px;
margin-left:289px;
padding-top:173px;
}

#menu1 {
padding-left:15px;
float:left;
}

#menu2 {
padding-right:15px;
float:right;
}

#container {
margin:auto;
width:1121px;
height:429px;

}

#container-bottom {
background-image:url(img/container-bottom.png);
margin:auto;
width:1121px;
height:163px;
}

#container-left {
background-image:url(img/container-left.png);
float:left;
width:206px;
height:429px;
}

#container-right {
background-image:url(img/container-right.png);
float:right;
width:206px;
height:429px;
}

#footer {
margin:auto;
width:1121px;
height:200px;
}

#corps {
background-color:#fff;
padding-top:30px;
margin:auto;
width:709px;
height:429px;
font-family: "Century Gothic", Tahoma, Arial;
color:#2c2c2c;
font-size:13px;
}

#gauche {
background-image:url(img/presentation.png);
background-repeat:no-repeat;
float:left;
width:350px;
padding-left:15px;
padding-top:60px;
text-align:justify;
}

#droite {
background-image:url(img/mes-creations.png);
background-repeat:no-repeat;
margin-left:405px;
padding-top:60px;
}

#corps a {text-decoration:none; color:#6eb638}
#corps a:hover{background-color:#cfffa8; color:#124517}

Merci d'avance
A voir également:

1 réponse

kartnia Messages postés 27 Date d'inscription mardi 6 octobre 2009 Statut Membre Dernière intervention 17 mai 2011 5
19 oct. 2009 à 12:23
Bonjour,
Arpès tes éléments en float, il faut mettre une div en clear pour "casser" l'événement float ...,
html :
<div class="float">float 1</div>
<div class="float">float 2</div>
<div class="clear"></div>

css:
.float {float:left;}
.clear {clear:both;}

Je ne sais pas si ça resoudra le probleme, bonne chance !
0