Bonjour à tous,
je me suis mis il y a peu aux CSS et XHTML mais j'avais déjà des connaissances en HTML.
Mon problème est le suivant: j'ai une feuille de style tableau.css et une page html essai.html. Sans la balise DOCTYPE, la page s'affiche bien. Or, mon code n'est pas validé par le W3C donc je rajoute le DOCTYPE XHTML TRANSITIONAL et là, mon affichage est complètement modifié.
Voici mon code HTML actuel (avec DOCTYPE):
Et ma feuille de style:
Merci à tous pour votre aide qui m'est très précieuse!
Modifié par pogy29 (11 Jul 2007 - 10:47)
je me suis mis il y a peu aux CSS et XHTML mais j'avais déjà des connaissances en HTML.
Mon problème est le suivant: j'ai une feuille de style tableau.css et une page html essai.html. Sans la balise DOCTYPE, la page s'affiche bien. Or, mon code n'est pas validé par le W3C donc je rajoute le DOCTYPE XHTML TRANSITIONAL et là, mon affichage est complètement modifié.
Voici mon code HTML actuel (avec DOCTYPE):
<!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>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'/>
<title> Test </title>
<link href="tableau.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class='main'>
<div class='header1'>mon entete</div>
<div class='header2'>mon entete2</div>
<div class='contain'>
<div>mon contenu</div>
<div class='module'>
<div class='header'>
header de mon module
</div>
<div class='contain'>
contenu
</div>
</div>
</div>
<div class='footer1'>mon footer</div>
<div class='footer2'>mon footer2</div>
</div>
</body>
</html>
Et ma feuille de style:
html {
height:100%;
}
body {
height:100%;
padding:0px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.main .header1 {
background: #000 url(logo.png) no-repeat center center;
height:19%;
color:#FFF;
}
.main .header2 {
background-color:#FF6600;
height:1%;
color:#FFF;
}
.main .contain {
background-color:#FFF;
height:70%;
color:#000;
}
.main .footer1 {
background-color:#FF6600;
height:1%;
color:#FFF;
}
.main .footer2 {
background-color:#000;
height:9%;
color:#FFF;
}
.module .header {
background-color:#FFF;
color:#000;
height:20%;
}
.module .contain {
background: #FFF url(equipe.png) no-repeat center center;
height:80%;
color:#000;
}
Merci à tous pour votre aide qui m'est très précieuse!
Modifié par pogy29 (11 Jul 2007 - 10:47)
, je voulais dire que IE ne calcule pas selon les normes en mode quirk.
Pas chiant le mec!