Tom's Guide > Forum > Programmation > probléme d'affichage sous firefox avec balise div dans CSS

probléme d'affichage sous firefox avec balise div dans CSS

Forum Programmation : probléme d'affichage sous firefox avec balise div dans CSS

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Mot :    Pseudo :           
 

bonjour, pour m'entrainer au css avec des div, j'ai fait juste une page qui me servira de page lien vers un forum d'aide scolaire,
donc j'ai fouillé sur le net pour trouver ce dont j'avais besion, j'ai rentré toutes les valeurs et sous mon internet explorer ca marche,
mais, sous firefox, les blocs se chevauchent, je n'arrive pas à régler le probléme mise a part le fait de redimensionner pour que cela rende bien sous firefox mais dans ce cas la, la mise en page avec IE est boiteuse...


Je vous passe mes codes car, je ne comprends pas, merci d'avance pour votre aide :

voici ma page html :

Citation:
<HTML>
<HEAD>

<LINK href="archive.css" type=text/css rel=stylesheet>
</HEAD>
<BODY>

<center>

<div class="page">
<center>
<IMG SRC="ban.gif">
<div class="menu">
<a href="">Forum de Littérature</a>



<a href="">Forum de Philosophie</a>
</div>

 


<div style= "width:899">
<div class="Gauche"> xdgfhdcgfhcjh dfgsgfsfdgs</div>
<div class="Gauche2"> xdgfhdcgfhcjh dfgsgfsfdgs</div>
<div class="Centre">
<FONT COLOR=RED size=6><B>AIDE SCOLAIRE</B></FONT>

 


<FONT COLOR=RED>Forum d'aide pour la Littérature et la Philosophie</FONT>

 


<HR>

 


</div>
<div class="Droite"> fhgdftyhfcgjhf sdfgsgfsfdgxfd</div>
<div class="Droite2"> fhgdftyhfcgjhf sdfgsgfsfdgxfd</div>
<div class="pub"></div>
</div>
</div>
</BODY>
</HTML>


et mon css :


div.page{
text-align: left;
background: #FFF;
width: 937px ;
height: 700px ;
border-bottom:solid 1px;
margin-left: auto ;
margin-right: auto ;
background-image: url(fond.jpg)
}

div.Gauche {
border:double green;
background: url('fond.gif');
padding:5px ;
color:black;
font-family:Arial,Helvetica;
font-size:14px;
text-align:center;
width: 190px;
height: 130px;
float: left
}

div.Gauche2 {
border:double green;
background: url('fond.gif');
padding:5px ;
color:black;
font-family:Arial,Helvetica;
font-size:14px;
text-align:center;
width:190px;
height:130px;
position: absolute;
top: 500px;
left: 52px
}

div.Centre {
margin-left:10px ;
margin-right:10px;
padding:10px ;
background-color:#F8F6F7;
border-style:dashed;
border-width:1px;
border-color:#A0A0A0;
text-align:left;
font-family:Arial,Helvetica;
font-size:14px;
text-align:center;
width: 500px;
height: 500px;
position:absolute;
top: 200px;
left: 243px
}

div.Droite {
border:double green;
background: url('fond.gif');
padding:5px ;
color:black;
font-family:Arial,Helvetica;
font-size:14px;
text-align:center;
width:189px;
height:130px;
float:right
}

div.Droite2 {
border:double green;
background: url('fond.gif');
padding:5px ;
color:black;
font-family:Arial,Helvetica;
font-size:14px;
text-align:center;
width:189px;
height:130px;
position: absolute;
top:500px;
right:50px
}

div.menu {
font-size: 1em;
background: #000000 url('menu_background.gif');
background-repeat: repeat-x;
width: 899px;
height: 22px;
float:center
}

div.pub {
padding:10px ;
background-color:#F8F6F7;
border-style:solid;
border-width:1px;
border-color:black;
text-align:left;
font-family:Arial,Helvetica;
font-size:14px;
text-align:center;
width: 900px;
height: 50px;
position: absolute;
top: 665px;
left: 52px;
}

Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.

Salut poilue,

je pense que le mieux pour éviter le chevauchement des fenêtres serait que tu réalises 2 boîtes en css "invisibles" qui inclueraient respectivement les 2 fenêtres vertes de gauche et les 2 fenêtre vertes de droite.

Tu peux également remplacer <div class=""> par <div id=""> si tu n'utilises le style qu'une seule fois. Plus d'explication ici.

ça donnerait quelque chose de ce genre :

Code :
  1. <HTML>
  2. <HEAD>
  3. <LINK href="archive.css" type=text/css rel=stylesheet>
  4. </HEAD>
  5. <BODY>
  6. <center>
  7. <div id="page">
  8. <center>
  9. <IMG SRC="ban.gif">
  10. <div id="menu">
  11. <a href="">Forum de Littérature</a>
  12. <a href="">Forum de Philosophie</a>
  13. </div>
  14. <div style= "width:899">
  15. <div id="b_gauche">
  16. <div id="Gauche"> xdgfhdcgfhcjh dfgsgfsfdgs</div>
  17. <div id="Gauche2"> xdgfhdcgfhcjh dfgsgfsfdgs</div>
  18. </div>
  19. <div id="Centre">
  20. <FONT COLOR=RED size=6><B>AIDE SCOLAIRE</B></FONT>
  21. <FONT COLOR=RED>Forum d'aide pour la Littérature et la Philosophie</FONT>
  22. <HR>
  23. </div>
  24. <div id="b_droite">
  25. <div id="Droite"> fhgdftyhfcgjhf sdfgsgfsfdgxfd</div>
  26. <div id="Droite2"> fhgdftyhfcgjhf sdfgsgfsfdgxfd</div>
  27. </div>
  28. <div id="pub"></div>
  29. </div>
  30. </div>
  31. </BODY>
  32. </HTML>



Voilà, en espérant que ça va marcher...

EDIT : Attention, si tu remplaces class par id, il faut modifier les éléments de ta feuille de style de la manière suivante :

.toto {
text-align:right;
}

devient :

#toto {
text-align:right;
}

Répondre à ouistiti22

Salut,
//EDIT: Je n'avais pas vu la réponse de ouistiti, voila ce que j'avais écrit...

Je n'ai pas eu la patience d'examiner ton code en détail, mais fais très attention, tout le monde n'a pas la même résolution que toi, et avec ta page, on se rend compte que l'affichage est correct pour une seule résolution; dès qu'on change un peu la taille de la fenêtre, ca devient n'importe quoi.
Tu ne peux pas mettre certains de tes <div> en absolute, et d'autres en float, c'est normal que l'affichage soit pas génial.

En tout cas, je te conseille de d'abord coder ta page pour qu'elle s'affiche correctement dans Firefox, qui est conforme au standards (mode de rendu Gecko), et ensuite, occupe de toi de ce *%£^@§ de IE, en t'aidant du tutoriel d'OpenWeb (si tu ne connais pas déjà).

Bon courage ;-) (quelqu'un veut s'amuser a bidouiller son code pour que ça marche bien?).

Répondre à DarkCygal

je suis passé en <div id="">, j'ai unifié la mise en page en mettan totu en position absolute, ce qui m'a permis d'avoir un conteneur valide, je crois, ainsi, il ne me rete plus que de trés légère modification pour la bannière.

merci beaucoup

Répondre à poilue
Tom's Guide > Forum > Programmation > probléme d'affichage sous firefox avec balise div dans CSS
Aller à :

Il y a 251 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens