[CSS] Tableau dépasse de la div

**liberio** · 10/12/2005, 01h51

Bonjour à tous.

J'ai une div globale qui inclue 3 autres div (une à droite, une au centre et une à gauche). Dans la div de droite j'affiche un tableau avec des mots assez long dans ses cellules. Mon problème est que le tableau dépasse de la div de droite et aussi de celle globale. Or je voudrais que la div globale et la div de droite s'agrandissent automatiquement avec la div de droite. Je gère le tout avec un css.
Voici le code du fichier 'index.html':

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!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" xml:lang="fr">
 
<head>
 
	<title>
		Page de test
	</title>
 
	<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
 
	<link href="./style.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body>
 
	<div id="page">
 
		<div id="div_menuGauche_texte">
 
			<!-- Menu de gauche -->
			<div id="menuGauche">
				<ul>
					<li>
					viroehv
					</li>
					<li>
					viroe
					</li>
					<li>
					viroehvi
					</li>
				</ul>
			</div> <!-- menuGauche -->
 
			<div>
				&nbsp;
			</div>
 
			<!-- Corps du texte de la page --> 
			<div id="texte">
				<table>
					<tr class="titre">
						<td>
							tototot
						</td>
						<td>
							gvrfeee
						</td>
						<td>
							Coucouu
						</td>
						<td>
							Descriptif
						</td>
						<td>
							ole
						</td>
					</tr>
					<tr>
						<td>
							youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
						</td>
						<td>
							crevrevreveriurvebviujhrebvikjhbrevjkreje
						</td>
						<td>
							cnrezovoiurhevniorhnevolkrevopre
						</td>
						<td>
							vnreivhjiore crezvre cez cfezcezcezvc cezcze cfez cez cez c ezcezcezcez cez cez cez cez cez cez cez cez 
						</td>
						<td>
							vfrziofvrhzorenilkrezhjnbikmvrevrelrenhgviklrenigvolreiovlkr
						</td>
					</tr>
				</table>
			</div> <!-- texte --> 
 
		</div> <!-- div_menuGauche_texte --> 
 
	</div> <!-- page -->
 
</body>
 
</html>

Voici le code du fichier 'style.css':

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
table{
margin-top:1em;
background-color:#fff;
color:#655f4b;;
}
 
table,td{
border-collapse:collapse;
border:1px solid #a2c2e1;
padding:0.2em;
}
 
/* Page globale */
#page{
background-color:#fff;
color:#655f4b;
border:2px solid #000;
}
 
/* Div du menu de gauche et de la zone de texte (conteneur) */
#div_menuGauche_texte{
width:100%
margin-top:1%;
margin-bottom:1%;
margin-right:1%;
margin-left:1%;
}
 
/* Menu de gauche (contenu) */
#menuGauche{
float:left;
width:17%;
margin-right:3%;
border-style:solid;
}
 
/* Corps du texte de la page (contenu) */
#texte{
width:83%;
margin-left:20%;
padding:1% 1% 1% 1%;
color:#655f4b;
background-color:#f5f8fc;
border:1px solid #69c;
}

Merci d'avance de vos réponses.

**Linaa** · 10/12/2005, 02h56

Avec les width en %, ça devrait regler le problème

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* Div du menu de gauche et de la zone de texte (conteneur) */
#div_menuGauche_texte{
width:100%;
margin-top:1%;
margin-bottom:1%;
margin-right:1%;
margin-left:1%;
}
 
/* Menu de gauche (contenu) */
#menuGauche{
float:left;
width:17%;
margin-right:3%;
border-style:solid;
}
 
/* Corps du texte de la page (contenu) */
#texte{
margin-left:20%;
padding:1% 1% 1% 1%;
color:#655f4b;
background-color:#f5f8fc;
border:1px solid #69c;
width:83%; /* 100%-17% */
}

**liberio** · 10/12/2005, 11h06

La page s'affiche bien sous IE mais pas sous Firefox

Est-ce qu'il ne devrait d'ailleurs mieux pas mettre la largeur du div 'texte' à 80%, c'est-à-dire prendre en compte sa margin-left:20% ?
P.S: j'ai essayer et celà n'arrange rien, mais peut-être que le code est plus juste quand même, non ?

**spirou** · 10/12/2005, 13h31

Salut !!!

Il ne faut jamais tester avec des chaînes de caractères aussi longues.

Sépare par des espaces, et tu verras que le retour à la ligne s'effectuera automatiquement.

**liberio** · 10/12/2005, 15h33

Merci de ta réponse.
Oui, je sais que les espaces permettent de revenir à la ligne mais j'ai besoin de gérer ce cas particulier sur un projet (le lien que j'ai donné n'est qu'un exemple de mon problème) : j'affiche plusieurs données dans un tableau dont des photos et lorsque les photos ne sont pas disponibles, le nom de la photo est affiché en entier (sans espace) sous Firefox. Or, mon tableau contient pas mal de champs, dont ces photos, ce qui rend l'affichage plutôt long en largeur. Et dans mon cas il arrive souvent que des photos soient absentes, et donc que l'affichage en largeur disfonctionne.
Après, je pourrais m'amuser à découper le nom des photos pour l'affichage, mais ne serait-il pas plus simple d'adapter le positionnement des div ???
Je pense que ça doit être possible vu que l'affichage se fait bien sous IE. Le tout est de savoir comment !!!

**spirou** · 10/12/2005, 18h07

C'est pas possible, c'est comme si tu voulais faire rentrer un objet de 50cm de long dans une boite qui n'en fait que 30, c'est normal que ça dépasse.

En php, je pense que ça doit être possible de faire une petite fonction pour qu'il y ait un retour à la ligne automatique après X caractères de ta chaîne.

Ainsi, le retour à la ligne s'effectuera automatiquement sans que tu ne modifies tes liens.

Sinon à part ça, je ne vois pas.

**liberio** · 10/12/2005, 18h10

Heuu, je ne comprends pas pourquoi les div seraient bridées en largeur et pas en hauteur (dans les 2 cas les scrollbars apparaissent)... bizarre, y'a vraiment aucun moyen de rendre la largeur d'une div infinie ?

[CSS] Tableau dépasse de la div

Tableau en CSS

Discussions similaires

Partager

Partager