Se connecter / S'enregistrer
Votre question

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

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
11 Mars 2006 08:45:12

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:D ouble 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:D ouble 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:D ashed;
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:D ouble 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:D ouble 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;
}

Autres pages sur : probleme affichage firefox balise div css

11 Mars 2006 11:01:16

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 :
  1. <HTML>
  2. <HEAD>
  3.  
  4. <LINK href="archive.css" type=text/css rel=stylesheet>
  5. </HEAD>
  6. <BODY>
  7.  
  8. <center>
  9.  
  10. <div id="page">
  11. <center>
  12. <IMG SRC="ban.gif">
  13. <div id="menu">
  14. <a href="">Forum de Littérature</a>
  15.  
  16.  
  17.  
  18. <a href="">Forum de Philosophie</a>
  19. </div>
  20.  
  21.  
  22. <div style= "width:899">
  23. <div id="b_gauche">
  24. <div id="Gauche"> xdgfhdcgfhcjh dfgsgfsfdgs</div>
  25. <div id="Gauche2"> xdgfhdcgfhcjh dfgsgfsfdgs</div>
  26. </div>
  27. <div id="Centre">
  28. <FONT COLOR=RED size=6><B>AIDE SCOLAIRE</B></FONT>
  29.  
  30.  
  31. <FONT COLOR=RED>Forum d'aide pour la Littérature et la Philosophie</FONT>
  32.  
  33.  
  34. <HR>
  35.  
  36.  
  37. </div>
  38. <div id="b_droite">
  39. <div id="Droite"> fhgdftyhfcgjhf sdfgsgfsfdgxfd</div>
  40. <div id="Droite2"> fhgdftyhfcgjhf sdfgsgfsfdgxfd</div>
  41. </div>
  42. <div id="pub"></div>
  43. </div>
  44. </div>
  45. </BODY>
  46. </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;
}
11 Mars 2006 11:30:12

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?).
11 Mars 2006 13:56:01

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
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS