...

View Full Version : ordered list with titles



yanksno1
04-06-2011, 07:56 PM
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?

Excavator
04-06-2011, 08:01 PM
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:

one (http://nopeople.com/CSS%20tips/dl/index.html)
two (http://nopeople.com/CSS%20tips/dl%20image%20and%20caption/index.html)

yanksno1
04-06-2011, 08:31 PM
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?

Excavator
04-06-2011, 11:18 PM
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.

yanksno1
04-08-2011, 10:09 PM
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.

Excavator
04-09-2011, 12:30 AM
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.

yanksno1
04-11-2011, 10:39 PM
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.

Excavator
04-11-2011, 11:19 PM
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 -
<!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>

yanksno1
04-12-2011, 04:46 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum