par
Cyrano » 27 août 2006, 18:46
Vire la marge externe autour du bloc H1.
D'autre part, positionner une cellule de tableau en absolute est complètement inutile.
Correction version HTML 4:
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- Date de création: 27/08/2006 -->
<head>
<style type="text/css">
<!--
h1{
font-style: italic;
font-family: times new roman;
color: green;
font-size: 20px;
text-align: center;
margin: 0;
}
#Positionnement{
width: 200px;
height: 0px;
background-color:white;
vertical-align: middle;
}
-->
</style>
</head>
<body>
<table border=2 bgcolor="#COCOCO" align=center bordercolor="red" cellspacing=4>
<tr>
<td id="Positionnement"><h1>TITRE</h1></td>
</tr>
</table>
</body>
</html>
Correction version XHTML 1.0 :
Code : Tout sélectionner
<?xml version="1.0" encoding="iso-8859-1" ?>
<!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="fr" lang="fr">
<!-- Date de création: 27/08/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title></title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
/* <![CDATA[ */
h1{
font-style: italic;
font-family: times new roman;
color: green;
font-size: 20px;
text-align: center;
margin: 0;
}
#Positionnement{
width: 200px;
height: 0px;
background-color:white;
vertical-align: middle;
}
/* ]]> */
</style>
</head>
<body>
<table border="2" bgcolor="#COCOCO" align="center" bordercolor="red" cellspacing="4" summary="">
<tr>
<td id="Positionnement"><h1>TITRE</h1></td>
</tr>
</table>
</body>
</html>
Proposition en virant tout simplement la mise en page en tableau HTML :
Code : Tout sélectionner
<?xml version="1.0" encoding="iso-8859-1" ?>
<!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="fr" lang="fr">
<!-- Date de création: 27/08/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title></title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
#Positionnement{
position: relative;
width: 200px;
top: 0;
left: 50%;
margin-left: -100px;
background-color: #ccc;
vertical-align: middle;
border: 1px solid #f00;
padding: 3px;
}
/* <![CDATA[ */
#Positionnement h1{
font-style: italic;
font-family: times new roman;
color: green;
background-color: #fff;
font-size: 20px;
text-align: center;
margin: 0;
border: 1px solid #000
}
/* ]]> */
</style>
</head>
<body>
<div id="Positionnement">
<h1>TITRE</h1>
</div>
</table>
</body>
</html>
Vire la marge externe autour du bloc H1.
D'autre part, positionner une cellule de tableau en absolute est complètement inutile.
Correction version HTML 4:
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- Date de création: 27/08/2006 -->
<head>
<style type="text/css">
<!--
h1{
font-style: italic;
font-family: times new roman;
color: green;
font-size: 20px;
text-align: center;
margin: 0;
}
#Positionnement{
width: 200px;
height: 0px;
background-color:white;
vertical-align: middle;
}
-->
</style>
</head>
<body>
<table border=2 bgcolor="#COCOCO" align=center bordercolor="red" cellspacing=4>
<tr>
<td id="Positionnement"><h1>TITRE</h1></td>
</tr>
</table>
</body>
</html>[/code]
Correction version XHTML 1.0 :
[code]<?xml version="1.0" encoding="iso-8859-1" ?>
<!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="fr" lang="fr">
<!-- Date de création: 27/08/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title></title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
/* <![CDATA[ */
h1{
font-style: italic;
font-family: times new roman;
color: green;
font-size: 20px;
text-align: center;
margin: 0;
}
#Positionnement{
width: 200px;
height: 0px;
background-color:white;
vertical-align: middle;
}
/* ]]> */
</style>
</head>
<body>
<table border="2" bgcolor="#COCOCO" align="center" bordercolor="red" cellspacing="4" summary="">
<tr>
<td id="Positionnement"><h1>TITRE</h1></td>
</tr>
</table>
</body>
</html>[/code]
Proposition en virant tout simplement la mise en page en tableau HTML :
[code]<?xml version="1.0" encoding="iso-8859-1" ?>
<!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="fr" lang="fr">
<!-- Date de création: 27/08/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title></title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
#Positionnement{
position: relative;
width: 200px;
top: 0;
left: 50%;
margin-left: -100px;
background-color: #ccc;
vertical-align: middle;
border: 1px solid #f00;
padding: 3px;
}
/* <![CDATA[ */
#Positionnement h1{
font-style: italic;
font-family: times new roman;
color: green;
background-color: #fff;
font-size: 20px;
text-align: center;
margin: 0;
border: 1px solid #000
}
/* ]]> */
</style>
</head>
<body>
<div id="Positionnement">
<h1>TITRE</h1>
</div>
</table>
</body>
</html>[/code]