Lists, Unordered And Nested - some layout tricks

Unordered lists are one of the three list types in (x)html. The others are Ordered Lists and Definiton Lists.

The w3c page of information about lists is here

They all behave the same as (x)html elements, but there are some differences between them. Read the Specification page linked above to know more that you need to know about them. Only difference between html4 and xhtml is the tags must be lower-case and closed for xhtml to be valid.

Ordered Lists have numbers preceding them. Paste the following code into a file and display it in your Browser to see the effect.


Unordered Lists have other identifying character preceding them. Paste the following code into a file and display it in your Browser to see the effect.


Definition lists are similar to Unordered Lists, but the unique characteristic of DL's is that DL's allow for more than one sub-level of detail under them.

Notice how the second <dt> has an additional <dd> under the same <dt>? Can't do that with OL's or UL's *unless you nest them*, which is an option, of course.

Ordered List Example here
Unordered List Example here
Definition List Example here

And the (numbers or images preceding the lists) can be removed by declaring "{ list-style-type: none; }" in the style declaration for them. These example pages have little styling on them. They are pretty much default styling. Adjust them with padding and margin to suit your needs. Simple, huh?

A major point to notice is that Lists are block items by default, so they DO NOT require a wrapping DIV around them. A View > Source of that link with an example of nested UL's here will show that the UL can be given an ID and targetted by the CSS, classed, Floated or otherwise positioned the same as a div without any wrapper around it. Cool, huh? eh!

So save your div's for where you need them. Lists aren't on that list... (pun intended).

 

 

 

Comment/Reply (w/o sign-up)

Well to add a bit to the DL tags, in way those would be use primary as a way to set up a definition of a word and it source, something like this:


word
This is the meaning of the word and where it comes from.

.I do believe dictionary.com is using that tag, although I haven't verified that, but it would seem plauseiable to use it. Of course their are many other reasons, primaryily used for organzing information, heck you can even use this to set up work citations on a website if your doing a research project.

Comment/Reply (w/o sign-up)

hey how to set margin in lists ... like left margin ...margin b/w lists.?

Comment/Reply (w/o sign-up)