Sujet Précédent Sujet Suivant

Pb d'affichage des div entre IE et fox

Fermé
fabthehunter Messages postés 1 Date d'inscription mercredi 4 mai 2011 Statut Membre Dernière intervention 4 mai 2011 - 4 mai 2011 à 20:22
Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 - 4 mai 2011 à 23:13
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 jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
4 mai 2011 à 23:13
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

adele
marine carnet-pantier -
irongege -

2 réponses
Facture de google 380€ !
Misternet -
okapi -

61 réponses
Arnaque frauduleuse Ireland ltd
Mymy -
mel -

4 réponses
arnaque cb google sur mon compte bancaire
patooun -
samgunsjovirow -

1 réponse
Arnaque de Google Ireland Limited
Sortideli -
jordane45 -

1 réponse