Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Ordered Lists are a Pain

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #33435
    Rambunct
    Member

    Hello, Forums! I come to you with some strange, but hopefully fixable problems!

    Background

    I’m working on a timeline-page that’s following the events of the characters in a popular webcomic – a fan project that’s doubling as web design practice. Each character has his/her own section, which is a definition list separated into sections. It’s not live, but the HTML is basically:

    Character Name



    First Section


    first event

    second event

    third event


    Second Section


    first event

    second event

    third event


    The extra divs are for some simple jQuery toggling – when you click the DT, the next sibling .timePeriod chunk shows/hides. Maybe not the most semantic solution? If there’s a better way, I’m all ears.

    In the CSS for the DD tags, I’ve got the following counter:

    	counter-increment: li;
    content: "EB-" counter(li);

    which lists EB-1, EB-2, etc., in front of each DD.

    Purpose/Problems

    The purpose of the counter is that each DD is a unique event with its own id (like EB-24, CG-30, etc), so that the events of one character can be tagged with those of another, and you can CTRL+F one id to leap to the other. So if EB-24 is tagged with CG-30, you can CTRL+F to CG-30.

    The problem is twofold. First, text in a counter (decimal numbering in OL included) can’t be searched with CTRL+F! Obviously most people aren’t going to be searching for “1.” or “VII.”, but what about custom counters like: content: "Section #" counter(sect); Most people would probably search for something else in the text, but how can you be sure? Augh!

    edit: Any string that’s part of the “content:” attribute is unsearchable. :(

    The other problem is that showing or hiding different chunks of the DL reorders the counter based on what’s visible. Which means that if you’re only viewing the third section, the counter will display starting at EB-1, instead of EB-16 like it’s supposed to, which completely defeats the purpose for me.

    Is there a workaround for this? I don’t know much PHP or Javascript (or jQuery, for that matter), but I’m open to learning if that’s how to solve the problem.

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.