[HTML] Problème de mise en page avec un tableau
Salut à tous,
Bon j'essaie de vous expliquer mon problème clairement.
Sous IE j'ai ma colonne de droite qui est décalée alors que sous Mozilla non.
Il me semble que c'est du a une bordure, alors que les autres réagissent aux attributs du tableau
J'ai essayé les attributs rules et autres trouvés dans les leçons et dans le forum mais je ne trouve pas la solution,
car je ne vois pas ou est mon erreur.
Merci de votre aide..
Budyraptor.
voici le code en question et le resultat ICI
le doctype est ;
<!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">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>test (x)html</title>
</head>
<body>
<table width="100%"height="100%"border="0"cellspacing="0"cellpadding="0"align="center"style="margin-top:auto"rules="none">
<tr>
<td valign="middle"align="center">
<table width="981"height="799"border="0"cellspacing="0"cellpadding="0">
<tr>
<td width="135"height="799"rowspan="3"><img src="includes_/img_include/menu_G.gif"></td>
<td width="339"height="197"><img src="includes_/img_include/femme.gif"></td>
<td width="373"height="197"><img src="includes/img_include/flash.gif" /></td>
<td width="134"height="799"rowspan="3"><img src="includes_/img_include/menu_D.gif"></td>
</tr>
<tr>
<td width="712"height="602"colspan="2"><img src="includes_/img_include/centre.gif"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
autre question:
comment faire pour que mon code vous Apparaisse indenté ?
Ma solution trouvé grace aux DIV
Bon voila j'ai viré le tableau et je l'ai remplacé par des DIVs
Si quelqu'un à une solution plus propre,car je n'arrive pas à centrer verticalement (auto)mon DIV "conteneur". margin-top:10px; car margin-top:auto; colle mon DIV en haut de la page.
le resultat est ICI
voici le html:
<body>
<div id="conteneur">
<div id="principal">
<div id="menu_G"><img src="includes_/img_include/menu_G.gif">div>
<div id="femme"><img src="includes_/img_include/femme.gif">div>
<div id="flash"><img src="includes/img_include/flash.gif" /><div>
<div id="centre"><img src="includes_/img_include/centre.gif"></div>
</div>
<div id="droite">
<div id="menu_D"><img src="includes_/img_include/menu_D.gif"></div>
</div>
</div>
</body>
et le code CSS:
html {
margin:0px;
padding:0px;
}
body {
margin:0px;
padding:0px;
text-align: center;
}
#conteneur {
margin:auto;
margin-top:10px;
width: 981px; /* largeur de la div */
}
div {
text-align:center;
}
div#principal{
float:left;
width:847px;
height:799px;
vertical-align:middle;
}
div#droite{
float:left;
width:134px;
height:799px;
vertical-align:middle;
}
div#menu_G {
float:left;
width:135px;
height:799px;
}
div#centre {
float:left;
width:712px;
height:602px;
}
div#femme {
float:left;
width:339px;
height:197px;
}
div#menu_D {
float:left;
width:134px;
height:799px;
}
div#flash {
float:left;
width:373px;
height:197px;
}
j'attends vos commentaires
merci.
