Gérer la taille d'un texte dans une page html

**Gizmil** · 21/08/2007, 10h37

Salut à tous,

Je suis débutant et j'ai une petite question concernant la mise en forme de texte dans une page html.

J'essaye de gérer la taille d'une cellule qui contient un texte, c'est-à-dire de gérer la taille du texte en hauteur et en largeur, tout en ayant un retour à la ligne automatique, ce qui permet au texte de se réaligner automatiquement en fonction de la taille de la cellule.

Concrètement, je veux centrer un texte (verticalement et horizontalement) au milieu d'une cellule de ma page html et créer une bordure ou marge qui empêchent à celui-ci de se retrouver collé au bord de la cellule. Bref, je veux qu'il y aie un espace vide tout autour du texte, entre le texte et les bords de la cellule et que je puisse décider de la taille de cet espace vide.

Comment faire ça? La chose qui me paraissait logique, c'était de mettre une cellule dans une autre cellule, comme ceci:

<table><td width="200"><td width="140" align="center" valign="middle">mon texte</td></td></table>

Par exemple, ici, j'ai un espace de 30 pixels de chaque côté de mon texte. Je pourrais aussi préciser height="" de manière à déterminer une marge en hauteur. Voilà le genre de chose que je voudrais.

Mes connaissances sont minimes; je sais que cet arrangement fonctionne quand j'insére de l'html dans le post d'un forum mais j'ai un doute que ça fonctionne avec la structure d'une page html. J'ai essayé de le faire et ça ne fonctionne pas, ma cellule contenant le texte se place à côté de la cellule de ma structure html et non à l'intérieur.

Bref, voici mon code:

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
88
89
90
91
92
93
 
<HTML>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<BODY BGCOLOR=#000000 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (index.ai) -->
<TABLE WIDTH=800 BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center" valign="middle">
<TR>
<TD COLSPAN=3 ALIGN=left VALIGN=top>
<IMG SRC="images/index_01.gif" WIDTH=229 HEIGHT=160 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top>
<IMG SRC="images/index_02.gif" WIDTH=342 HEIGHT=160 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top>
<IMG SRC="images/index_03.gif" WIDTH=229 HEIGHT=160 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=6 ALIGN=left VALIGN=top>
<IMG SRC="images/index_04.gif" WIDTH=44 HEIGHT=441 ALT=""></TD>
<TD ALIGN=left VALIGN=top>
<IMG SRC="images/index_05.gif" WIDTH=10 HEIGHT=9 ALT=""></TD>
<TD COLSPAN=7 ALIGN=left VALIGN=top>
<IMG SRC="images/index_06.gif" WIDTH=692 HEIGHT=9 ALT=""></TD>
<TD ALIGN=left VALIGN=top>
<IMG SRC="images/index_07.gif" WIDTH=10 HEIGHT=9 ALT=""></TD>
<TD ROWSPAN=6 ALIGN=left VALIGN=top>
<IMG SRC="images/index_08.gif" WIDTH=44 HEIGHT=441 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=9 WIDTH=712 HEIGHT=310 bgcolor="331F33"><b><center><br><font face="arial" color="#FF1A00" size="5">Ce site est interdit aux moins de 18 ans !!!<font><br><br><font color="#FFCC66" size="3">Cet accès est strictement interdit aux mineurs.</font><br><font face="arial" color="#FF99FF" size="3">En validant le bouton "Entrer" vous certifiez avoir la majorité requise dans votre pays de résidence. Vous certifiez avoir pris connaissance des obligations suivantes :</font><br><br><font face="arial" color="#FFFFFF" size="2">• Je suis majeur et averti du caractère pornographique du site auquel j'accède.<br>• Je m'engage à ne pas dévoiler l'existence de ce site et à ne pas en diffuser le contenu à des mineurs.<br>• Je certifie m'engager à mettre en oeuvre tous les moyens existants à ce jour pour empècher n'importe quel mineur d'utiliser mon ordinateur pour parvenir sur ce site.<br>• Je consulte ce site à titre personnel en n'impliquant aucune société ou organisme d'Etat.<br>• Je décharge l'éditeur de ce site de toute responsabilité si un mineur venait à accéder à ce site par négligence de ma part de quelque manière possible!<br><br><i><font face="arial" color="#FF99FF" size="2">Si vous avez lu ces avertissements et êtes en accord avec ceux-ci,
vous êtes invité à entrer dans le forum.</i></font></b></center></TD>
</TR>
<TR>
<TD ALIGN=left VALIGN=top>
<IMG SRC="images/index_10.gif" WIDTH=10 HEIGHT=9 ALT=""></TD>
<TD COLSPAN=7 ALIGN=left VALIGN=top>
<IMG SRC="images/index_11.gif" WIDTH=692 HEIGHT=9 ALT=""></TD>
<TD ALIGN=left VALIGN=top>
<IMG SRC="images/index_12.gif" WIDTH=10 HEIGHT=9 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=9>
<IMG SRC="images/index_13.gif" WIDTH=712 HEIGHT=25 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3 ROWSPAN=2>
<IMG SRC="images/index_14.gif" WIDTH=226 HEIGHT=88 ALT=""></TD>
<TD ALIGN=left VALIGN=top>
<EMBED SRC="images/bouton_entrer.swf" WIDTH=114 HEIGHT=61 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="images/index_16.gif" WIDTH=29 HEIGHT=88 ALT=""></TD>
<TD ALIGN=left VALIGN=top>
<EMBED SRC="images/bouton_sortir.swf" WIDTH=114 HEIGHT=61 ALT=""></TD>
<TD COLSPAN=3 ROWSPAN=2>
<IMG SRC="images/index_18.gif" WIDTH=229 HEIGHT=88 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/index_19.gif" WIDTH=114 HEIGHT=27 ALT=""></TD>
<TD>
<IMG SRC="images/index_20.gif" WIDTH=114 HEIGHT=27 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/espaceur.gif" WIDTH=44 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/espaceur.gif" WIDTH=10 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/espaceur.gif" WIDTH=175 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/espaceur.gif" WIDTH=41 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/espaceur.gif" WIDTH=114 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/espaceur.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/espaceur.gif" WIDTH=114 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/espaceur.gif" WIDTH=44 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/espaceur.gif" WIDTH=175 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/espaceur.gif" WIDTH=10 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/espaceur.gif" WIDTH=44 HEIGHT=1 ALT=""></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>

Et c'est ce texte-ci que j'essaye de mettre en forme:

Code :

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

1
2
<TD COLSPAN=9 WIDTH=712 HEIGHT=310 bgcolor="331F33"><b><center><br><font face="arial" color="#FF1A00" size="5">Ce site est interdit aux moins de 18 ans !!!<font><br><br><font color="#FFCC66" size="3">Cet accès est strictement interdit aux mineurs.</font><br><font face="arial" color="#FF99FF" size="3">En validant le bouton "Entrer" vous certifiez avoir la majorité requise dans votre pays de résidence. Vous certifiez avoir pris connaissance des obligations suivantes :</font><br><br><font face="arial" color="#FFFFFF" size="2">• Je suis majeur et averti du caractère pornographique du site auquel j'accède.<br>• Je m'engage à ne pas dévoiler l'existence de ce site et à ne pas en diffuser le contenu à des mineurs.<br>• Je certifie m'engager à mettre en oeuvre tous les moyens existants à ce jour pour empècher n'importe quel mineur d'utiliser mon ordinateur pour parvenir sur ce site.<br>• Je consulte ce site à titre personnel en n'impliquant aucune société ou organisme d'Etat.<br>• Je décharge l'éditeur de ce site de toute responsabilité si un mineur venait à accéder à ce site par négligence de ma part de quelque manière possible!<br><br><i><font face="arial" color="#FF99FF" size="2">Si vous avez lu ces avertissements et êtes en accord avec ceux-ci,
vous êtes invité à entrer dans le forum.</i></font></b></center></TD>

Merci d'avance pour votre aide!

**Tober** · 21/08/2007, 10h46

Pour gérer l'espace à l'intérieur d'une cellule (ou d'un block en général), il y a la propriété CSS "padding" (aussi padding-left, padding-top, ...) qui indique la distance entre la bordure du block et le texte.

**zargeus** · 21/08/2007, 14h29

Envoyé par Gizmil

<table><td width="200"><td width="140" align="center" valign="middle">mon texte</td></td></table>

Par exemple, ici, j'ai un espace de 30 pixels de chaque côté de mon texte. Je pourrais aussi préciser height="" de manière à déterminer une marge en hauteur. Voilà le genre de chose que je voudrais.

tu ne peux pas imbriqué des cellules td
comme tober le suggère utilise des padding appliquées à cellules du tableau
ou mieux

Code :

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

1
2
3
4
5
6
<table border="0" cellpadding="30" cellspacing="30" >
 <tr>
  <td>montexte avec un espace de 30px haut, bas, droite et gauche</td>
 </tr>
</table>

**koala01** · 21/08/2007, 17h13

Salut,

De prime abord, il faut déjà savoir que, le simple fait d'utiliser les tableaux pour la mise en forme, c'est relativement

L'utilisation des tableaux devrait être réservée à... l'affichage de données tabulaires

Mais ceci dit, tu peux tres bien jouer avec des valeurs (fixes ou relatives) au niveau d'attributs tels que width et heigth, pour régler la taille des blocs, et avec le margin, le padding (attention, microsof a implémenté le padding d'une manière bien à lui

), les attribut text-aling et autre afin de régler la position que prend le texte au sein d'un bloc

**Gizmil** · 21/08/2007, 18h08

Ok, merci pour vos indications, les gars, je vais tester ça!

Pour Koala > Pourquoi les tableaux, c'est pas bien? Que peut-on utiliser d'autre?

**koala01** · 21/08/2007, 18h28

Principalement parce que tous les visiteurs ne sont pas tous des gars et des filles en pleine santé et possession de toutes leurs facultés (visuelles, entre autres)...

Il y a quantité de visiteurs potentiels qui utilisent, qui un synthétiseur vocal, qui une tablette brail qui...

Le fait d'utiliser les tableaux uniquement pour arriver à faire une mise en forme, et surtout si on part sur l'idée de tableaux imbriqués, va faire que ces outils ne seront plus capables de présenter le contenu d'une manière "cohérente et logique".

De plus, de manière générale, l'idée de base est d'essayer de séparer clairement le contenu de la manière dont il est affiché, afin, entre autre, de permettre que le contenu puisse s'afficher indifféremment sur un écran, un projecteur, papier ou un GSM...

Il n'y a pas à proprement parler de règle pour dire quoi utiliser d'autre, mais on peut déjà se baser sur le fait qu'une balise est une balise "de bloc" ou une balise "en ligne" et, surtout, sur la sémantique de la balise.

Mais tout cela, ca pourrait faire un débat à part

Gérer la taille d'un texte dans une page html

HTML

Discussions similaires

Partager

Partager