Formating ul ol list

Please post the URLs to pages, where you've made a CMSimple template available for download

Moderator: mikey

Post Reply
Tata
Posts: 2880
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Formating ul ol list

Post by Tata » Wed Jan 02, 2013 10:49 pm

Hallo, CSS gurus!
I need to format a long document with many UL and OL. It's not that difficult until there is only a simple "one level" list.
But I definitely need something of this form:
  1. item 1
  2. item 2
  3. item 3
    1. item 3/1
    2. item 3/2
    3. item 3/3
  4. item 4
    1. item 4/1
    2. item 4/2
    3. item 4/3
I have found and tried dozens of CSS tutorials, but none of them work the way I need. I need the numbers in form (1) and the second level bullets in form a). Not exactly like in the example above 1. ... a.
If you know the way, I would.be very thankful.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 12931
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: Formating ul ol list

Post by cmb » Wed Jan 02, 2013 11:01 pm

What you actually want are nested OLs (no ULs):

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>title</title>
    <style type="text/css">
        ol {list-style: decimal}
        ol ol {list-style: lower-alpha}
    </style>
</head>
<body>
    <h1>title</h1>
    <ol>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3
            <ol>
                <li>item 3/1</li>
                <li>item 3/2</li>
                <li>item 3/3</li>
            </ol>
        </li>
        <li>item 4
            <ol>
                <li>item 4/1</li>
                <li>item 4/2</li>
                <li>item 4/3</li>
            </ol>
        </li>
    </ol>
</body>
</html>
Last edited by cmb on Wed Jan 02, 2013 11:03 pm, edited 1 time in total.
Reason: fixed HTML errors in code
Christoph M. Becker –Plugins for CMSimple_XH

Torsten.Behrens
Posts: 522
Joined: Thu May 22, 2008 7:27 am
Location: Germany / Schleswig-Holstein
Contact:

Re: Formating ul ol list

Post by Torsten.Behrens » Wed Jan 02, 2013 11:03 pm

Torsten Behrens
CMSimple Templates

Tata
Posts: 2880
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Formating ul ol list

Post by Tata » Wed Jan 02, 2013 11:17 pm

This is the standard and it worked with me. But it is the form with "dots". I need it for a copy of a law document in which the paragraphs are writen like:
§ 1 Donec ullamcorper nulla non metus auctor fringilla.
  • § 1 Donec ullamcorper nulla non metus auctor fringilla.
    • (1) Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
      • (a) Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
      • (b) Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
      • (c) Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
(Of course without the disk,circle and square bullets)
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 12931
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: Formating ul ol list

Post by cmb » Thu Jan 03, 2013 12:01 am

Well, that's explained in the German article linked by Torsten; an English explanation: https://developer.mozilla.org/en-US/docs/CSS/Counters.

Basically it's sufficient to use the following styles instead of the one in my first example:

Code: Select all

        ol {counter-reset: paragraph; list-style: none}
        ol li:before {counter-increment: paragraph; content: "§" counter(paragraph) " "}
        ol ol {counter-reset: section; list-style: none}
        ol ol li:before {counter-increment: section; content: "(" counter(section) ") "}
Christoph M. Becker –Plugins for CMSimple_XH

Tata
Posts: 2880
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Formating ul ol list

Post by Tata » Thu Jan 03, 2013 12:29 am

Well, the "§" rows are all <h4> because of used with acdivs plugin (their contents shall only expand). The sections of each "§" are then split into "(1)" and deeper in "a)" subsections. But I still get the subsection marked as "a. )"
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 12931
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: Formating ul ol list

Post by cmb » Thu Jan 03, 2013 1:10 am

Tata wrote:But I still get the subsection marked as "a. )"
You have to set list-style: none, and let the content: do the rest, e.g.:

Code: Select all

ol {counter-reset: section; list-style: none}
ol li:before {counter-increment: section; content: "§" counter(section) " "}
ol ol {counter-reset: subsection; list-style: none}
ol ol li:before {counter-increment: subsection; content: counter(subsection, lower-alpha) ") "}
Christoph M. Becker –Plugins for CMSimple_XH

Tata
Posts: 2880
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Formating ul ol list

Post by Tata » Thu Jan 03, 2013 1:26 am

That's it. Thanks a lot.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Post Reply