Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ordered list with titles

    Is it possible to create one big ordered list (OL) with titles seperating different sections? Basically is what I'm thinking of:

    GROUP 1
    1. Item 1
    2. Item 1.2
    3. Item 1.3
    4. Item 1.4
    5. Item 1.5

    GROUP 2
    6. Item 2
    7. Item 2.2
    8. Item 2.3

    GROUP 3
    9. Item 3
    10. Item 3.2
    11. Item 3.3

    and so on. I'd like to use h tags to create the title, but being in one big ordered tag. You guys have any suggestions?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello yanksno1,
    Have you considered using a Definition List instead? It's built in title might work better than adding a class or h tag to each li that you want to be a heading.

    Look at http://www.w3schools.com/HTML/html_lists.asp
    And some examples:
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Oct 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yea, originally I really wanted to use the OL for the number feature. I guess this is the better way to go because of the titles. Am I missing anything there to autmoatically generate the numbers?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by yanksno1 View Post
    Yea, originally I really wanted to use the OL for the number feature. I guess this is the better way to go because of the titles. Am I missing anything there to autmoatically generate the numbers?
    That first example I linked you to has an unordered list nested in a definition list. You can do the same thing with an orederd list.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Oct 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    That first example I linked you to has an unordered list nested in a definition list. You can do the same thing with an orederd list.
    Have any examples of an ordered definition list? I've tried googling but must of used the wrong terms cause I didn't find anything. Thanks.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by yanksno1 View Post
    Have any examples of an ordered definition list? I've tried googling but must of used the wrong terms cause I didn't find anything. Thanks.
    Did you look at that link? Just copy that, substitue ul with ol and give it a try.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Oct 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Did you look at that link? Just copy that, substitue ul with ol and give it a try.
    Sorry, thought you meant the DL lists would generate the numbers, not dumping in another ul/ol list into one. I wanted the numbers to continue after each section, like my example above but I guess that's not possible.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by yanksno1 View Post
    Sorry, thought you meant the DL lists would generate the numbers, not dumping in another ul/ol list into one. I wanted the numbers to continue after each section, like my example above but I guess that's not possible.
    A dl really has nothing to do with numbers. That is an ol's function.
    While it doesn't seem to make a lot of sense continuing the numbers instead of restarting in each group (I have no idea what your content will be), it is possible. You just need to control the start number of each ol.

    This is invalid in strict DocTypes but valid in the transitional shown here -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    	font: 100% Arial, Helvetica, sans-serif;
    	color: #333;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	padding: 25px 0;
    	background: #999;
    	overflow: auto;
    }
    dl {margin: 0 0 0 25px;}
    dt {
    	font-size: 1.2em;
    	font-weight: bold;
    	text-transform: uppercase;
    }
    </style>
    </head>
    <body>
        <div id="container">
            <dl>
                <dt>group 1</dt>
                    <dd>
                        <ol>
                            <li>Item 1</li>
                            <li>Item 1.2</li>
                            <li>Item 1.3</li>
                            <li>Item 1.4</li>
                            <li>Item 1.5</li>
                        </ol>
                    </dd>
                <dt>group 2</dt>
                    <dd>
                        <ol start="6">
                            <li>Item 2</li>
                            <li>Item 2.2</li>
                            <li>Item 2.3</li>
                        </ol>
                    </dd>
                <dt>group 3</dt>
                    <dd>
                        <ol start="9">
                            <li>Item 3</li>
                            <li>Item 3.2</li>
                            <li>Item 3.3</li>
                        </ol>
                    </dd>
            </dl> 
        <!--end container--></div>
    </body>
    </html>
    Last edited by Excavator; 04-11-2011 at 10:23 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Oct 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    A dl really has nothing to do with numbers. That is an ol's function.
    While it doesn't seem to make a lot of sense continuing the numbers instead of restarting in each group (I have no idea what your content will be), it is possible. You just need to control the start number of each ol.

    This is invalid in strict DocTypes but valid in the transitional shown here - ...
    The content is a map of a city with different landmarks grouped into different sections, that's why it needs to continue to follow suit with the map. That's what I thought about DL lists, just got a little confused and thought you were saying the numbes applyed to the DL list. I ended up doing a straight DL list with DTs for the categories and DD's for the items (and hard-coded the numbers). Just wanted to make sure I wasn't mising anything, so glad it doesn't look like I am.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •