Nested Outlines <dl>?

[paul]

Is there another tag to use for indented outlines like categorized lists
in several categories?

Here's a description of <dl> usage:
http://www.maxdesign.com.au/presentation/definition/

example:

Links
Home Pages
aol.com
-crappy home page you don't want
google.com
-recommended home page
Tutorials
blah.com/learn
-good concise explanations

It would be nice if I bothered to add al this extra code if it added
<h1> <h2> etc for me.

 

[Neal]

Is there another tag to use for indented outlines like categorized lists
in several categories?

Here's a description of <dl> usage:
http://www.maxdesign.com.au/presentation/definition/

example:

Links
Home Pages
aol.com
-crappy home page you don't want
google.com
-recommended home page
Tutorials
blah.com/learn
-good concise explanations

It would be nice if I bothered to add al this extra code if it added
<h1> <h2> etc for me.

1) Reserve dl for actual lists of terms and definitions. Some of this
could be, not all of it.

2) Here I'd use nested lists.

<h2>Links</h2>
<ul>
<li>Home Pages
<dl>
<dt>aol.com</dt>
<dd>-crappy home page you don't want</dd>
<dt>google.com</dt>
<dd>-recommended home page</dd>
</dl>
</li>
<li>Tutorials
<dl>
<dt>blah.com/learn</dt>
<dd>-good concise explanations</dd>
</dl>
</li>
</ul>

 

[paul]

1) Reserve dl for actual lists of terms and definitions. Some of this
could be, not all of it.

2) Here I'd use nested lists.

<h2>Links</h2>
<ul>
<li>Home Pages
<dl>
<dt>aol.com</dt>
<dd>-crappy home page you don't want</dd>
<dt>google.com</dt>
<dd>-recommended home page</dd>
</dl>
</li>
<li>Tutorials
<dl>
<dt>blah.com/learn</dt>
<dd>-good concise explanations</dd>
</dl>
</li>
</ul>

OK thanks, that makes sense.

Is it OK to move the list title above like this to get another level of
indenting:

<ul>Home Pages
<li>
<dl>
<dt>aol.com</dt>
<dd>-crappy home page you don't want</dd>

(otherwise I need a negative left margin in CSS)

 

[Neal]

Is it OK to move the list title above like this to get another level of
indenting:

<ul>Home Pages
<li>
<dl>
<dt>aol.com</dt>
<dd>-crappy home page you don't want</dd>

(otherwise I need a negative left margin in CSS)

Sure. Remember, you can use about any markup in the list containers. So
you can use <h2> or whatever within the listitem. Just remember, nest the
new list within a list item, not within the <ul>.

 

[Michael Winter]

[snip]

Is it OK to move the list title above like this to get another level of
indenting:

<ul>Home Pages

No, it isn't. List elements may only contain list items.

[snip]

Mike

 

[paul]

[snip]

Is it OK to move the list title above like this to get another level
of indenting:

<ul>Home Pages

No, it isn't. List elements may only contain list items.

[snip]

Mike

But I can't indent as I like without doing that. Here's the page I'm
talking about:
http://www.edgehill.net/1/?SC=go.php&DIR=Misc/photography

 

[Steve Pugh]

But I can't indent as I like without doing that. Here's the page I'm
talking about:
http://www.edgehill.net/1/?SC=go.php&DIR=Misc/photography

Then change your stylesheet so that it indents as you want it to.

Steve

 

[Neal]

Sure. Remember, you can use about any markup in the list containers. So
you can use <h2> or whatever within the listitem. Just remember, nest
the new list within a list item, not within the <ul>.

Right, and I missed the illegal text in ul. ul ol and dl can only contain
their listitems. The listitems, however, can contain nearly anything you
like.

 

[Michael Winter]

[snip]
[snip]

But I can't indent as I like without doing that.

Of course you can - place the text before the list.

A few other comments:

1) You shouldn't skip heading levels just because you don't like the
size.
2) "[move up one folder]" isn't a header.
3) FONT elements aren't defined in the Strict DTD.
4) You have two BODY start tags.

Mike

 

[paul]

Then change your stylesheet so that it indents as you want it to.

I couldn't make this work without a negative margin:
<ul>
<li>Home Pages

ul {margin: 0 0 0 -2em;}



This seemed to work fine:
<ul>Home Pages
<li>
<dl>

It just seemed odd to do a negative margin like that but maybe it's OK?

 

[Steve Pugh]

I couldn't make this work without a negative margin:
<ul>
<li>Home Pages

ul {margin: 0 0 0 -2em;}

You need to set both margin-left and padding-left on both ul and li in
order to have a chance of over riding the defaults in all modern
browsers.

This seemed to work fine:
<ul>Home Pages
<li>
<dl>

It's wrong.

Steve

 

[paul]

You need to set both margin-left and padding-left on both ul and li in
order to have a chance of over riding the defaults in all modern
browsers.

I had the padding set to zero also without joy. Is it OK to use a
negative margin? That seems to be what's needed. I took out the bullet
but it still reserved the space for it.

 

[Neal]

Is it OK to use a negative margin?

Of course it is.

 

[paul]

Of course you can - place the text before the list.

Well strictly speaking I'd lose the meaning of it being the list title.

A few other comments:



1) You shouldn't skip heading levels just because you don't like the
size.

I know, just a matter or re-doing a bunch of stuff to correct. Better
sooner than later I guess as it multiply's over time.

2) "[move up one folder]" isn't a header.

3) FONT elements aren't defined in the Strict DTD.

OK fair enough.

4) You have two BODY start tags.

Yeah I'd have to rewrite the whole PHP templating system to avoid that &
it seems to work fine. It's just a silly javascript thing (my only one)
& I didn't want it running on the other pages. Other than goofing up
validation checks I wonder if there is any real danger in some of these
things. Anyways I didn't do that casually, it'd be a big chore to fix.

 

[Michael Winter]

Michael Winter wrote:
[snip]

[...] place the text before the list.

Well strictly speaking I'd lose the meaning of it being the list title.

Really? I don't think so.

[snip]

Mike

 

[paul]

Of course it is.

OK thanks for the clarification. I have done that for all definition
lists with CSS now. Whew, it really is important to figure this stuff
out early. For example I've got <h2>'s all over because when I started,
I didn't know <h1> could be downsized.

 

[Neal]

OK thanks for the clarification. I have done that for all definition
lists with CSS now. Whew, it really is important to figure this stuff
out early. For example I've got <h2>'s all over because when I started,
I didn't know <h1> could be downsized.

We learn something new every day!

Check it in a few different browsers, rendering of lists really varies.