Se connecter avec
S'enregistrer | Connectez-vous

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

Dernière réponse : dans Programmation

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

Lassé par la pub ? Créez un compte

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;
}

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?).

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
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde