[css] Overerven (?)

[DeFeCt]

Ik probeer via een css het een en ander te laten over erfen maar ik kom er niet helemaal uit. Misschien dat iemand ziet wat ik fout doe...

Mijn CSS

code:

/*  set background images tabs, active tab gets 'active' image */


/* left part of tab*/
/*global settings*/
td.clusterNavLeft{
    background-repeat : no-repeat;
    background-attachment : fixed;
    width : 4px;    
    height: 18px;
}

/*setting backgrounds tabs*/
td.clusterNavLeft.WK{
    background-image : url(../images/clustertabLeftActive.gif);
}
td.clusterNavLeft.LTBE{
    background-image : url(../images/clustertabLeft.gif);
}


/* scaleable part of tab*/
/*global settings*/
td.clusterNavScale{
    background-repeat : repeat-x;
    background-attachment : fixed;
    font-weight : bold;
    padding-left : 4px;
    padding-right : 4px;    
    height: 18px;       
}

/*settings per tab*/
td.clusterNavScale.WK{
    background-image : url(../images/clustertabScaleActive.gif);
    color: black;
}
td.clusterNavScale.LTBE{
    background-image : url(../images/clustertabScale.gif);
    color: white;
}


/* right part of tab*/
/*global settings*/
td.clusterNavRight{
    background-repeat : no-repeat;
    background-attachment : fixed;
    width : 4px;    
    height: 18px;   
}

/*settings per tab*/
td.clusterNavRight.WK{
    background-image : url(../images/clustertabRightActive.gif);
}
td.clusterNavRight.LTBE{
    background-image : url(../images/clustertabRight.gif);
}

En mijn HTML

code:

<td class="clusterNavBlackLineActive"></td>
        
<td class="clusterNavLeft WK"></td>
<td class="clusterNavScale WK"><a href="#" class="clusterNav WK">WK</a></td>
<td class="clusterNavRight WK"></td>                
        
<td class="clusterNavBlackLineActive"></td>     

<td class="clusterNavLeft LTBE"></td>
<td class="clusterNavScale LTBE"><a href="#" class="clusterNav LTBE">LTBE</a></td>
<td class="clusterNavRight LTBE"></td>          

<td class="clusterNavBlackLine"></td>

Wat er nu dus gebeurd is dat de clusterNavLeft.gif en de clusterNavScale.gif niet getoond wordt en dat in alle drie de td's (left , scale, right) de clusterNavRigt.gif getoond wordt, en dit snap ik dus niet helemaal... iemand een suggestie waarom dit gebeurd?

Helaas geen online voorbeeld.

[André]

Je gebruikt classes met spaties? En in je stylesheet kun je td. weglaten volgens mij. Ik weet niet of dat iets helpt maar heb even geen tijd om meuk in html te pasten.

[Verwijderd]

code:

td.clusterNavRight.LTBE {
  background-image : url(../images/clustertabRight.gif);
}

Je definieert 2 classes tegelijk, zo lijkt het. Blijkbaar wordt dit hetzelfde opgevat als:

code:

td.clusterNavRight, td.LTBE {
  background-image : url(../images/clustertabRight.gif);
}

Dit is volgens de CSS2 specificaties niet goed, maar ik denk dat je daar verder niet veel aan kunt doen. Een foute implementatie door de browser dus, voor zover ik het zie.

Yogho: waarom zou je dat td weglaten? Afkorten is lang niet altijd bevorderlijk voor de duidelijkheid. Als je die class alleen in een bepaald soort element gebruikt, zet die er dan gewoon lekker voor. Dat is iets makkelijker als je een paar dagen/weken/maanden later er nog eens mee moet werken.

[DeFeCt]

yup, classes met spaties

[DeFeCt]

Verwijderd schreef op 20 augustus 2002 @ 11:51:
Je definieert 2 classes tegelijk, zo lijkt het. Blijkbaar wordt dit hetzelfde opgevat als:

code:

td.clusterNavRight, td.LTBE {
  background-image : url(../images/clustertabRight.gif);
}

Dit is volgens de CSS2 specificaties niet goed, maar ik denk dat je daar verder niet veel aan kunt doen. Een foute implementatie door de browser dus, voor zover ik het zie.

Maar daarvoor heb ik td.clusterNavRight ook gedefinieert met de bedoeling dat td.clusterNavRight.LTBE ook de eigenschappen van td.clusterNavRight overerft.

Op zich lijkt dit ook wel goed te gaan, wat ik niet snap is dat in de andere td's met een duidelijk andere classname de propertie (plaatje) van td.clusterNavRight.LTBE verschijnt.

Tussen de tabjes die uit 3 td's bestaan staat een td met een afbeelding van 1 pixel breed die de ene keer een pixel hoger dan de andere keer moet zijn en die definieer ik met precies dezelfde syntax en dat werkt wel...

code:

td.clusterNavBlackLine{
    background-repeat : no-repeat;
    background-attachment : fixed;
    width : 1px;    
    height: 18px;   
}

td.clusterNavBlackLine.A{
    background-image : url(../images/clustertabBlackLineActive.gif);
}
td.clusterNavBlackLine.B{
    background-image : url(../images/clustertabBlackLineActive.gif);
}
td.clusterNavBlackLine.C{
    background-image : url(../images/clustertabBlackLine.gif);
}
td.clusterNavBlackLine.D{
    background-image : url(../images/clustertabBlackLine.gif);
}

en dat wordt aangeroepen met

code:

<td class="clusterNavBlackLine A"></td>
*knip*
<td class="clusterNavBlackLine B"></td>
*knip*
<td class="clusterNavBlackLine C"></td>
*knip*
<td class="clusterNavBlackLine D"></td>

Dus dat maakt het dubbel wazig.... Waarom werkt dit wel en de drie td's naast elkaar niet ( )

Verwijderd schreef op 20 augustus 2002 @ 11:51:
Yogho: waarom zou je dat td weglaten? Afkorten is lang niet altijd bevorderlijk voor de duidelijkheid. Als je die class alleen in een bepaald soort element gebruikt, zet die er dan gewoon lekker voor. Dat is iets makkelijker als je een paar dagen/weken/maanden later er nog eens mee moet werken.

[/quote]

Het weglaten van de td leverde ook nog andere problemen op voor de font opmaak, dus ik laat hem lekker staan

[André]

Oke, die td kun je laten staan.

En ik heb even op www.w3c.org gekeken en inderdaad je kunt meerder classes definieren door middel van spaties. (dat wist ik nog niet)