Pb d'affichage des div entre IE et fox

fabthehunter Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   -  
Stéphane18 Messages postés 372 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
comme vous l'aurez compris je suis un énième novice qui ne parvient pas à comprendre pourquoi les div de son site apparaissent parfaitement sur IE mais tout mélangés dès qu'on essaie de passer sous firefox ou opéra.
Donc j'vais pas y aller par quatre chemins, aidez-moi et dîtes-moi quoi enlever ou rajouter svp !

voici mon code css correspondant aux div :

div#geant {height:768px; width:1024px}

div#haut {background-image:url(fondhaut.jpg); background-repeat: no-repeat; height: 115px; width:1024px; padding-top:48px}

div#gauche {background-image:url(fondgauche.jpg); background-repeat: no-repeat; height:538px; padding-top:20Px; padding-left:2px; width:153px; float:left}

div#milieu {background-image: url(logo.jpg); background-repeat: no-repeat; height:538px; width:871px; padding: 10PX 10PX 10PX 10PX; float:left}

div#bas {background-image:url(trois.jpg); background-repeat: repeat-x; height:115px; width:1024px; float:left}


et voilà l'ordre dans lequel ils se présentent sur ma page html :

<div id ="geant">

<div id="haut">
</div>
<div id="gauche">
</div>
<div id="milieu">
</div>
<div id="bas">
</div>
</div>

Merci d'avance :)
A voir également:

1 réponse

Réponse 1 / 1
Stéphane18 Messages postés 372 Date d'inscription   Statut Membre Dernière intervention   132
 
Salut, commence par enlever tous les padding de tes blocs et regarde comment cela réagi, car si tu additionne les blocs div id="gauche et le bloc div id="milieu le résultat et supérieur à ton bloc div id ="geant 153px + 2px + 871px + 10px +10px = 1046px alors que le bloc geant ne fait que 1024px, ensuite pourquoi mettre un float:left; au bloc div id="bas" ?

J'ai repris ta structure html pour te faire un exemple j'ai simplement remplacer tes images par de la couleur enlever les paddings et tout ce qui me servais à rien, puis j'ai ajouté un div vide qui permet de dire au bloc div id="bas" de ce replacer en dessous des blocs div id="gauche" div id="milieu": 

<div id ="geant">

    <div id="haut">
    </div>

    <div id="gauche">
    </div>

    <div id="milieu">
    </div>

    <div class="clear"></div>

    <div id="bas">
    </div>

</div> 

#geant{width:1024px;}

#haut {background-color: green;height: 115px; width:1024px;}

#gauche {background-color: red; height:538px;width:143px;float:left;}

#milieu {background-color: blue; height:538px; width:871px;float:left;}

#bas {background-color: silver; height:115px; width:1024px;}

.clear{clear: both;}

Si tu veut en savoir plus sur le positionnement regarde ce tuto vidéo :
https://www.grafikart.fr/tutoriels/positionner-css-83
2

Discussions similaires

Les images ne s'affichent plus
papyrus95 -
melle -

15 réponses
impossible de voir les photos et videos sur une conversation messenger
cortomaltese83 -
Oceii -

4 réponses
Prélèvement Apple.com Bill
Eva_007 -
kikine -

8 réponses
Probleme d'affichage google chrome
flyingvvv -
helo -

5 réponses