Bonjour,
Merci par avance pour votre aide. Les personnes un minimum avertis dans le domaine vont vite comprendre mon problème et pouvoir je l'espère trouver le temps d'y répondre.
Je viens de réaliser pour la énième fois un gabarit de page pour m'entrainer avec les css mais je n'arrive pas exactement à ce que je veux et toujours cette fichue différence de rendu entre IE et FF
En gros mes 3 problèmes :
- les blocs float qui flottent différemment sous IE et FF à cause du 2x20px (margin des float)
- mon float gauche qui empiète sur le footer, car trop long malgré un clear:both
- un centrage apparemment pas judicieux si j'en crois certains posts.
Voici le code :
Code : Tout sélectionner
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
html, body {
margin:0px;
padding:0px;
height:100%;
width:100%;
}
#maxi{
margin:0px;
padding:0px;
background-color:#333C00;
width:100%;
height:100%;
border:0px;
text-align:center;
}
#header{
margin:0px auto;
padding:0px;
background-color:#FF0;
width:760px;
border:0px;
}
#page{
margin:0px auto;
padding:0px;
background-color:#BB0;
height:400px;
width:760px;
border:0px;
}
#gauche{
float:left;
margin-top:20px;
margin-left:20px;
width:200px;
height:200px;
padding:0px;
border:0px;
}
#droite{
float:right;
margin-top:20px;
margin-right:20px;
width:200px;
height:200px;
padding:0px;
border:0px;
}
#footer {
background-color:#F00;
width:760px;
clear:both;
margin:0px auto;
padding:0px;
border:0px;
}
</style>
</head>
<body>
<div id="maxi">
<div id="header">le header</div>
<div id="page">
<div id="gauche"> je suis un floatant gauche je suis un floatant gauche je
suis un floatant gauche je suis un floatant gauche je suis un floatant gauche
je suis un floatant gauche je suis un floatant gauche je suis un floatant
gauche je suis un floatant gauche je suis un floatant gauche je suis un
floatant gauche je suis un floatant gauche je suis un floatant gauche je
suis un floatant gauche je suis un floatant gauche je suis un floatant gauche
je suis un floatant gauche je suis un floatant gauche je suis un floatant
gauche je suis un floatant gauche je suis un floatant gauche je suis un
floatant gauche je suis un floatant gauche je suis un floatant gauche je
suis un floatant gauche </div>
<div id="droite">droite droite droitedroite droite droitedroite droite droitedroite
droite droitedroite droite droitedroite droite droitedroite droite droitedroite
droite droitedroite droite droitedroite droite droitedroite droite droitedroite
droite droitedroite droite droitedroite droite droitedroite droite droitedroite
droite droitedroite droite droitedroite droite droitedroite droite droitedroite
droite droitedroite droite droitedroite droite droitedroite droite droitedroite
droite droitedroite droite droite</div>
</div>
<div id="footer">le footer</div>
</div>
</body>
</html>
HD, avide de connaissances et css. Hésitez pas à m'apporter vos avis et autres conseils, anecdotes, j'adore
Bonjour,
Merci par avance pour votre aide. Les personnes un minimum avertis dans le domaine vont vite comprendre mon problème et pouvoir je l'espère trouver le temps d'y répondre.
Je viens de réaliser pour la énième fois un gabarit de page pour m'entrainer avec les css mais je n'arrive pas exactement à ce que je veux et toujours cette fichue différence de rendu entre IE et FF
En gros mes 3 problèmes :
- les blocs float qui flottent différemment sous IE et FF à cause du 2x20px (margin des float)
- mon float gauche qui empiète sur le footer, car trop long malgré un clear:both
- un centrage apparemment pas judicieux si j'en crois certains posts.
Voici le code :
[code]<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
html, body {
margin:0px;
padding:0px;
height:100%;
width:100%;
}
#maxi{
margin:0px;
padding:0px;
background-color:#333C00;
width:100%;
height:100%;
border:0px;
text-align:center;
}
#header{
margin:0px auto;
padding:0px;
background-color:#FF0;
width:760px;
border:0px;
}
#page{
margin:0px auto;
padding:0px;
background-color:#BB0;
height:400px;
width:760px;
border:0px;
}
#gauche{
float:left;
margin-top:20px;
margin-left:20px;
width:200px;
height:200px;
padding:0px;
border:0px;
}
#droite{
float:right;
margin-top:20px;
margin-right:20px;
width:200px;
height:200px;
padding:0px;
border:0px;
}
#footer {
background-color:#F00;
width:760px;
clear:both;
margin:0px auto;
padding:0px;
border:0px;
}
</style>
</head>
<body>
<div id="maxi">
<div id="header">le header</div>
<div id="page">
<div id="gauche"> je suis un floatant gauche je suis un floatant gauche je
suis un floatant gauche je suis un floatant gauche je suis un floatant gauche
je suis un floatant gauche je suis un floatant gauche je suis un floatant
gauche je suis un floatant gauche je suis un floatant gauche je suis un
floatant gauche je suis un floatant gauche je suis un floatant gauche je
suis un floatant gauche je suis un floatant gauche je suis un floatant gauche
je suis un floatant gauche je suis un floatant gauche je suis un floatant
gauche je suis un floatant gauche je suis un floatant gauche je suis un
floatant gauche je suis un floatant gauche je suis un floatant gauche je
suis un floatant gauche </div>
<div id="droite">droite droite droitedroite droite droitedroite droite droitedroite
droite droitedroite droite droitedroite droite droitedroite droite droitedroite
droite droitedroite droite droitedroite droite droitedroite droite droitedroite
droite droitedroite droite droitedroite droite droitedroite droite droitedroite
droite droitedroite droite droitedroite droite droitedroite droite droitedroite
droite droitedroite droite droitedroite droite droitedroite droite droitedroite
droite droitedroite droite droite</div>
</div>
<div id="footer">le footer</div>
</div>
</body>
</html>[/code]
HD, avide de connaissances et css. Hésitez pas à m'apporter vos avis et autres conseils, anecdotes, j'adore ;)
