Discussion :

[cuddy]

bonjour,
j'ai un souci avec des dimensions de cellule, qui ne reste pas à la taille que je leurs met. ( les cellules noirs et c'est la hauteur de cellule que j'ai mis a 10 qui ne s'applique pas)

http://imageshack.us/photo/my-images/689/pliage.jpg

Code 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
<table width="580" border="0" cellspacing="0">
 
  <tr>
    <th height="10" colspan="4" scope="row" bgcolor="#D7E200" class="titre4">TITRE</th>
  </tr>
 
  <tr>
    <td height="78" colspan="4" scope="row" class="texte1"><p>introduction</p></td>
  </tr>
 
  <tr>
    <td  height="150" rowspan="2" scope="row" bgcolor="#D7E200"><img src="****.jpg" width="120" height="112" /></td>
    <td  width="200" rowspan="2" scope="row" bgcolor="#D7E200" align="left" class="texte4"> - exemple <br />
- exemple <br />
- exemple</td>
    <td width="58" rowspan="8">&nbsp;</td>
    <td width="362" height="10" bgcolor="#000000" class="texte5">titre intermédiaire 1</td>
  </tr>
 
  <tr>
    <td class="texte1"><p>texte d’explication 1</p></td>
  </tr>
 
  <tr>
    <td height="150" rowspan="2" bgcolor="#D7E200" scope="row"><img src="****.jpg"  width="145" height="119" /></td>
    <td width="200" rowspan="2" bgcolor="#D7E200" scope="row" align="left" class="texte4">- exemple<br />
- exemple<br />
- exemple</td>
    <td width="362" height="10" bgcolor="#000000" class="texte5">titre intermédiaire 2</td>
  </tr>
 
  <tr>
    <td class="texte1"><p>Texte intermédiaire 2</p></td>
  </tr>
 
  <tr>
    <td height="150" rowspan="2" bgcolor="#D7E200" scope="row"><img src="****.jpg"  width="143" height="119" /></td>
    <td width="200" rowspan="2" bgcolor="#D7E200" scope="row" align="left" class="texte4">- exemple <br />
- exemple</th>
  <td width="362" height="10" bgcolor="#000000" class="texte5">titre intermédiaire 3</td>
    </tr>
 
  <tr>
    <td class="texte1">Texte intermédiaire 3</td>
  </tr>
 
  <tr>
    <td height="150" rowspan="2" bgcolor="#D7E200" scope="row"><img src="****.jpg"  width="135" height="110" /></td>
    <td width="200" rowspan="2" bgcolor="#D7E200" scope="row" align="left" class="texte4">- exemple <br />
- exemple</td>
    <td width="362" height="10" bgcolor="#000000" class="texte5">titre intermédiaire 4</td>
  </tr>

<tr>

Code :

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

1
2
3
4
 
    <td class="texte1"><p>Texte intermédiaire 4</p></td>
  </tr>
</table>

CSS :

Code css :

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

1
2
3
4
5
6
7
.texte5 {
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align:center;
}

[Kaamo]

Comme ton texte contenu dans le <td> est d'une hauteur plus importante que "10px" (taille de ton <td>), elle ne s'applique pas.
Essaie de mettre une valeur plus élevée que "10". Par exemple "100". Tu verras que la hauteur de la cellule augmentera.
Sinon, il faut réduire la taille de la police à l'intérieur du <td>

Tu ne nous donne pas le CSS de la class "texte5". Pourquoi utiliser du CSS et renseigner la hauteur, largeur et couleur du fond dans la balise <td> ? Mets plutôt ça dans le fichier CSS.

[cuddy]

le texte etant de 12px j'ai augmenté, sur vos conseils, a 14 la hauteur de la cellule. Mais il n'y aucune modification des cellulles a l'affichage.

[Kaamo]

En ayant fait le test, on commence à voir la différence à environ 25/30 px.

Le texte est trop grand à l'intérieur de la cellule

[cuddy]

je comprends pas commence ca trop grands texte 12 cellule 14, je veux pas un grand espace dans la cellule. J'ai essayez avec une cellule de 25 pour une typo de 12 et sa ne fait rien.
En baissant la taille du texte ou en changeant de typo sa ne change rien non plus

[Kaamo]

J'ai essayez avec une cellule de 25 pour une typo de 12 et sa ne fait rien.

Je viens de tester chez moi avec le code que tu as posté ci-dessus, ça fonctionne très bien. Test avec une taille plus probante (exemple : height="100" et font-size:10px

[cuddy]

avec 100 sa marche toute les cellules se mettent a la même taille
j'ai essayez a 30 sa ne marche pas. Mais je ne veux pas d'une cellule de 100 alors comment faire?

[Invité]

le texte etant de 12px ...

je crois que tu confonds 12px et 12pt

12pt -> environ 24-25px

ps : sur firefox ou safari, c'est bon.
I.E. n'en fait encore qu'à sa tête ...

[cuddy]

non non je ne confonds pas le texte est en px dans la css pas en pt.

[Invité]

Bonjour,
cette mise en page avec une <table> est-elle obligatoire ?

Car elle peut se faire avantageusement avec des <div> imbriquées + css !

Voici une solution (ma foi plutôt élégante !) en gardant la <table>, MAIS il faut revoir l'organisation de tes données :

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
	<style type="text/css">
table { 
        width: 580px;
        border-collapse: collapse;
        border: 0;
}
caption h4 {
        background: #D7E200;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
}
caption p {
        font-weight: normal;
        text-align: left;
}
table td { 
        /* border:1px solid #ccc; */ /* (pour test) */
        border: 0;
}
.td-image {
        height: 150px;
        background: #D7E200;
}
/* cellules */
.td-exemple {
        width: 200px;
        background: #D7E200;
        text-align: left;
}
.td-white-space {
        width: 58px;
        /* border-top: transparent; */ /* (pour test avec border 1px) */
        /* border-bottom: transparent; */ /* (pour test avec border 1px) */
}
.td-titre-explication {
        width: 362px;
        vertical-align: top; /* positionne le contenu en haut de la cellule */
}
td .texte5 { /* titre */
        margin:0; padding:0;
        color: #FFFFFF;
        background: #000000;
        width: 100%;
        height: 15px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
}
        </style>

La table :

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
<table>
	<caption>
		<h4>TITRE</h4>
		<p>introduction</p>
	</caption>
 
	<colgroup>
		<col span="1" class="td-image" />
		<col span="1" class="td-exemple" />
		<col span="1" class="td-white-space" />
		<col span="1" class="td-titre-explication" />
	</colgroup>
 
<tbody>
 
	<tr>
		<td><img src="****1.jpg" width="120" height="112" alt="IMAGE 1"/></td>
		<td>
			- exemple 1<br />
			- exemple 1<br />
			- exemple 1
		</td>
		<td>&nbsp;</td>
		<td style="vertical-align:top;">
			<h5 class="texte5">titre intermédiaire 1</h5>
			<p>texte d’explication 1</p>
		</td>
	</tr>
 
	<tr>
		<td><img src="****2.jpg" width="120" height="112" alt="IMAGE 2"/></td>
		<td>
			- exemple 2<br />
			- exemple 2<br />
			- exemple 2
		</td>
		<td>&nbsp;</td>
		<td style="vertical-align:top;">
			<h5 class="texte5">titre intermédiaire 2</h5>
			<p>texte d’explication 2</p>
		</td>
	</tr>
 
	<!-- ............. -->
 
</tbody>
</table>

-> Les tableaux (XHTML & CSS)

Nota : pour I.E., il faut laisser le vertical-align:top; dans le td : <td style="vertical-align:top;">
Don't ask why ...

[cuddy]

merci pour votre réponse, je vais essayez avec votre solution et je reviens vers vous si je n'y arrive pas

[cuddy]

résolu merci