[CSS] div et de table imbriquées

Version imprimable

17/11/2005, 01h50
Gwipi

[CSS] div et de table imbriquées

Bonjour,

Je suis confronté à un problème sur IE et je suis surpris d'être le seul puisque je n'ai trouvé aucun sujet sur ce problème. Ou alors je dois être vraiment idiot.

J'ai une div avec un width=100% et un padding=5px et dedans une table avec un width=100%.
Le problème est que cela fait debordé la div et me crée un scrolling en bas de page pour effectuer un défilement sur la droite.
(Je dois garder le padding=5px pour mon design)

Comment eviter ce debordement sur la droite ?

Merci pour votre aide
17/11/2005, 02h38
ozzmax

Ouais c'est vrai que c'est pas trop intéressant un scroll vers la droite...
Est ce que tu peux fixer ton width en pixel par rapport à la largeur de ton écran?

Je me demandais comment était ton code car sa semble correct pour moi? :?
17/11/2005, 06h27
Gwipi
Voici mon code simplifié :
Code:

1 2 3 4 5 6 7 CSS div { width:100%; padding:10px; } table { width:100%; } HTML <div><table><tr><td>contenu</td></tr></table></div>
J'ai testé en enlevant le padding:10px et en mettant padding:0px à la place et il n'y a plus de débordement mais il me faut ce padding.

Merci pour votre aide
17/11/2005, 11h16
francis m

ben oui mais ta table faisant 100% + un padding de 10px, cela fait plus de 100%...
essaie avec width:auto;ou padding:1%;
17/11/2005, 13h20
Gwipi

Bon alors j'ai essayé :

1. avec un padding de 1% et un width de 100% = debordement
2. avec un width:auto le tableau prend la largeur minimum alors que je souhaiterais la largeur maximum.

Je cherche encore, mais je suis encore preneur de votre aide ;)
17/11/2005, 16h07
ozzmax

Si tu ne set pas le width du div... sa fonctionne non?
19/11/2005, 08h52
Gwipi

Non toujours pas, vraiment vbizarre ce problème, j'ai toujours pas trouvé la solution.

bizarre ton truc : j'ai fait comme suit et cela fonctionne correctement
html

Code:

1
2
<div class="total"><table class="tablo2"><tr><td>contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu</td></tr></table></div>

css

Code:

1
2
.total { width:100%; padding:10px; background-color:red;} 
.tablo2 { width:100%; background-color:green;}

19/11/2005, 15h47
Gwipi

Je viens de tester ton exemple avec IE 6.0 et j'ai le même problème, cela crée un scrolling vers la droite.

C'est quoi le truc parce que la je vois vraiment pas ?
19/11/2005, 16h09
francis m

je ne sais pas quel est le truc... chez moi cela fonctionne correctement sous ie 6.0

tu n'aurais pas un nowrap quelque part ?
19/11/2005, 16h25
Gwipi

J'ai testé ton exemple sur une page html avec uniquement ton code et ca fait pareil.
19/11/2005, 23h46
francis m

je viens de faire pareil et chez moi, le contenu passe à la ligne suivante quand nécessaire, et je n'ai pas de scroll horizontal

donc la je ne comprends pas du tout

peux-tu me monter l'intégralité de ta page test spécifique (celle que tu viens de créer), ainsi qu'une copie d'écran de ce que cela donne ?
soit ici soit par mail, comme tu veux
20/11/2005, 06h51
Gwipi

Ca y est je viens de trouver d'où vient le problème :

C'est à cause de cette ligne en début de page :

Code:

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

En la retirant ça fonctionne correctement.
Je ne pensais pas que cela influencait la mise en page.

Encore merci pour votre aide bien précieuse.
20/11/2005, 07h12
Gwipi

Eh bon et bien maintenant c'est avec FireFox que ça déborde ...

Oups désolé

Voic le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
<!--
.total { width:100%; padding:10px; background-color:red;} 
.tablo2 { width:100%; background-color:green;} 
-->
</style>
<body> 
<div class="total"> 
	<table class="tablo2"> 
		<tr> 
			<td>contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu</td> 
		</tr> 
	</table> 
</div> 
</body>
</html>

Quand à l'affichage, ca donne pareil que sous IE mais avec un leger décalage sur la droite ce qui provoque un scrolling horizontale, cependant il y a bien un retour à la ligne du contenu.

21/11/2005, 13h06
denisC

cf http://www.developpez.net/forums/viewtopic.php?t=419482
21/11/2005, 14h06
Gwipi

Bon et bien merci c'est enfin résolu, j'ai mis tout mon code dans une DIV et je n'ai plus ce debordement, c'est dommage ca alourdi un peu le code pour rien mais bon.

Merci encore à tous pour votre aide