Bonjour,
Je démarre tout doucement en CSS et j'ai commencé à faire un design Jelly pour mon site en XHTML. J'aime bien les standards je trouve que ça facilite grandement les choses et en plus ça a la classe, mais il y a encore des fois ou mon bon vieux IE me fait par défaut des choses qui correspondent beaucoup plus à que ce que j'attends que mon nouveau Firefox.
[code=css/style.css]
body{
background-color: Black;
margin: 0px;
padding: 0px;
}
#page{
background-color: White;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 760px;
}
#north{
width: 100%;
margin: 0px;
padding: 0px;
background-color: Blue;
}
#west{
margin: 0px;
padding: 0px;
width: 250px;
float: left;
background-color: Red;
}
#center{
margin: 0px;
padding: 0px;
width: 260px;
float: left;
background-color: Green;
}
#east{
margin: 0px;
padding: 0px;
width: 250px;
float: left;
background-color: Purple;
}
#south{
margin: 0px;
padding: 0px;
width: 100%;
float: left;
background-color: Teal;
}
[/code]
[code=index.html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Design Jelly</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="page">
<div id="north">N</div>
<div id="west">W</div>
<div id="center">
<p>C</p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="east">E</div>
<div id="south">S</div>
</div>
</body>
</html>
[/code]
Par exemple, pour le layout dont je vous donne le code ci-dessus, IE semble considérer que comme la zone "page" englobe toutes les autres zones ("north", "west", "center", "east" et "south") il est logique que la page s'étende derrière toutes ces zones. Du coup, si vous regardez ce que ça donne sous les zones "west" et "east" quand le contenu de "center" est plus grand en hauteur, on voit la couleur de "page", et c'est exactement ce que je veux.
Par contre sous Firefox, ma "page" semble avoir une hauteur de 0, même si les éléments qu'elle contient occupent plein d'espace. Du coup sous "west" et "east", on se retrouve avec le fonds de body au lieu du fond de page.
Partant du principe que la plupart des incompatibilités de IE vs Gecko viennent de valeurs par défaut différentes (hormis les problèmes de margin et de padding mais je ne pense pas que ça soit ça quand même... de toute façon j'ai tout mis à 0 !), je me dis qu'il suffirait peut-être de redéfinir correctement un truc pour que l'affichage sous firefox corresponde à ce que j'ai sous IE...
A votre avis ?
Merci d'avance...
rozwel
Modifié le 14 Jan 2005 - 22:03
Je démarre tout doucement en CSS et j'ai commencé à faire un design Jelly pour mon site en XHTML. J'aime bien les standards je trouve que ça facilite grandement les choses et en plus ça a la classe, mais il y a encore des fois ou mon bon vieux IE me fait par défaut des choses qui correspondent beaucoup plus à que ce que j'attends que mon nouveau Firefox.
[code=css/style.css]
body{
background-color: Black;
margin: 0px;
padding: 0px;
}
#page{
background-color: White;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 760px;
}
#north{
width: 100%;
margin: 0px;
padding: 0px;
background-color: Blue;
}
#west{
margin: 0px;
padding: 0px;
width: 250px;
float: left;
background-color: Red;
}
#center{
margin: 0px;
padding: 0px;
width: 260px;
float: left;
background-color: Green;
}
#east{
margin: 0px;
padding: 0px;
width: 250px;
float: left;
background-color: Purple;
}
#south{
margin: 0px;
padding: 0px;
width: 100%;
float: left;
background-color: Teal;
}
[/code]
[code=index.html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Design Jelly</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="page">
<div id="north">N</div>
<div id="west">W</div>
<div id="center">
<p>C</p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="east">E</div>
<div id="south">S</div>
</div>
</body>
</html>
[/code]
Par exemple, pour le layout dont je vous donne le code ci-dessus, IE semble considérer que comme la zone "page" englobe toutes les autres zones ("north", "west", "center", "east" et "south") il est logique que la page s'étende derrière toutes ces zones. Du coup, si vous regardez ce que ça donne sous les zones "west" et "east" quand le contenu de "center" est plus grand en hauteur, on voit la couleur de "page", et c'est exactement ce que je veux.
Par contre sous Firefox, ma "page" semble avoir une hauteur de 0, même si les éléments qu'elle contient occupent plein d'espace. Du coup sous "west" et "east", on se retrouve avec le fonds de body au lieu du fond de page.
Partant du principe que la plupart des incompatibilités de IE vs Gecko viennent de valeurs par défaut différentes (hormis les problèmes de margin et de padding mais je ne pense pas que ça soit ça quand même... de toute façon j'ai tout mis à 0 !), je me dis qu'il suffirait peut-être de redéfinir correctement un truc pour que l'affichage sous firefox corresponde à ce que j'ai sous IE...
A votre avis ?
Merci d'avance...
rozwel
Modifié le 14 Jan 2005 - 22:03
