tableau et CSS [Résolu]

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

jreaux62 · 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

jreaux62 · 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 tutorial, j'ai lu les cours sur le site du zero. 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

26/08/2011, 16h02	#3
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 789 Points : 35 789	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 __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

26/08/2011, 16h27	#7
FirePrawn Modérateur Sébastien Ingénieur réalisateur Inscription : mars 2011 Messages : 776 Détails du profil Informations personnelles : Nom : Sébastien Âge : 24 Localisation : France, Haut Rhin (Alsace) Informations professionnelles : Activité : Ingénieur réalisateur Secteur : Industrie Informations forums : Inscription : mars 2011 Messages : 776 Points : 2 344 Points : 2 344	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>. __________________ - Avant toute chose : lire le mode d'emploi du forum et ses règles. - avant de poster - Je ne réponds pas aux questions techniques en MP.
	00

26/08/2011, 17h05	#8
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 994 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 994 Points : 5 787 Points : 5 787	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 __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

26/08/2011, 17h19	#10
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 994 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 994 Points : 5 787 Points : 5 787	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 ... __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

26/08/2011, 16h00	#2
MonsieurSmith Membre actif Développeur informatique Inscription : août 2008 Messages : 69 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : août 2008 Messages : 69 Points : 150 Points : 150	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.
	00

26/08/2011, 16h09	#4
cuddy Invité de passage Inscription : mai 2011 Messages : 18 Détails du profil Informations forums : Inscription : mai 2011 Messages : 18 Points : 4 Points : 4	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é
	00

26/08/2011, 16h23	#6
cuddy Invité de passage Inscription : mai 2011 Messages : 18 Détails du profil Informations forums : Inscription : mai 2011 Messages : 18 Points : 4 Points : 4	merci
	00

26/08/2011, 17h12	#9
cuddy Invité de passage Inscription : mai 2011 Messages : 18 Détails du profil Informations forums : Inscription : mai 2011 Messages : 18 Points : 4 Points : 4	j'ai lu le tutorial, je l'ai suivi, mais dedans il n'appel pas les css avec <td classe="***" > donc je comprends pas
	00

26/08/2011, 17h45	#11
cuddy Invité de passage Inscription : mai 2011 Messages : 18 Détails du profil Informations forums : Inscription : mai 2011 Messages : 18 Points : 4 Points : 4	j'ai lu votre tutorial, j'ai lu les cours sur le site du zero. Mais visiblement ya des choses qui m'echappe, mais merci de votre aide
	00

26/08/2011, 21h09	#12
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 307 Détails du profil Informations personnelles : Âge : 31 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 307 Points : 4 488 Points : 4 488	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.
	00

27/08/2011, 09h08	#13
cuddy Invité de passage Inscription : mai 2011 Messages : 18 Détails du profil Informations forums : Inscription : mai 2011 Messages : 18 Points : 4 Points : 4	merci c'est loin d'être simple . Je viens d'y arriver
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email