[CSS]ID en de css selectors...

[MekZi]

Hallo iedereen.

Ik heb een vraag omtrent css. Ik zou graag de ul-style's aan een id willen binden. Dus het volgende stukje css:

code:

ul, ul li {
    display: inline; /* zorgt ervoor dat in de oude IE geen trap-effect onstaat */
    margin: 0;
    padding: 0;
}
ul li a {
    display: block;
    width: 100px;
    height: 25px;
    text-align: center;
    color: #FFF;
    float: left;
    border: 1px solid #0FF;
    margin: 0;
    padding: 0;
}

Nu wil ik dus graag dat het bovenstaande style's alleen effect hebben op de ul element met de id: menu. Dus html:

code:

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

Dus mijn vraag is: Hoe moet ik de css selectors aanpassen om dit werkend te krijgen?

Alvast bedankt

[crisp]

http://www.w3.org/TR/CSS21/selector.html#id-selectors, of elke andere willekeurige css-tutorial/reference die je maar kan vinden op het web. Heb je ueberhaupt wel zelf gezocht?

[ Voor 53% gewijzigd door crisp op 27-12-2009 23:58 ]

[MekZi]

Ik ga dat zo eens helemaal doorlezen. En ja ik heb zelf natuurlijk ook gezocht en dan vond ik ook wat, maar bij het testen werkt het dus niet.

Want dit is wat ik probeerde:

code:

#menu ul, #menu ul li {
    display: inline; /* zorgt ervoor dat in de oude IE geen trap-effect onstaat */
    margin: 0;
    padding: 0;
}
#menu ul li a {
    display: block;
    width: 100px;
    height: 25px;
    text-align: center;
    color: #FFF;
    float: left;
    border: 1px solid #0FF;
    margin: 0;
    padding: 0;
}

En ik heb wat andere combinaties geprobeert zonder succes.

[disjfa]

MekZi schreef op maandag 28 december 2009 @ 00:36:
Ik ga dat zo eens helemaal doorlezen.

Lees dan eerst voor je het probeert.

[Styxxy]

Dat komt omdat #menu het ul element is. Wat jij eigenlijk zegt is dit:

"Het element met ID #menu, daarin de elementen UL, etc, hebben stijl X."

De code moet dus zijn:

Cascading Stylesheet:

ul, ul li {
    display: inline; /* zorgt ervoor dat in de oude IE geen trap-effect onstaat */
    margin: 0;
    padding: 0;
}
#menu li a {
    display: block;
    width: 100px;
    height: 25px;
    text-align: center;
    color: #FFF;
    float: left;
    border: 1px solid #0FF;
    margin: 0;
    padding: 0;
}

of

Cascading Stylesheet:

ul, ul li {
    display: inline; /* zorgt ervoor dat in de oude IE geen trap-effect onstaat */
    margin: 0;
    padding: 0;
}
ul#menu li a {
    display: block;
    width: 100px;
    height: 25px;
    text-align: center;
    color: #FFF;
    float: left;
    border: 1px solid #0FF;
    margin: 0;
    padding: 0;
}

Overigens, dit kon je makkelijk in elke tutorial vinden .

[ Voor 3% gewijzigd door Styxxy op 28-12-2009 00:53 ]

[RobIII]

Styxxy schreef op maandag 28 december 2009 @ 00:53:
De code moet dus zijn:

En jij helpt 'm mooi op weg; daar zal 'ie het wel van leren /sarcasm

Give a man a fish and feed him for a day. Teach a man how to fish and feed him for a lifetime.

[crisp]

code:

#menu ul

Dat is een descendant-selector; oftewel, een UL die voorkomt binnen een element met ID 'menu'. In jouw geval is het de UL zelf die een ID 'menu' heeft; dat schrijf je dan zo als selector:

code:

ul#menu

maar als het id niet hergebruikt wordt voor andere elementen kan je net zo goed dit gebruiken:

Cascading Stylesheet:

#menu, #menu li {}

edit: en dan wordt het gras al voor mijn voeten weggemaaid...

[ Voor 8% gewijzigd door crisp op 28-12-2009 00:58 ]

[MekZi]

Nou was mijn probleem dat ik niet 1, 2, 3 op een tutorial kwam waarin dit zo werd uitgelegd zoals jullie het nu zeiden. Tenminste niet zo direct. Maar dank u voor het uitleggen en ik zal nu dus beginnen met het lezen van die pagina(voor het slapen gaan in bed met laptop)

[disjfa]

MekZi schreef op maandag 28 december 2009 @ 01:10:
Nou was mijn probleem dat ik niet 1, 2, 3 op een tutorial kwam waarin dit zo werd uitgelegd zoals jullie het nu zeiden. Tenminste niet zo direct. Maar dank u voor het uitleggen en ik zal nu dus beginnen met het lezen van die pagina(voor het slapen gaan in bed met laptop)

Google en dan css tutorial, link 1 is die van w3schools, klik twee keer op volgende pagina en het staat precies zo http://www.w3schools.com/Css/css_id_class.asp

Lees die pagina`s trouwens ook gewoon door, is ook leuk voor het slapen gaan

[Styxxy]

RobIII schreef op maandag 28 december 2009 @ 00:56:
[...]
En jij helpt 'm mooi op weg; daar zal 'ie het wel van leren /sarcasm
[...]

Ik heb ook uitgelegd wat er fout was en wat dan het juiste is. Dus op die manier maakt het niet uit.

[moozzuzz]

crisp schreef op maandag 28 december 2009 @ 00:57:
maar als het id niet hergebruikt wordt voor andere elementen kan je net zo goed dit gebruiken:

Crisp, voor één keer een foutje (en dat gebeurt je zelden ), ID's worden maar één keer gebruikt (of: zouden maar één keer gebruikt moeten worden).

[Verwijderd]

moozzuzz schreef op maandag 28 december 2009 @ 13:38:

Crisp, voor één keer een foutje (en dat gebeurt je zelden ), ID's worden maar één keer gebruikt (of: zouden maar één keer gebruikt moeten worden).

Crisp bedoelt dat in een ander HTML document, eenzelfde id gebruikt kan worden voor een ander element. Als je overal dezelfde stylesheet gebuikt, kan dat natuurlijk wel degelijk ongewenste problemen geven.

Aangezien het hier om een menu gaat, zou ik het ul element in een map element nesten. Map elementen zijn voor navigatiestructuren. Makkelijk te managen in stylesheets, ook handig voor bijvoorbeeld print stylesheets, waarmee je dus in een klap dat soort navigatie kunt verbergen.

[Bosmonster]

moozzuzz schreef op maandag 28 december 2009 @ 13:38:
[...]

Crisp, voor één keer een foutje (en dat gebeurt je zelden ), ID's worden maar één keer gebruikt (of: zouden maar één keer gebruikt moeten worden).

Een ID kan op verschillende pagina's natuurlijk voor verschillende elementen gebruikt worden. Dat bedoelt ie ook voor zover ik kan zien.

/spuit 11

[moozzuzz]

My bad, ik had z'n comment niet op die manier gelezen.

[R4gnax]

Verwijderd schreef op maandag 28 december 2009 @ 14:15:
[...]
Aangezien het hier om een menu gaat, zou ik het ul element in een map element nesten. Map elementen zijn voor navigatiestructuren. Makkelijk te managen in stylesheets, ook handig voor bijvoorbeeld print stylesheets, waarmee je dus in een klap dat soort navigatie kunt verbergen.

Map elementen zijn bedoeld voor image maps. Jij zit te denken aan het menu element, wat sinds -geloof ik- HTML4.01 deprecated is, of het nav element, wat nieuw is in HTML5.