Welcome Guest ( Log In | Register)



 
Reply to this topicStart new topic
> Lists, Unordered And Nested, some layout tricks
jlhaslip
post Mar 28 2007, 04:03 AM
Post #1


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,994
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol



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.
CODE
<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.
CODE
<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.
CODE
<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).
Go to the top of the page
 
+Quote Post
Saint_Michael
post Mar 28 2007, 04:35 AM
Post #2


$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************

Group: [HOSTED]
Posts: 6,447
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew



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.
Go to the top of the page
 
+Quote Post
rize619
post Jun 23 2007, 05:44 PM
Post #3


Member [Level 1]
****

Group: Members
Posts: 66
Joined: 23-June 07
Member No.: 45,329



hey how to set margin in lists ... like left margin ...margin b/w lists.?
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Site Layout For My Friend(9)
  2. Msgbox(17)
  3. Css Layout Generator - *free*(5)
  4. Css And Javascript Combined For Dynamic Layout(9)
  5. Futuristic Web Layout(11)
  6. Call Of Duty Tips And Tricks(4)
  7. Layout Size(10)
  8. How To Improve Security Of Your Website?(3)
  9. Ie And Firefox Layout Differences(11)
  10. Google Tricks(32)
  11. Need To Shrink The File Size Of Web Image? - Photoshop Tricks(3)
  12. Help With Css/html Layout(5)
  13. New All Black Myspace Layout(11)
  14. Five Of The Dirtiest Malware Tricks(4)
  15. Windows Vista™ Tip Sheet(6)
  1. Tricks With Php Variables(10)
  2. Nasty Windows Tricks Using Vbs Codes(15)
  3. Relationship Advice(4)
  4. Even More! Firefox Tricks For Your Firefox Needs(0)
  5. What Do You Think About My Layout-image?(2)
  6. Css Layout Help(8)
  7. Mine And Kansuke's Website Layout(5)
  8. Download A Free Copy Of The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques(4)
  9. How To Make Form Nested In Internet Explorer ?(2)
  10. Beware ! !(2)
  11. Website Layout?(3)
  12. Website/blog Layout (circle Design)(2)
  13. Hidden Nokia Tricks(0)


 



- Lo-Fi Version Time is now: 6th September 2008 - 07:22 PM