treehouse : what would you like to learn today?
Web Design Web Development iOS Development

numbered list divided by title

  • Hi!
    Here is my problem :
    I have a very long legal document to put on the web. That document should respect that format:



    TITLE
    1. bla bla bla
    TITLE
    2. bla bla bla
    TITLE
    3. bla bla bla
    * subbla subbla subbla
    TITLE
    4. bla bla bla
    5. bla bla bla
    * subbla subbla subbla
    TITLE
    6. bla bla bla.
    * 6.1 subbla subbla subbla;
    * 6.2subbla subbla subbla



    I want to use the ordered list <ol> and define the TITLE as H2 elements. The problem I have is if I do this, I would have to rely on the deprecated element “start” and “value” which I would like to avoid. I could have use the counter-increment property but it doesn't work in IE 6 and I need this page to be cross-browser compatible.
    Do you know how I can break my ordered list with those <h2> while staying cross-browser compatible and validing strict HTML?

    ***
    here is my actual code (it works but not perfect as I want to get rid of the start= element) :
    ***

    /**css**/
    #main h2{font-weight:bold; font-size:14px; padding:0px; text-transform:capitalize;}

    #main ol {list-style-type: decimal}
    #main ol li{padding:5px 0px 5px 0px; margin:0px;}

    #main ul.subList{padding:0px; margin:0px; list-style-type:none; list-style-position: inside;}
    #main ul.subList li{padding:5px 0px 5px 0px; margin:0px; list-style: none;}


    /**html**/

    <div id=\"main\">
    <h2>TITLE</h2>
    <ol>
    <li>bla bla bla</li>
    <li>bla bla bla</li>
    </ol>
    <h2>TITLE</h2>
    <ol start=\"3\">
    <li>bla bla bla</li>
    </ol>
    <h2>TITLE</h2>
    <ol start=\"4\">
    <li>bla bla bla</li>
    <ul>
    <li>subbla subbla subbla</li>
    </ul>
    </ol>
    <h2>TITLE</h2>
    <ol start=\"5\">
    <li>bla bla bla</li>
    <li>bla bla bla</li>
    <ul>
    <li>subbla subbla subbla</li>
    </ul>
    </ol>
    <h2>TITLE</h2>
    <ol start=\"7\">
    <li>bla bla bla</li>
    <ul class=\"subList\">
    <li>7.1 subbla subbla subbla</li>
    <li>7.2 subbla subbla subbla</li>
    </ul>
    </ol>
    </div>


    Any help?
  • Better use defenitionlists i think:



    <dl>
    <dt>Title</dt>
    <dd>1. blabla</dd>
    <dt>Title</dt>
    <dd>2. blabla</dd>
    <dt>Title</dt>
    <dd>3. blabla</dd>
    <dd>*subbla subbla subbla</dd>
    </dl>

  • I totally agree to Edwin