Jump to content
xisto Community
Sign in to follow this  
jlhaslip

Lists, Unordered And Nested some layout tricks

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.