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>.

Invité · 26/08/2011, 17h05

Pourtant, je t'avais fait une belle <table> ici !
Et mis ce lien :
-> Les tableaux (XHTML & CSS)

ps: SI c'est juste un MENU que tu veux afficher, une liste non ordonnées (<ul><li>) serait plus judicieuse.
-> Des menus déroulants grâce aux CSS
-> La galerie CSS > Barres de navigation / Menus horizontaux

**cuddy** · 26/08/2011, 17h12

j'ai lu le tutorial, je l'ai suivi, mais dedans il n'appel pas les css avec <td classe="***" >
donc je comprends pas

Invité · 26/08/2011, 17h19

Je pense que tu n'as pas lu jusque là, et donc pas jusqu'au bout, ni essayé de faire les exercices par toi-même.

Si nécessaire, commence par le début :
-> Les meilleurs cours et tutoriels CSS : Pour débuter

ps : on peut t'aider, mais pas apprendre à ta place ...

**cuddy** · 26/08/2011, 17h45

j'ai lu votre tutoriel CSS. Mais visiblement ya des choses qui m'echappe, mais merci de votre aide

**Vil'Coyote** · 26/08/2011, 21h09

l'application d'une classe " class='machin' " ce fait losrque tu ne définie pas de relation entre soit un élément (table, h1 etc ...) ou un id #monidelement

dans ton cas tu défini un css sur la table mais pas sur ces div puisque tu fait .td-menu donc en interprétation cela correspond a une class à appliquer via l'utilisation de " class='td-menu' "

un .table td { .... } te permet de forcer le css sur tout les objet td d'une table mais là encore dans ton cas tu souhaites faire du particulier donc tu es obliger de généraliser au max sur ton .table et de minimiser sur les td en leur assignant une classe particulière.

**cuddy** · 27/08/2011, 09h08

merci c'est loin d'être simple .
Je viens d'y arriver

tableau et CSS

HTML

Discussions similaires

Partager

Partager