28173 sujets

CSS et mise en forme, CSS3

Mise en page defectueuse sous firefox avec ma CSS

bonjour, je suis débutant en la matière, pour m'entrainer à la mise en page avec une CSS, j'ai juste fait 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 :

a écrit :

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

a écrit :

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... Smiley confus
Modifié par poilue (11 Mar 2006 - 16:31)
Bonjour,

Il faut commencer par choisir un doctype pour ton document, sans cela chaque navigateur va interpréter à sa sauce. Choisir son Doctype. Puis construire sa mise en page en vérifiant son site sur un navigateur le plus proche possible des standarts (comme Firefox). En dernier lieu, vérifier sur IE les éventuels bugs et les résoudre un par un. Une astuce (personnelle) est de ne pas mélanger les propriétés width avec padding et border dans un même style (IE interprête, voir deux modèles de boites).

Bon courage et tiens-nous au courant. (Si ton problème est résolu dis-nous comment et place [résolu] dans le titre de ton 1er message)
le choix d'un doctype m'a fait avancé, j'ai, de plus choisi pour tous mes div un position absolute ce qui m'a permis d'unifier la mise ne page, il me reste quelques petits problémes à régler, meric aussi pour le probléem sous IE5 avec les padding, border et width.

je vous tient au courant
Modifié par poilue (11 Mar 2006 - 16:29)
poilue a écrit :
le choix d'un doctype m'a pas fait avancé, j'ai, de plus choisi pour tous mes div un position absolute ce qui m'a permis d'unifier la mise ne page, il me reste quelques petits problémes à régler, meric aussi pour le probléem sous IE5 avec les padding, border et width.

je vous tient au courant

Le positionnement en absolu est une vraie fausse solution. Au début, on pense que ça permet de régler les problèmes et d'unifier le rendu entre les divers navigateurs, mais c'est un leurre. La seule chose qu'on unifie, c'est la position du coin haut gauche des blocs. Il suffit souvent d'augmenter un peu la taille du texte pour que tout parte en vrille...

Attention, si tu utilises un doctype de type XHTML, il faudra respecter la syntaxe XHTML (imbrication des balises correctes, toutes les éléments sont fermés, les balises et les attributs s'écrivent uniquement en minuscules, etc.)
a écrit :
Il suffit souvent d'augmenter un peu la taille du texte pour que tout parte en vrille...


effectivement, c'est ce que je viens de constater, mais on fait comment alors ?
avec float ? mais je en comprend pas du tout comment ca fonctionne a vrai dire, 'ja beau lire ce que je trouve sur le net, ca m'avance pas beaucoup...
Administrateur
Bonjour,

les 3 articles d'Openweb sur le positionnement en CSS sont très bien pour savoir comment s'en servir, et les gabarits de page des tutos d'Alsacréations comme modèle d'inspiration. Pas la peine de réinventer la roue, surtout qu'il n'y a pas tant de types de mise en page que ça, du moins il y en a quelques-uns très utilisés pour afficher du contenu. Smiley cligne (EDIT: qui ont l'avantage de pas trop dérailler quand ils sont vus sur ce vieux IE)
Ou Layout Gala également.
Modifié par Felipe (11 Mar 2006 - 16:42)
Sujet clos
Aller à