[CSS] Overerving classes

Morguh allemaal,

Ben een beetje met CSS aan het stoeien en zit met een probleem:

Ik heb een menu met allerlei submenu's De menu's worden nu in divjes gezet en op hun plek gezet op de volgende manier:

Cascading Stylesheet:

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

#sub0  {     left:0px;     position:absolute;     z-index:1;      visibility: hidden;     top:106px;     width:600px;     height:13px; } #sub1  {     left:100px;     position:absolute;     z-index:1;      visibility: hidden;     top:106px;     width:600px;     height:13px; } #sub2  {     left:200px;     position:absolute;     z-index:1;      visibility: hidden;     top:106px;     width:600px;     height:13px; } #sub3  {     left:200px;     position:absolute;     z-index:1;      visibility: hidden;     top:106px;     width:600px;     height:13px; }

de opletttende Tweaker ziet dat
Cascading Stylesheet:

1 2 3 4 5 6

position:absolute;     z-index:1;      visibility: hidden;     top:106px;     width:600px;     height:13px;

3x voorkomt (en nog vaker, maar het voorbeeld is voldoende)

Nu wil ik dit in een 'globale' class zetten en overal in zetten. Dit heb ik op de volgende manier geprobeerd:


Cascading Stylesheet:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

.#sub0, .#sub1, .#sub2 {     position:absolute;     z-index:1;      visibility: hidden;     top:106px;     width:600px;     height:13px; } #sub0  {     left:0px; } #sub1  {     left:100px; } #sub2  {     left:200px; }

Dit werkt niet, ook
Cascading Stylesheet:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

submenu {     position:absolute;     z-index:1;      visibility: hidden;     top:106px;     width:600px;     height:13px; } #sub0 inherents submenu {     left:0px; } #sub1 inherents submenu {     left:100px; } #sub2 inherents submenu {     left:200px; }

werkt niet. Ben ik gedoemd om echt alle classes los te defineren?

De aanroep in HTML gebeurt door:

HTML:

1	<div id=sub0>tekst</div>

Je moet een class meegeven aan de submenu divs. Vervolgens kan je de class algemeen stylen, en de specifieke styles aan de id's hangen:
HTML:

1	<div class="submenu" id="sub0">tekst</div>

Cascading Stylesheet:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

.submenu {     position:absolute;      z-index:1;       visibility: hidden;      top:106px;      width:600px;      height:13px; } #sub0   {      left:0px;  }  #sub1   {      left:100px;  }  #sub2   {      left:200px;  }

Cascading Stylesheet:

1	.#sub0, .#sub1, .#sub2 { }

haal daar die punt eens weg; het zijn id's en geen classes

Wat MichelVH zegt moet idd werken.
Je zou ook 2 classes op 1 element kunnen stoppen doormiddel van een spatie ^^

<div class="style1 style2" ></div>

bedenk wel dat dit een compleet foute manier is van class gebruik, class is niet bedoeld voor stijltoepassingen eigenlijk.

Bedenk ook dat je meerdere classes aan 1 element kan hangen en je niet noodzakelijk hoeft te werken met combinaties van class en id (overigens is ook id niet bedoeld voor stijltoepassingen)

id en class zijn toch wel dé aanhaakpunten voor css.. hoe style jij je pagina's dan? met inline styles?

edit:
je kunt uiteraard ook de andere verschillende attributen gebruiken om je elementen te stylen, maar id's en classes worden toch wel door zo goed als iedere webdesigner (nog) gebruikt.

Sappie wijzigde dit bericht 17-11-2005 10:37 (50%)

quote:

mophor schreef op donderdag 17 november 2005 @ 10:22:
bedenk wel dat dit een compleet foute manier is van class gebruik, class is niet bedoeld voor stijltoepassingen eigenlijk.

Bedenk ook dat je meerdere classes aan 1 element kan hangen en je niet noodzakelijk hoeft te werken met combinaties van class en id (overigens is ook id niet bedoeld voor stijltoepassingen)

ik snap dat helemaal niet.... class en id zijn wel degelijk gewone selectors voor CSS-eigenschappen, net zoals een Tag gebruikt kan worden als selector, of pseudo-classes, of child en descendant, attribuut-selectors

http://www.w3.org/TR/REC-CSS2/selector.html

overigens het kan wel soms handig zijn, om gewoon wat simpelere duirekte CSS toe te passen, bv:

Cascading Stylesheet:

1 2 3

UL#menu LI {    display: block; float: left: width: 33% }

HTML:

1 2 3 4 5

<ul id="menu">    <li>item 1</li>       <li>item 2</li>    <li>item 3</li> </ul>

is wat sneller, en overzichtelijke code dan hiervoor een 'class' gebruiken ....
Maar dat is altijd persoonlijke voorkeur, ik kies meestal ervoor zo min mogelijk attributen te gebruiken, omdat attributen de neiging hebben al snel HTML code onoverzichtelijk te maken.

RM-rf wijzigde dit bericht 17-11-2005 10:54 (29%)

Je hebt die hele id's niet nodig als je de parent buttons position:relative geeft. Left en top zijn dan tov die button, en kunnen dus voor elke sub hetzelfde zijn. bv,
HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<ul id="nav">     <li><a href="">button1</a>         <ul>             <li><a href="">sub1</a></li>             <li><a href="">sub1</a></li>             <li><a href="">sub1</a></li>         </ul>     </li>     <li><a href="">button2</a>         <ul>             <li><a href="">sub2</a></li>             <li><a href="">sub2</a></li>             <li><a href="">sub2</a></li>         </ul>     </li> </ul>

met
Cascading Stylesheet:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

ul#nav, ul#nav ul, ul#nav li {     list-style:none;     padding:0;     margin:0; } ul#nav li {     position:relative;     float:left;     padding:0 20px; } ul#nav li ul {     position:absolute;     top:20px;     left:0; } ul#nav li li {     float:none; }

Clay wijzigde dit bericht 17-11-2005 10:52 (27%)

quote:

RM-rf schreef op donderdag 17 november 2005 @ 10:50:
[...]

ik snap dat helemaal niet....

Class en Id zijn wel common aanhaakpunten ja (temeer omdat je in IE de boel niet aan andere attributen kan haken), maar class en id hebben niet als doel om er stijl aan te hangen. Het is juist andersom: elementen die tot een bepaalde classe behoren of een bepaalde identiteit hebben, worden soms anders weergegeven (al hoeft dit niet, je kan ook best classes hebben zonder stijl)

Ik heb er al eens eerder een heel verhaal over geschreven:
http://www.rikkertkoppes.com/thoughts/class-and-style

mophor wijzigde dit bericht 17-11-2005 11:35 (10%)

quote:

mophor schreef op donderdag 17 november 2005 @ 11:33:

Ik heb er al eens eerder een heel verhaal over geschreven:
http://www.rikkertkoppes.com/thoughts/class-and-style

selectief quoten uit de spec...:

quote:

The class attribute has several roles in HTML:

• As a style sheet selector (when an author wishes to assign style information to a set of elements).
• For general purpose processing by user agents.

oftewel, 'class' als stylesheet selector wordt expliciet genoemd in de W3C-spec...
daarnaast laten ze het open als een 'general purpose' methode voor bepaalde useragent-rules, maar daar zijn volgens mij geen voorbeelden van, alhoewel het in specifieke HTML-toepassingen gebruikt zou kunnen worden

dat klopt zeker, maar bedenk wel dat het class attribuut een subclasse van een element aangeeft, het is slim om deze wat te laten zeggen over de functie van het element. Verder lijkt het me natuurlijk duidelijk dat je zo min mogelijk selectors moet hebben die verwijzen naar zelfbedachte classes of id's, ivm portability.

Vandaar dus mijn opmerking dat ik het foutief classegebruik vond