tableau et CSS

**cuddy** · 26/08/2011, 15h54

bonjour, je debute et j'éprouve quelques galères.
Je ne comprends pas pourquoi le css ne s'applique pas

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
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
	<style type="text/css">
 
 
table { 
        margin: auto;
        width: 1254px;
        height: auto;
        border: 0;
}
 
/* cellules */
 
. td-menu1, td-menu2, td-menu4, td-menu5, td-menu6, td-menu7 {
        width: 209px;
        background: #D7E200;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 12px;
        color: #FFF;
}
. td-titre {
        background: #FFF;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 16px;
        color: #000;
}
.td-logo {
        background: #FFF;
        height: 150;
}       
        </style>
</head>
 
<body>
<table>
<colgroup>
		<col span="1" class="td-logo" />
		<col span="1" class="td-titre" />
		<col span="1" class="td-menu1, td-menu2, td-menu4, td-menu5, td-menu6, td-menu7" />
 </colgroup>
 
<tbody>
 
	<tr>
<td width="121"><img src="*****.jpg"/></td>
 
<td colspan="4" width="900">TITRE</td>
<td></td>
 
	</tr>
 
 <tr>
		<td width="209">menu1</td>
		<td width="209">menu2</td>
		<td width="209">menu3</td>
		<td width="209">menu4</td>
        <td width="209">menu6</td>
        <td width="209">menu7</td>
	</tr>
 
	<tr>
		<td width="121" height="500"></td>
		<td colspan="3"></td>
		<td colspan="2"></td>
 
	</tr>
 
 
 
</tbody>
</table>
</body>
</html>

**MonsieurSmith** · 26/08/2011, 16h00

Bonjour,

Ton code CSS pose quelques soucis :

- pour certains sélecteurs CSS ("td-menu1", "td-titre"), on trouve un espace entre le point et le nom : pas bon ;

- pour le style s'appliquant à plusieurs sélecteurs, ne pas oublier de faire précéder le nom de chaque sélecteur par le point réglementaire.

**Bovino** · 26/08/2011, 16h02

Code :

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

. td-menu1, td-menu2, td-menu4, td-menu5, td-menu6, td-menu7

Fort probablement parce qu'un point tout seul, ça signifie pas grand chose et que les balises "td-menu1" à "td-menu7" n'existent pas vraiment

**cuddy** · 26/08/2011, 16h09

J'ai supprimer l'espace entre le point et le texte.
pourriez vous corriger mon code que je sache ou est mon erreur ?
j'avoue être largué

**FirePrawn** · 26/08/2011, 16h19

Bonjour,

Je te conseille de lire un tutoriel sur le CSS.
Mais pour répondre à ta dernière question :

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
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
	<style type="text/css">
 
 
table { 
        margin: auto;
        width: 1254px;
        height: auto;
        border: 0;
}
 
/* cellules */
 
.td-menu {
        width: 209px;
        background: #D7E200;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 12px;
        color: #FFF;
}
.td-titre {
        background: #FFF;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 16px;
        color: #000;
}
.td-logo {
        background: #FFF;
        height: 150;
}       
        </style>
</head>
 
<body>
<table>
<!-- colgroup ne sert à rien -->
<colgroup>
		<col span="1" class="td-logo" />
		<col span="1" class="td-titre" />
		<col span="1" class="td-menu1, td-menu2, td-menu4, td-menu5, td-menu6, td-menu7" />
 </colgroup>
 
<tbody>
 
	<tr>
<td width="121"><img src="*****.jpg"/></td>
 
<td colspan="4" width="900" class="td-logo">TITRE</td>
<td></td>
 
	</tr>
 
 <tr>
		<td width="209" class="td-menu">menu1</td>
		<td width="209" class="td-menu">>menu2</td>
		<td width="209" class="td-menu">>menu3</td>
		<td width="209" class="td-menu">>menu4</td>
        <td width="209" class="td-menu">>menu6</td>
        <td width="209" class="td-menu">>menu7</td>
	</tr>
 
	<tr>
		<td width="121" height="500"></td>
		<td colspan="3"></td>
		<td colspan="2"></td>
 
	</tr>
 
 
 
</tbody>
</table>
</body>
</html>

**cuddy** · 26/08/2011, 16h23

merci

**FirePrawn** · 26/08/2011, 16h27

Et j'ajouterai que la mise en forme avec des tableau n'est plus au goût du jour.
Renseigne toi sur les <div></div>.

tableau et CSS

HTML

Vue hybride

Discussions similaires

Partager

Partager