impossible de mettre un scroll

**ProgVal** · 07/03/2009, 18h17

Bonjour,

Je suis actuellement en train de coder un forum, mais je rencontre un problème: quand un mot est trop large, le message déforme la page.

Je ne peux pas fixer la largeur de la cellule contenant le message, car elle prend la place laissée libre par la case affichant le profil du membre.
J'ai essayé de mettre un scroll (overflow: scroll ou auto), mais il ne veut pas l'afficher. J'ai essayé de le mettre à divers endroits de mon forum, mais il ne s'affiche nul part...
Voici un exemple de page: http://atomforum.fr.cr/index-0/Premi...cccccccc-3.php (le lien ne marche que si mon PC est allumé)
Voici le code CSS correspondant:

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
/*************************************************************************
                     Affichage d'un topic
*************************************************************************/
.message_list
{
    width:100%;
}
.message_list .topic_title
{
    background-color: #EEEEEE;
}
.message_list td, .message_list th
{
    background-color: #EEEEEE;
}
.message_list tr:hover td, .message_list tr:hover th
{
    background-color: #DDDDDD;
}
.message_list .member_profil
{
    width: 1px;
    max-width: 25%;
    text-align: center;
}
.message_list .message
{
    overflow: scroll;
}

Merci d'avance,
ProgVal

EDIT: comme je vais éteindre mon PC, je donne le code de la page

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>AtomForum</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design de base" href="/design/style.css" />
		<link rel="shortcut icon" type="image/x-icon" href="/design/favicon.png" />
	</head>
	<body>
		<table id="container" style="height: 100%">
			<tr>
				<td id="left_body" rowspan="4">
				</td>
				<td id="header">
					<img src="/design/logo2.png" alt="logo" />
					AtomForum<br /><br />Le forum, tout simplement.
					<span id="connect_status">Connecté(e) en tant que ProgVal2</span>
				</td>
				<td id="right_body" rowspan="4">
				</td>
			</tr>
			<tr>
				<td id="menu">
					<a href="/" title="Retourner à l'accueil du forum"><img src="/design/navbar/accueil.png" alt="Accueil" /></a>
					<a href="/index-0/" title="Retourner à l'index du forum"><img src="/design/navbar/index.png" alt="Index " /></a>
					<a href="/view/membres.php" title="Voir la liste des membres du forum"><img src="/design/navbar/membres.png" alt="Membres " /></a>
					<a href="/view/groupes.php" title="Voir la liste des groupes du forum"><img src="/design/navbar/groupes.png" alt="Groupes " /></a>
					<a href="/dev/checklist.php" title="Voir la check-list du développement"><img src="/design/navbar/checklist.png" alt="Check-list " /></a>
											<a href="/membres/connect.php" title="S'inscrire sur le forum"><img src="/design/navbar/deconnexion.png" alt="Déconnexion " /></a>
									</td>
			</tr>
			<tr>
				<td id="body">
						<a href="/add/topic.php?forum_id=1" title="Cliquez pour créer un nouveau topic dans cette section"><img src="/design/buttons/add_topic.png" alt="Créer topic" /></a>
		<a href="/add/message.php?topic_id=3" title="Cliquez pour envoyer une réponse à ce topic"><img src="/design/buttons/add_msg.png" alt="Répondre" /></a>
<div class="parents_forums">
				<a href="./../">Accueil</a> 
				<a href="./">Premier à l'index</a> 
	</div>
<table class="message_list">
	<tr>
		<th class="topic_title" colspan="2">Premier à l'index</th>
	</tr>
	<tr>
		<th class="member_profil">Membre</th>
		<th class="message">Message</th>
	</tr>
		<tr>
			<td class="member_profil">
				invité<br />
				<img src="/design/images/avatar.png" alt="Avatar de invité" />
			</td>
			<td class="message">
				aaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbccccccccccccccccccccdddddddddddddddddddddddddeeeeeeeeeeeeeeeeeeeeeeeeefffffffffffffffffffgggggggggggggggggggggggggghhhhhhhhhhhhhhhhh			</td>
		</tr>
</table>
				</td>
			</tr>
			<tr>
				<td id="footer">
					<span class="invited">invité</span> est le seul membre actuellement connecté sur le forum					<div style="text-align: right;">
						<a href="http://jigsaw.w3.org/css-validator/">
							<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="CSS Valide !" />
						</a>
					    <a href="http://validator.w3.org/check?uri=referer">
							<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" />
						</a>
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>

**Macmillenium** · 07/03/2009, 19h14

Bonjour,

Je pense que tu donne un mauvais exemple ou la longueur des mots est très forcé, le comportement que tu vois est tout à fait normal dans ce cas.

Ci-joint un exemple de developpez.com

**ProgVal** · 07/03/2009, 19h28

Bonjour,

Je sais cela. Mais si le membre veut mettre une grande image, ou qu'il veut volontairement déformer la page?

ProgVal

**Macmillenium** · 07/03/2009, 19h36

Envoyé par ProgVal

Je sais cela. Mais si le membre veut mettre une grande image, ou qu'il veut volontairement déformer la page?

C'est à toi de définir, coté php, la largeur maximal des images et faire une sorte de resize.

**ProgVal** · 08/03/2009, 10h14

Merci pour ta réponse.

Mais là n'est pas le problème. Le scroll devrait s'afficher, et il ne le fait pas, je veux savoir pourquoi et comment résoudre ce problème.

**desert** · 08/03/2009, 13h19

Pourquoi devrait-il s'afficher puisque ton texte possède tout l'espace qu'il désire ?
Pour afficher le scrollbar, tu dois forcer le conteneur à avoir une taille fixe :

Code html :

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

1
2
3
4
5
<td class="message">
    <div style="overflow: auto; width:800px;">
        aaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbccccccccccccccccccccdddddddddddddddddddddddddeeeeeeeeeeeeeeeeeeeeeeeeefffffffffffffffffffgggggggggggggggggggggggggghhhhhhhhhhhhhhhhh
    </div>
</td>

Ou alors, en utilisant PHP, tu définies un certain nombre de caractères par ligne. Si la texte a atteint le maximum autorisé, tu insères un retour à la ligne à la bonne position.

impossible de mettre un scroll

Défilement en CSS

Vue hybride

Discussions similaires

Partager

Partager