probléme div/css sous firefox

11 mars 2006 à 0:36:22

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 : moi

<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>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<a href="">Forum de Philosophie</a>
</div>
<BR>
<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>
<BR>
<FONT COLOR=RED>Forum d'aide pour la Littérature et la Philosophie</FONT>
<BR>
<HR>
<BR>
</div>
<div class="Droite"> fhgdftyhfcgjhf sdfgsgfsfdgxfd</div>
<div class="Droite2"> fhgdftyhfcgjhf sdfgsgfsfdgxfd</div>
<div class="pub"></div>
</div>
</div>
</BODY>
</HTML>

et mon css :

Citation : moi

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

merci pour votre aide...cordialement

Sword

11 mars 2006 à 9:07:43

UTILISE LES BALISE <code > et </code>!!!!

<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>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<a href="">Forum de Philosophie</a>
</div>
<BR>
<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>
<BR>
<FONT COLOR=RED>Forum d'aide pour la Littérature et la Philosophie</FONT>
<BR>
<HR>
<BR>
</div>
<div class="Droite"> fhgdftyhfcgjhf sdfgsgfsfdgxfd</div>
<div class="Droite2"> fhgdftyhfcgjhf sdfgsgfsfdgxfd</div>
<div class="pub"></div>
</div>
</div>
</BODY>
</HTML>

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

Dokken74

11 mars 2006 à 9:13:32

Merci vicovni

Sinon, pourrais tu nous montrer des captures d'ecrans de ton site avec Firefox et Internet Explorer ?

poilue

11 mars 2006 à 9:49:32

voici ma capture d'écra avec internet explorer

Image utilisateur

et ma capture avec firefox :

Image utilisateur

donc, ca ce chevauche et les tailles se perdent, mais come vous pourrez le remarquer cela ne se produit que pour les blocs dont la position est definie "absolute".