Lists, Unordered And Nested some layout tricks

[jlhaslip 4]

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.

<ol>				  <li>list item here</li>				  <li>list item here</li>			  </ol>

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.

<ul>					<li>list item here</li>					<li>list item here</li>				</ul>

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.

<dl>	<dt>dt item here</dt>		<dd>dd item here</dd>	</dt>	<dt>dt item here</dt>		<dd>dd item here</dd>		<dd>dd item here</dd>	</dt>		  </dl>

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).

[Saint_Michael 3]

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.

[rize619 0]

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