Hoofdcategorieën

[RSS] Forum » DevschuurŽ » Webdesign, Markup & Clientside Scripting » [CSS] Overerving classes

Topicacties

[CSS] Overerving classes

Pagina: 1

Reageer Nieuw Topic

offline Geplaatst op donderdag 17 november 2005 10:08

Acties: [view][quote]

Door: Jaspertje
Max & Milo.. lief
Berichten: 2.267
Reg. datum: 06 september 2001
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>

Rooie poesjes

offline Geplaatst op donderdag 17 november 2005 10:13

Acties: [view][quote]

Door: MichelVH
Berichten: 152
Reg. datum: 04 oktober 2001
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; 
}

Don't be afraid of the dark, be afraid of what it hides

online Geplaatst op donderdag 17 november 2005 10:17

Acties: [view][quote]

Door: crisp
Devver / Moderator WEB
Papa van Jeremy \o/
Berichten: 30.688
Reg. datum: 24 februari 2000

Cascading Stylesheet:
1
.#sub0, .#sub1, .#sub2 { }

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

Crisp's blog minitracker:
18-06 X-UA-InCompatible
31-05 IE6 fucking up BASE (again)?

offline Geplaatst op donderdag 17 november 2005 10:21

Acties: [view][quote]

Door: Sillymidget
Berichten: 294
Reg. datum: 28 oktober 2003
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>

Wii-nr: 3641-5640-3623-9197, is je plein zo leeg? gewoon ff toevoegen! en pm-etje sturen

offline Geplaatst op donderdag 17 november 2005 10:22

Acties: [view][quote]

Door: mophor
zie 23648
Berichten: 5.418
Reg. datum: 27 juli 2000
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)

var _ = {_: 'unreadable code detected!'};
alert(_._);

offline Geplaatst op donderdag 17 november 2005 10:32

Acties: [view][quote]

Door: Sappie
De Parasitaire Capaciteit!
Berichten: 1.111
Reg. datum: 26 september 2000
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%)

Specs | Audioscrobbler

offline Geplaatst op donderdag 17 november 2005 10:50

Acties: [view][quote]

Door: RM-rf
FP ProMod
Berichten: 13.401
Reg. datum: 25 september 2000
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%)

1 2 3 4 5 7 6 8 9 | Du musst daraus ein stdWrap mit prepend innerWrap.cObject COA +append machen die Parent id bekommst Du mit leveluid:-1 Dann sollte es klappen.

offline Geplaatst op donderdag 17 november 2005 10:51

Acties: [view][quote]

Door: Clay
cookie erbij?
Berichten: 4.915
Reg. datum: 25 oktober 1999
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%)

Peterned & Blog & Flickr
Man who say it cannot be done should not interrupt man doing it.

offline Geplaatst op donderdag 17 november 2005 11:33

Acties: [view][quote]

Door: mophor
zie 23648
Berichten: 5.418
Reg. datum: 27 juli 2000
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%)

var _ = {_: 'unreadable code detected!'};
alert(_._);

offline Geplaatst op donderdag 17 november 2005 14:37

Acties: [view][quote]

Door: RM-rf
FP ProMod
Berichten: 13.401
Reg. datum: 25 september 2000
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

1 2 3 4 5 7 6 8 9 | Du musst daraus ein stdWrap mit prepend innerWrap.cObject COA +append machen die Parent id bekommst Du mit leveluid:-1 Dann sollte es klappen.

offline Geplaatst op donderdag 17 november 2005 18:03

Acties: [view][quote]

Door: mophor
zie 23648
Berichten: 5.418
Reg. datum: 27 juli 2000
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

var _ = {_: 'unreadable code detected!'};
alert(_._);

Pagina: 1

VNU Media logo Powered by True

© 1998 - 2008 Tweakers.net - Alle rechten voorbehouden

Uitgever van: