[css] div met diverse subklasses

[judgem]

Gegroet,

Ik ben bezig aan een stylesheet welke ik aan een stuk of 5 pagina's wil hangen. De pagina's zijn qua opzet nagenoeg gelijk maar hebben toch hun eigen unieke kenmerken.

Zo hebben ze allemaal een topbanner met gelijke afmetingen maar een andere afbeelding. Ik dacht het zo op te lossen:

code:

#boven
{
  height: 60px;
  position: relative;
  top: 0; 
  left: 0;
  background-position: 0 0;
  background-color: none;
  text-align: right;
  font-weight: bold;
}

#boven.x
{
  color:  #ffffff;
  background: url(plaatjex) no-repeat fixed;
}

#boven.y
{ 
  color:  #ffffff;
  background: url(plaatjey) no-repeat fixed;
}

#boven.z
{
  color:  #0B5D52;
  background: url(plaatjez) no-repeat fixed;
}

Zo erven alle klassen de eigenschappen van de div #boven en zorgen zelf voor een eigen tekstkleur.

Mooi niet dus. In IE6 toont hij deze eigenschappen alleen voor klasse x maar y en z toont hij niet. Wissel ik x, y en z om in volgorde in mijn stylesheet dan blijft alleen de bovenste werken en de 2 onderste dus niet. De eigenschappen van breedte en dergelijke werken overigens gewoon wel. Ook de plaatjes staan allemaal in dezelfde map dus daar lijkt het me ook niet aan kunnen liggen.

Wie weet hier een oplossing voor? In Firefox 0.9 werkt het overigens wel gewoon. De divs roep ik gewoon aan met

code:

<div id="boven" class="x">

BvD

[BtM909]

Id's horen uniek te zijn en classes gebruik je voor items die je meerdere malen gebruikt. Waarom draai je het niet om Gebruik je boven als class en de letters als id's.

Lijkt me logischer

[Michali]

probeer gewoon eens div.x div.y en div.z. Volgens mij is het namelijk niet legaal css om een id te selecteren.

[judgem]

Ik ga eens een poging wagen. Klinkt zeer aannemelijk wat je daar stelt.

Wordt vervolgd

[judgem]

hmmz. Wat zou de HTML aanroep dan worden als ik zo brutaal mag zijn?

[Verwijderd]

Michali schreef op 31 augustus 2004 @ 16:08:
probeer gewoon eens div.x div.y en div.z. Volgens mij is het namelijk niet legaal css om een id te selecteren.

onzin

TS: check je css even op rare characters, was hier laatst ook iemand met een non breaking space in z'n css

verder ziet het er gewoon goed uit, zou moeten werken.
idd moeten id's uniek zijn maar natuurlijk niet over meerdere pagina's.

verder is het verschil in uniciteit niet het enige verschil tussen id en class, denk daar goed bij na wanneer je ze gebruikt
id is een naam die je een element geeft, class is om aan te geven tot weke (sub)groep ie behoort (zeg maar de functie van het element als uitbreiding op de tagName)

[ Voor 40% gewijzigd door Verwijderd op 31-08-2004 16:22 ]

[JoeKurr]

Als je het helemaal goed wil doen, moet je van boven een class maken en x, y en z worden dan id's.

Dus #boven in je stylesheet wordt dan .boven, en .x, .y en .z worden dan #x, #y en #z.

[judgem]

JoeKurr schreef op 31 augustus 2004 @ 16:36:
Als je het helemaal goed wil doen, moet je van boven een class maken en x, y en z worden dan id's.

Dus #boven in je stylesheet wordt dan .boven, en .x, .y en .z worden dan #x, #y en #z.

U wordt bij deze benoemd tot gouden tipgever. Hulde en veel dank zijn uw deel!

[BtM909]

judgem schreef op 31 augustus 2004 @ 16:50:
[...]
U wordt bij deze benoemd tot gouden tipgever. Hulde en veel dank zijn uw deel!

In hoeverre is dat anders met mijn reply?

[judgem]

BtM909 schreef op 31 augustus 2004 @ 16:52:
[...]

In hoeverre is dat anders met mijn reply?

Ook voor u:

ik was op dat moment even dusdanig met mijn hoofd er niet bij dat het kwartje niet viel.

Maar ik blijf het toch apart vinden. Is het nu in talen als Java (Class Fruit, Class Appel extends Fruit, Class Elstar extends Appel, etc) niet precies andersom of ben ik nu gek?

Ach ja. Het is ook al laat.

[Verwijderd]

een class in programmeertalen is ook heel wat anders, dit heeft niks met objecten te maken

[Verwijderd]

In principe is het niet helemaal top om verschillende id's te geven aan elementen die precies dezelfde functie vervullen, daar bestaat het class-attribuut voor. (zoals mophor ook al aangeeft).

Ik heb het probleem niet geprobeerd te reproduceren maar ik zou iig ff controleren of het wel werkt als je de 'background' goed definieert, dus inclusief background-color en position, wellicht nog een !important her en der...

Verder kun je ook gebruik maken van meerdere classnames, dus in je html zoiets als:

code:

<div class="boven x">

[T-MOB]

Blij dat het werkt, maar persoonlijk vind ik de logica erachter niet helemaal lekker. Als je namelijk paginaspecifieke zaken wil gaan aanpassen in een CSS die voor je hele webpagina is komt het mij voor dat het consistenter is om per pagina dezelfde "uitbreiding" te gebruiken. Met een ID per element kun je per pagina dus maar 1 element specifiek stylen.

Beter lijkt mij om dan een ID op HTML of BODY te zetten zodat je elk element in je pagina uniek kan stylen.

code:

<html id="pagina-x">
{knip}
<div id="boven">
...
</div>

<ul id="menu">
...
</ul>

Met CSS:

Cascading Stylesheet:

#boven { ... mooie stijl ..}

#pagina-x #boven { background: #FFF url(imd.png) no-repeat top left;

etc..

[Killemov]

judgem schreef op dinsdag 31 augustus 2004 @ 17:04:
Maar ik blijf het toch apart vinden. Is het nu in talen als Java (Class Fruit, Class Appel extends Fruit, Class Elstar extends Appel, etc) niet precies andersom of ben ik nu gek?

Ehm volgens mij is het meer appel extends appel.

.appel {
color: green;
}

.appel {
font-weight: bold;
}

De resulterende class appel heeft dus beide properties.

Verwijderd schreef op dinsdag 31 augustus 2004 @ 17:12:
een class in programmeertalen is ook heel wat anders, dit heeft niks met objecten te maken

Maar natuurlijk wel. Ook css is een programmeertaal.

Ter zake, ik zoek een manier te vinden om mijn css drastisch in te krimpen. Een hele gemakkelijke manier zou zijn om gewoon hele styles te kunnen overerven:

.elstar extends appel {
font-weight: bold; // color: green overerven van appel
}

Ik heb het niet kunnen vinden.

[André]

Het duurt 3 jaar, maar dan heb je wel antwoord

[crisp]

Ter aanvulling: het probleem van de topicstarter betreft gewoon een bug in IE6 die in IE7 gefixed is