28173 sujets

CSS et mise en forme, CSS3

Problème d'alignement vertical / DOCTYPE / Homesite

Salut,

je sais que les tableaux ne sont pas fait pour la mise en forme (à la base), mais j'ai un petit soucis pour centrer mon tableau "page_principale" dans ma page. en fait le soucis est visible sur Firefox 1.5 mais pas sous IE

voici le code :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Titre du site</title>
 <link rel="stylesheet" href="css/styles_index.css" type="text/css" />
</head>

<body>
 <table id="le_site" cellpadding="0" cellspacing="0">
  <tr>
   <td id="ombre_gauche"></td>
   <td id="milieu">
    <table id="page_principale" cellpadding="0" cellspacing="0">
     <tr>
      <td id="titre" colspan="2"></td>
     </tr>
     <tr id="centre">
      <td>ici le contenu de mon site</td>
     </tr>
     <tr>
      <td id="bas" colspan="2"></td>
     </tr>
    </table>
   </td>
   <td id="ombre_droite"></td>
  </tr>
 </table>
</body>
</html>


et la feuille de style :


*
{
 margin:0px;
 padding:0px;
 border:none;
}

body
{
 text-align:center;
 background-color:#ACD05C;
}

#le_site
{
 width:844px;
 height:100%;
 margin-left:auto;
 margin-right:auto;
}

#ombre_gauche
{
 width:22px;
 background-color:#ACD05C;
 background-image:url('../images/ombre_g.gif');
 background-position:top left;
 background-repeat:repeat-y;
}

#milieu
{
 width:800px;
 vertical-align:middle;
 background-color:#E6CFA3;
}

#ombre_droite
{
 width:22px;
 background-color:#ACD05C;
 background-image:url('../images/ombre_d.gif');
 background-position:top right;
 background-repeat:repeat-y;
}

/* style de la partie centrale du site */
#page_principale
{
 width:100%;
 height:576px;
}

#titre
{
 height:128px;
 background-image:url('../images/titre.gif');
 background-repeat:no-repeat;
}

#centre
{
 height:338px;
 background-image:url('../images/boutons.jpg');
 background-position:top left;
 background-repeat:no-repeat;
}


#bas
{
 height:110px;
 background-image:url('../images/bas.jpg');
 background-repeat:no-repeat;
}


j'ai remarqué que, lorsque je remplace la DOCTYPE ci dessus par celle ci :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


ma page ce centre verticalement sans problème!

est ce qu'il n'y aurait pas un moyen de garder une DOCTYPE XHTML tout en centrant ma page ?

merci pour vos future réponse !!
Modifié par ReSpAwN (03 Mar 2006 - 09:34)
merci pour l'intérêt que tu portes à ce problème!

j'ai souvenir d'avoir déjà lus cette page!

si je comprends bien ton message, tu me suggère d'utiliser une doctype strict!
Oupssss ! j'ai écris ça, moi ? Smiley eek Où ?

- Tu utilises : "DTD XHTML 1.1" dans le code que tu présentes, pourquoi le choix de cette DTD... Et pourquoi pas une autre, si elle est plus adaptée Smiley smile

- Ce que je suggère dans ma précédente réponse, c'est que peut être que ton choix ne correspond pas forcemment à tes besoins, c'est pour t'aider à vérifier ça que je t'ai donné ce lien...

Eventuellement, il y a eu beaucoup de discussions sur ce sujet dans le forum, c'est d'ailleurs ce qui a motivé le billet cité... Tu peux également faire une recherche et lire un peu les échanges, ça pourrait aussi t'aider. Mais ne connaissant pas tous tes besoins, je ne peux pas affirmer qu'il faut plus une DTD qu'une autre Smiley cligne
excuse moi j'ai mal m'exprimer!

en fait, quand j'utilise n'importe quel de ces doctypes, mon problème apparaît :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
	   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">	

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
	   "http://www.w3.org/TR/html4/frameset.dtd">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
	   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



mais quand j'utilise la doctype abrégé de HomeSite 5.5 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


mon site passe niquel

mais en faisant le test de validation j'ai des erreurs

je ne pense pas que le problème sois dans le choix de la doctype!

perso j'ai choisi XHTML 1.0 transi pour avoir du code structuré tout en utilisant certain paramètre de mise en forme directement dans la page html en plus de mes CSS!
Modifié par ReSpAwN (02 Feb 2006 - 08:57)
Sujet clos
Aller à