Opmaak genummerde lijst

  • erpee

    (@erpee)


    7 jaren, 10 maanden geleden

    Ik wil de standaard genummerde lijst wat verbeteren…. mogelijkheden om verschillende levels te laten zien.

    Op zich gaat dat goed met de volgende code:

    ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

    Maar … nu wordt mijn menu ook ineens weergegeven met volgnummers …. niet de bedoeling

    Ws kan ik dat oplossen door deze code als class voor de lijst mee te geven … Maar hoe???

    zie Fiddle:

    • Dit onderwerp is gewijzigd 7 jaren, 10 maanden geleden door erpee.
8 reacties aan het bekijken - 1 tot 8 (van in totaal 8)
  • Thread starter erpee

    (@erpee)

    7 jaren, 10 maanden geleden

    Update:

    Zie deze Fiddle

    Arjan Roosemalen

    (@ajroosemalen)

    7 jaren, 10 maanden geleden

    Leuk die code die je laat zien maar is er ook een website waar ik, morgenavond, naar kan kijken?

    Thread starter erpee

    (@erpee)

    7 jaren, 10 maanden geleden

    Ja hoor. Pagina staat op een lokale testserver.

    Hier ga je rechtstreeks naar de pagina met de lijst.

    Je ziet nu ook dat in de (sub-)menu’s nummers weergegeven worden die ik er natuurlijk niet wil hebben.

    Arjan Roosemalen

    (@ajroosemalen)

    7 jaren, 10 maanden geleden

    In je style.css staat op regel 322 de volgende code;

    li:before {
    content: counters(item, ".") " ";
    counter-increment: item;
}

    Als je die code aanpast dan ben je de nummers kwijt.

    Thread starter erpee

    (@erpee)

    7 jaren, 10 maanden geleden

    Fijn dat je dat gevonden hebt!

    Heb je ook een tip voor me hoe ik dat moet aanpassen, want die kennis heb ik (nog) niet.

    Zou het ook een mogelijkheid zijn om dat hele stuk code (zoals in de eerste post staat) een soort van class mee te geven? Deze opmaak is maar voor een paar pagina’s nodig en die kan ik er zonder problemen bijzetten.
    Zoiets als: <ol class="NumberList">

    Arjan Roosemalen

    (@ajroosemalen)

    7 jaren, 10 maanden geleden

    Die code heb je er zelf in gezet, vermoed ik, want het staat ook in je eerste bericht. Maar diezelfde code zorgt er wel voor dat de nummers blijven staan.

    En als je op de ene pagina wel en op een andere pagina niet de lijst wilt aanpassen dan is het inderdaad verstandig om gebruik te maken van een class. Voor de naam van die class mag je ook gebruik maken van Nederlandse woorden. Misschien is dat makkelijker om te onthouden waar voor die bepaalde class ook al weer was.

    Thread starter erpee

    (@erpee)

    7 jaren, 10 maanden geleden

    Klopt. Eigen code.

    Maar nu dus idd. het lastige. Ik probeer van alles om die code aan een class te hangen maar krijg het niet werkend. Wat moet ik doen???

    Onderstaande werkt dus niet!

    ol.test { counter-reset: item }
li.test { display: block }
li.test:before { content: counters(item, ".") " "; counter-increment: item }

    en aanroepen met:
    <ol class="test">

    Arjan Roosemalen

    (@ajroosemalen)

    7 jaren, 10 maanden geleden

    De ol.test zou moeten werken maar de li niet want die heet, hoop ik, toch niet test!
    Die li roep je op deze manier aan ol.test li. Want de li is een kind van de ol en die heb je de naam test gegeven. Je kan ook nog ol.test>li doen waarbij je nog iets meer dwingend bent dat het die li moet zijn.

    In je test pagina zie ik nog niet die class maar het kan ook zijn dat het overheerst word door een andere class.

8 reacties aan het bekijken - 1 tot 8 (van in totaal 8)
  • Het onderwerp ‘Opmaak genummerde lijst’ is gesloten voor nieuwe reacties.