Problème d'héritage ...

Bonjour,

Dans mon site de tutoriaux Fireworks: Fireworks Zone chaque tutorial est encadré par une div avec l'id=tutorial:

<div id="tutorial">

../..

</div>

A partir de id=tutorial j'ai écrit des règles valables pour tout le tutorial: listes, h1, h2, tableaux etc.

Pour les tableaux j'ai écrit par exemple que tous les fonds étaient verts:

#tutorial table {... } avec color-background vert


Mais aujourd'hui j'aimerais pouvoir échapper aux règles de la balise id=tutorial.

Au début de chque tutorial, voir exemple, j'ai créé un tableau contenant des infos sur le tutorial: date de création, auteur, nb de hits, etc. J'ai entouré le tableau d'une div avec l'id=tutinfo. Nouvelle structure:

<div id="tutorial">

<div id="tutinfo">
<table>
<--infos sur le tutorial -->
</table>
</div>

</div>

Dans id=tutinfo jai fixé le fond du tableau en blanc mais id=tutinfo hérite de id=tutorial et le fond reste vert.

Est ce qu'il y a un moyen de se sortir de cet héritage? Est ce que la structure du tutorial est à modifier?

Thierry,
Merci
Modifié par fireworkszone (30 Apr 2008 - 08:34)

Hello

La cause de ton problème : des styles mal organisés.

#tutinfo table {
...
background: #FFFFFF; }


/* et un peu plus loin... */


#tutorial table {
...
background: #92C428; }

Le style sur #tutorial table écrase celui de #tutinfo table, car placé plus loin dans le code...

BeliG a écrit :
Le style sur #tutorial table écrase celui de #tutinfo table, car placé plus loin dans le code...

... sans négliger le fait que les sélecteurs sont de priorité équivalente (0101).

On pourrait garder l'ordre actuel, mais utiliser en premier un sélecteur ayant plus de poids:

#tutorial #tutinfo table {}

(priorité 0201).

Lire: http://openweb.eu.org/articles/cascade_css/