5568 sujets

Sémantique web et HTML

[résolu trop facile] XHTML strict 1.0 et bgcolor cellule tableau

Bonjour a tous.
Je post ici apres avoir longuement lu le site et le forum. Merci a tous, cela fait 15 jours que j'ai entrepris la refonte de mon site aux normes et jusqu'a present votre site m'a donné toutes les reponses. Malheureusement.....

.... j'ai un souci.

Voila vous trouverez ici un tableau généalogique (raccourci pour la cause). Comme vous le voyez la couleur des cellules est variable en fonction de la parenté.

Voila la feuille de style :
a écrit :
table{
border: 2px dotted #0066CC;
width:100%;
}

td{
font: 1em times,verdana,sans-serif;
color: #FFFFFF;
text-align: center;
padding: 1px;
}


et voila le HTML (pas X c'est le problème)
a écrit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>G&eacute;n&eacute;alogie</title>
<link rel="stylesheet" type="text/css" href="styleessai.css" />
</head>
<body>
<table summary="br&ecirc;ve g&eacute;n&eacute;alogie des enfants">
<tr>
<td bgcolor=#FF0033>Famille P</td>
<td bgcolor=#669933>Famille M</td>
<td bgcolor=#FF9933>Famille D</td>
<td bgcolor=#663366>Famille G</td>
</tr>
<tr>
<td colspan=4><br /></td>
</tr>
<tr>
<td bgcolor=#FF0033>Victor et Berthe P</td>
<td></td>
<td bgcolor=#FF9933>Gabriel et x de D</td>
<td></td>
</tr>
<tr>
<td bgcolor=#FF0033>Georges et Marguerite P</td>
<td bgcolor=#669933>Albert et x M</td>
<td bgcolor=#FF9933>Jules et Louise de D</td>
<td bgcolor=#663366>x et Simone G</td>
</tr>
<tr>
<td bgcolor=#FF0033>Jacques P et Monique E</td>
<td bgcolor=#669933>Pierre M et Germaine V</td>
<td bgcolor=#FF9933>Georges de D et Odette B</td>
<td bgcolor=#663366>Alain G et Fran&ccedil;oise V</td>
</tr>
<tr>
<td></td>
<td bgcolor=#669933>Michel M et Christiane P</td>
<td bgcolor=#FF9933>Raoul de D et Bernadette G</td>
<td></td>
</tr>
<tr>
<td></td>
<td bgcolor=#FF6666 colspan=2>Gilles M et S&eacute;gol&egrave;ne de D</td>
</tr>
<tr>
<td></td>
<td bgcolor=#333399 colspan=2>C&eacute;lestin et Marguerite</td>
</tr>
</table>
</body>
</html>


Mon problème et d'arriver a du XHTML strict. pour cela il faut que je vire les spécifications bgcolor dans les <td> mais je ne sais pas comment proceder. Créer une classe par type de couleur de cellule me parait lourd mais je ne sais pas s'il y a une autre solution.
Pour les lignes on definit la classe <tr> et le tour est joué mais pour les cellules je ne sais pas.

Si quelqu'un a une solution ce serait sympa que ce soit via la definition d'une classe. ou carrement la suppression des tableaux (attention le tableau grandeur nature ait une centaine de ligne !).

En esperant avoir était clair. Merci
Modifié le 06 Jan 2005 - 11:05
Bonjour, si j'ai bien compris vous voulez mettre des couleurs de fond dans certaines colonnes.
Par exemple si vous voulez un fond noir dans certaines colonnes il faut :
<td class="[b]tdblack[/b]">[i]Jean pierre sait faire du café.[/i]</td>

// On définis une classe, ici tdblack.

.tdblack {
     background = #000000;
            }

// Les propriétés dans le CSS

Voila, j'espère que je ne suis pas à côté de la plaque ^^
Modifié le 06 Jan 2005 - 10:42
Administrateur
Salut,

a écrit :
Mon problème et d'arriver a du XHTML strict. pour cela il faut que je vire les spécifications bgcolor dans les <td> mais je ne sais pas comment proceder.

Il faut utiliser la propriété CSS "background-color", exactement comme tu utilisais bgcolor avant (voir la Doc CSS en lien)

a écrit :
Créer une classe par type de couleur de cellule me parait lourd mais je ne sais pas s'il y a une autre solution.

Il faut effectivement distinguer chaque cellule différente, donc appliquer une classe par cellule. C'est d'ailleurs ce que tu fais déjà en appliquant la couleur à chaque cellule.

a écrit :
Pour les lignes on definit la classe <tr> et le tour est joué mais pour les cellules je ne sais pas.

Le principe est exactement le même que ce que tu fais déjà :
- pour l'instant tu appliques à chaque cellule (td) un bgcolor
- en strict, tu appliqueras à chaque cettule une classe différente selon la couleur

ex : 
<td class="famille1">...</p>

CSS :
.famille1 {
background-color : #FF0033;
}


a écrit :
ou carrement la suppression des tableaux (attention le tableau grandeur nature ait une centaine de ligne !).

Il y'aurait bien le positionnement flottant (voir lien vers Tutoriels) qui pourrait afficher ton arbre généalogique, mais honnêtement je ne suis pas sûr qu'il serait bien plus approprié qu'un tableau.
Administrateur
Gaylord.P a écrit :
B
// On définis une classe, ici tdblack.

Tu as été plus rapide que moi Smiley smile

Juste pour pinailler : il est préférable de ne pas donner de nom de couleurs aux classes. En effet, si tu veux changer ta couleur au bout de 6 mois, tu vas te retrouver avec un .tdblack de couleur rouge ! Smiley smile
Il est préférable de donner un nom selon la fonction ou l'utilité.
Ok c'est bien ce qui me semblait !
En gros pour chaque couleur je fais une class puis en fonction de l'attribut que je veux donner à la cellule je lui applique la class de couleur correspondante.

Cela m'amene a un remarque. L'utilisation CSS ici ne permet pas d'alleger le code. En effet on remplace
<td bgcolor=#000000></td> par
<td class ="couleurenfant"></td> + le css
Bon certes cela permet de changer facilement les couleurs et c'est deja pas mal.

Pour le flottant je ne me sens pas encore d'attaque pour arriver a aligner les 200 et quelques div que la généalogie suppose ! Smiley biggol

Merci a vous en tout cas d'avoir confirmé cette piste, je me lance.
Et je mets le resolu Smiley cligne
Je pense que le code sera plus léger parce que si tu appelles plusieurs fois la classe correspondante, le navigateur sera que c'est la même (le cache).

En plus, tu n'auras pas à mettre à chaque fois bgcolor donc c'est quand même mieux.

Et surtout comme le disait raphaël, si tu veux changer la couleur, il n'y que le CSS changer Smiley smile
Effectivement j'avais oublié les propriétés du cache. Quand je pense code leger je pense toujours a ce que je vois et non a ce que lit le navigateur et au temps qu'il met a le traduire.
Donc je retire ma remarque dans le cas ci dessus le css est plus long mais l'interpretation plus rapide ce qui fait que pour moi le code est plus lourd mais plus leger pour le navigateur Smiley confus

Merci en tout cas.
Sujet clos
Aller à