18041 sujets

Questions générales et questions de débutants

Table 100% qui n'ont pas la même taille.

Bonjour,

Je travaille actuellement sur un site qui dois s'adapter à la largeur de l'écran de l'internaute.
J'utilise donc des pourcentages pour dimensionner les différents éléments de mon site (quelque dimensions en pixel pour les éléments donc la taille est fixe.).
J'ai rencontré quelques chose de bizarre cependant. Peut-être que c'est logique et évident mais j'aimerai comprendre pourquoi mes 2 tableaux n'ont pas la même largeur si je les mets tous les deux à width=100% ?

Code avec les 2 tableaux qui n'ont pas la même dimension (pour le voir faut vraiment réduire un max la fenêtre c'est plus visible sur mon site mais j'ai pas le droit de le montrer. j'ai donc reproduit rapidement le code que j'utilise.)

<!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=utf-8" />
<title>Document sans nom</title>
</head>

<body>
<table border="0" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0F3; color:#000; font-weight:bold;">
<tr>
	<td>Un petit bandeau</td>
</tr>
</table>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
	<td width="20%" style="background-color:#FF3;"> Le menu</td>
    <td width="70%"> Le corps de la page avec plein de blablablablabla</td>
    <td width="10%" style="background-color:#00F; color:#FFF;">La colonne de droite</td>
</tr>
</table>
</body>
</html>




La solution que j'ai trouvé. Mais qui ne m'explique pas le pourquoi de ce phénomène.

<!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=utf-8" />
<title>Document sans nom</title>
</head>

<body>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
	<td colspan="3" style="background-color:#0F3; color:#000; font-weight:bold;">Un petit bandeau</td>
</tr>
<tr>
	<td width="20%" style="background-color:#FF3;"> Le menu</td>
    <td width="70%"> Le corps de la page avec plein de blablablablabla</td>
    <td width="10%" style="background-color:#00F; color:#FFF;">La colonne de droite</td>
</tr>
</table>
</body>
</html>


Si quelqu'un pouvais m'expliquer pouquoi j'ai cette différence de largeur et pourquoi le même cas ne se retrouve pas dans l'utilisation de div :

<!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=utf-8" />
<title>Document sans nom</title>
</head>

<body>
<div style="background-color:#0F3; color:#000; font-weight:bold; width:100%">
Un petit bandeau
</div>
<div style="width:100%">
<div style="float:left; width:20%; background-color:#FF3;">
Le menu
</div>
<div style="float:left; width:70%;">
Le corps de la page avec plein de blablablablabla
</div>
<div style="float:left; width:10%; background-color:#00F; color:#FFF; ">
La colonne de droite
</div>
</div>
</body>
</html>


Merci d'avance.
Modifié par Akiko (15 Mar 2010 - 14:09)
Modérateur
Bonjour,

Bon déjà, on peut dire ici que l'utilisation des tableaux n'est pas justifiée. Il faudrait plutôt se tourner vers les divs et les CSS pour positionner les différentes colonnes.

Sinon, dans quel navigateur et quelle version vois-tu ce problème? J'ai vérifié dans Firefox et IE7, et je n'ai rien remarqué concernant la largeur des tableaux.
Bonjour,

Merci de ta réponse.
Alors le bug se trouve sur tous les navigateurs. Bon ok avec mon exemple c'est pas flagrant surtout qu'il faut vraiment réduire la fenêtre du navigateur.
Mais c'est un bug qui se voit beaucoup beaucoup plus sur mon site (basé sur un os_commerce modifié) et qui viens d'os-commerce (bug présent sur la version de base cf photo).

upload/21904-oscom.gif

En haut de la photo (le cadre rouge) on voit que le bandeau ne passe plus au dessus du menu droit.

De toute façon, je vais passer en div pour mon site car c'est vrai que le tableau n'est pas approprié.
Mais j'aimerai comprendre pourquoi le width= 100% du tableau du bandeau est différent de celui du tableau du contenu.

Il devrai tout les deux avoir la même largeur. Ou y a t'il une subtilité css que j'ignore?
Modifié par Akiko (15 Mar 2010 - 15:27)
Sujet clos
Aller à