Jul 26, 2008

Lists, Unordered And Nested - some layout tricks

Free Web Hosting, No Ads > CONTRIBUTE > Computers > Programming Languages > CSS (Cascading Style Sheets)

free web hosting

Lists, Unordered And Nested - some layout tricks

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

 

 

 


Reply

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

Reply

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

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Recent Queries:-
  1. nested list css - 83.90 hr back. (1)
  2. using two different unordered lists in same css file - 106.19 hr back. (1)
Similar Topics

Keywords : lists, unordered, nested, layout, tricks

  1. Website/blog Layout (circle Design)
    (2)
  2. Website Layout?
    Help me please (3)
    Im sorta really new to html and php, and i want to make or edit a layout for my website that i might
    get from this forum thing, and i need sombody to point me to some tutorials or make me a layout.
    also if you want to you can make me a myspace one too xD. Please and thanks.....
  3. Beware ! !
    Beware of Telecommunication Networks Tricks and Tweaks (2)
    hello! i wanna alert you all about the tricks which maijor telecommunication Networks Play . It
    happened that i saw an advertisement on 16-06-2008 on Discovery channel the advertisement meant that
    SMS LUFT to 57827 and win exciting gift hampers from Lufthansa , so in an excitement i too Messaged
    , immediately 3 from my mobile Load was detucted , i was Using an AIRTEL ( Bharathi
    Tellecommunication ) , Then immediately i had a reply asking a Question. The question was The
    Highest Peak in euorope is in france , name the peak ? . So i replied saying it is Mont Blan....
  4. How To Make Form Nested In Internet Explorer ?
    Nested form in IE (2)
    I want to make a form nested in another form, it's run on Opera and FireFox but it's occur
    error in IE How can I make form f2 submit by using javscript ??? (I want to solve this
    problem because my website using Ajax upload....
  5. Download A Free Copy Of The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques
    (4)
    I just got an email today and sitepoint.com is giving another one of their books away for free. All
    you do is give your email and a short while later you will get a download to your free copy of this
    photoshop book. This deal lasts for 30 days so get your copy NOW!!
    http://photoshop.aws.sitepoint.com/ ....
  6. Mine And Kansuke's Website Layout
    (5)
    Me and KansukeKojima are making a graphics website and I have made a layout in GIMP that I would
    like a rating for. Here is a picture of what it should look like. ....
  7. Css Layout Help
    need help with my layout (8)
    http://billy61.trap17.com/divs/modulemaker.php i am rewriting my layout in divs instead of
    tables. the problem i have, is i need the divs with the "L" and "R" in them to extend all the way
    down to the bottom of the "content" div. also, what do i need to do to center the entire thing on
    the webpage? and it appears as though the top center div extends down into the middle div by
    like... maybe 5 px... is this just an illusion or is it really happening? this is the source html
    for the page: CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional....
  8. What Do You Think About My Layout-image?
    (2)
    Hello. So I made this layout image, and I would like to hear what you think about it. I did not
    spend to much time, but some. Most of the time was used to find images, and apply a vintage effect.
    I think it came out okey, but that is my opinion. I am not to good with photoshop, and you can say
    that it looks a bit "piczo-ish". Haha, new word. /tongue.gif" style="vertical-align:middle"
    emoid=":P" border="0" alt="tongue.gif" /> Anyway, I can say that the "theme" is a bit related to
    poverty, and such things. I am not quite happy about the blending some places. It is quite....
  9. Even More! Firefox Tricks For Your Firefox Needs
    (0)
    You could say that this topic was a reason why this topic is here. So I did some web surfing and
    found this awesome website that really gets some good customization to your Firefox browser. Just
    a small note that you will be working mostly in the about:config page so just open a new tab and of
    course open this topic up or the website that this info is coming from. Sessions QUOTE
    Session restore Fx 2.0 only: As a blogger and web mail user, it breaks my heart to recount how many
    times I've composed a long post or email message, then accidentally closed t....
  10. Relationship Advice
    tricks to protect your heart hehe (4)
    hey /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" /> everybody
    is in love with love but most of us have suffered from break ups before, I never imagined love could
    hurt so much until my ex, and now I prefer being single... I hate crying, I hate missing someone, I
    hate being miserable and am sure you do too,lol so lets just help each other here.... One thing to
    avoid is parent problem believe me,its the hardest... If you're going out with someone and his
    parents are totally against it, try getting away from the relationship especi....
  11. Nasty Windows Tricks Using Vbs Codes
    blue screen of Death, Instant Shutdown, Endless Notepads (15)
    The CMD Codes- to use, open up notepad and copy and paste the code into the notepad. name the file
    (anyname).vbs (to make a .vbs file, when u save it or save as, it will ask u for a name and which
    type u want it, so choose all file then just name it as a .vbs file) then just click on the file u
    just made *NOTE* these codes do not stay on forever, they just stay on until the person shuts off
    the computer. The registry delete is one that PERMANETLY deletes files on the computer that cannot
    be recovered. this will DESTROY the computer -The blue screen of Death *The Blue....
  12. More Useful Laptop Tips And Tricks
    (4)
    So have you used andd abused your laptop and now you have problems that will drive you insane and
    spend hours up hours of talking with tech people? Well hopefully these tips and tricks will help
    you get a more stable, faster, and even a efficient working computer running again. QUOTE 1.
    Your Wi-Fi network is now dog-slow. If it's not a network outage, you likely have interference.
    Try relocating your router to shield it from disruptions such as microwave use or calls from a
    cordless phone. Or you may be on a crowded channel. Change the channel via your route....
  13. Tricks With Php Variables
    (10)
    You probably are thinking at this moment why I am posting some tricks with variables. Well, there
    are many useful things a variable can do for us. For one they can actually be used to create simple
    games. They also can be used to produce a random result in a page. Another great use is shoutboxes.
    Well here are some cool variable effects. Adding Multiple Strings We can use strings to create
    great effects. Example: CODE <?php $var1="Hello person.";
    $var2=str_replace("person","world",$var1); echo $var1."
    &....
  14. Nice Clean Php Layout Coding.
    Learn a nice neat way to code your layouts with php (7)
    There are basically two main ways to code your php. Method 1) Creating a php document with an html
    look. The you throw in include tags all over the place. Its unorganized, and you have lots of stray
    files hidden in folders and scattered in your base directory. Its difficult to organize, and you
    make mistakes easily. Example: This document would be called index.php Whatever
    Banner or something Some content here. Mostly along the lines of You might ask what
    the problem was? Well, those include tags tend to multiply, and so do all those unne....
  15. Windows Vista™ Tip Sheet
    Tips and Tricks (6)
    View: http://mstpblog.blogspot.com/2007/07/windo...-tip-sheet.html Taken from Microsoft
    Technology Playground QUOTE Windows Vista is designed for businesses of all sizes and across all
    industries. Windows Vista will make a difference in any business setting. Windows Vista also helps
    PC users to be more effective in their work by offering improved connectivity with advanced
    integration across technologies, networks, and systems, as well as providing them with quick access
    to better organized information. Tips & Tricks Folder Navigation 1. Getting around your PC ....
  16. Five Of The Dirtiest Malware Tricks
    (4)
    I was going through my usual Yahoo security news and I though I post this up and hopefully shed some
    new light on protecting yourself from malware QUOTE Don't mind me--I'm only here to
    break your PC: It's like sending in a different scout each time to open the gate for the rest
    of the invaders. The "Glieder Trojan" and many others use a multistage infection process whose first
    step is a tiny program that the crooks can change constantly so your antivirus watchdog is less
    likely to recognize it. Once it gets in, the downloader tries to disable your sec....
  17. New All Black Myspace Layout
    I find it pretty sweet. (11)
    A ton of you saw my last all white myspace and i got some feedback and way over then 3/4 was
    postive. I wanted to try to get even better feedback with my new all black layout with it's
    Oscar G logo. http://myspace.com/bumwrecker ALL feedback welcome!....
  18. Help With Css/html Layout
    Horizontal List Problems (5)
    I can't figure out why this horizontal list isnt working. Underneath my banner is supposed to
    be a green gradient bar with a list of links in the center of the page. The links are all the way
    to the left and are really small. The banner is also overlapping the list for some reason. This is
    my current layout(don't worry, I'm not trying to advertise).
    http://www.stormgaming.net/stormcreations/ This is my CSS file
    http://www.stormgaming.net/stormcreations/storm.css Thanks in advance for any help.....
  19. Google Tricks
    (32)
    I found out these from some other site, but if you type in QUOTE worst band in the world
    scrool down abit and look who you see. Typing in QUOTE the answer to life the universe and
    everything and see what the google calculator Another good one is when you type in QUOTE
    French Miltary Victories And press i'm feeling lucky it comes up with, QUOTE Do you
    mean French Miltary Defeats And the best of them all, is when you type in Failure and the
    first option is george bush. That one made me laugh for weeks.....
  20. Ie And Firefox Layout Differences
    (10)
    I have had a go at making a website using CSS to dictate the layout (no tables used) and it works
    quite nicely in firefox but when i open it in IE it completely mangles the whole layout. Can
    someone tell me some techniques to prevent this and maybe point me to some helpful pages. Thanks.....
  21. How To Improve Security Of Your Website?
    Tips and tricks, important things... (3)
    First of all i want to apologize to moderators in case that they need to close this topic because
    someone opened it before...I used search and i havent found anything...once again sorry if i missed
    some topic... Getting to the point! What do we need to do to make our site secure? Daily
    backups, deleting install files or something else? So please tell us more about site security!
    I know it`s practically impossible to make site 100% hack free, but at least 80% we can do!
    Advanced users share your advices with us-newbies! You ll get post count and we....
  22. Call Of Duty Tips And Tricks
    For both origional and sequal (4)
    Hello all you CoD fans, newbs, and players. My name is Mitch, but you will most likely see me as
    (_8(|) when I play Call of Duty online. For those who can't see/read ASCII Art, my monogram is
    Homer Simpson in ASCII. Anyways, I plan to give you guys this little tutorial/booklet that will
    allow you to play at your absolute best! Guaranteed. You will up your KD ratio by at least 3
    times. But first a little history about myself. I origionally bought CoD1 (yes the origional) in
    late 2004 from a pool fund for a LAN party. None of my friends had CoD but we wanted....
  23. Futuristic Web Layout
    C&C approved... (11)
    how do you like it ? http://img354.imageshack.us/img354/8766/layout4at.jpg ....
  24. Tips And Tricks In Windows
    everything you know share with us... (15)
    if you know some tips and tricks and you want to share with all the members please share it.
    -shut down Ballon tips- 1. START>RUN>REGEDIT 2. go to
    HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\A
    dvanced 3.find "EnableBalloonTips" or make new DWORD with that name and set value "0" 4.restart pc
    -No to all when copying- when you are copying, if you already have same files you will get the
    message with buttons YES,YES TO ALL, NO, CANCEL. what about NO TO ALL. when you get that window
    press SHIFT and click NO. that ....
  25. Css And Javascript Combined For Dynamic Layout
    use of different CSS files at same site (9)
    This tutorial is meant for people that are dealing with problems while coding their site at 100% of
    width. Important notice: Some people has JavaScript disabled, so they will not be able to load CSS
    file (take this in account when creating your website). How this script works. In the HEAD of your
    HTML document will apply this command, so variable.js file will be load at start: CODE
    <script type="text/javascript" src="variable.js"></script> In
    browser JavaScript file variable.js is loaded. This Javascript file consist of this para....
  26. Catholic Church Back To Old Tricks?
    Evangelicals jailed, fined for faith (19)
    The following is from: http://www.compassdirect.org/en/newsarcen....name=&rowcur=25 QUOTE
    May 19 (Compass) -- On May 15, six police officers and a local Catholic catechist appeared at the
    Fountain of Heaven Church in Cuateceometl, Hidalgo, Mexico, at 10 a.m. and arrested Pastor Francisco
    Sanchez Gonzalez and church member Raul Bautista. The arrests came after a decision by the town
    assembly to “eradicate” all non-Catholic Christians from the area. Local officials informed church
    members that they must renounce their evangelical faith and pay a fine of 1,000 pesos....
  27. Css Layout Generator - *free*
    Generate a CSS layout for your site (3)
    pretty powerful css layout generator. /smile.gif' border='0' style='vertical-align:middle'
    alt='smile.gif' /> and it's freely available online.
    http://www.csscreator.com/version2/pagelayout.php QUOTE To create your layout select the
    structural elements your site requires (header, footer, columns). Then specify a size in the field
    provided and choose a background color from the color chooser below. The color chooser changes
    values as you move your mouse along a row. To set a value click on the color row to release click
    again. Once the color in the box is th....
  28. Msgbox
    Here is a simple way and lists of MsgBoxes. (17)
    Here are lists of MsgBoxes: Syntax: MsgBox Prompt, MsgBoxStyle, Title, HelpFile MsgBox "Uh,
    text!", , "Uh, Title!" MsgBox "Uh, text!", vbCritical, "Uh, Title!" MsgBox "Uh,
    text!", vbExclamation, "Uh, Title!" MsgBox "Uh, text!", vbInformation, "Uh, Title!"
    MsgBox "Uh, text!", vbOKCancel, "Uh, Title!" MsgBox "Uh, text!", vbQuestion, "Uh,
    Title!" MsgBox "Uh, text!", vbYesNo, "Uh, Title!" MsgBox "Uh, text!", vbYesNoCancel,
    "Uh, Title!" MsgBox "Uh, text!", vbRetryCancel, "Uh, Title!" MsgBox "Uh, text....
  29. Site Layout For My Friend
    (9)
    There's something wrong with this layout and I don't quite know what else to add to make it
    look more together. Is anyone willing to add stuff to this layout? I'm kinda going in circles
    with this one. You can go crazy and add your own designs just as long as it would look clean.
    /smile.gif' border='0' style='vertical-align:middle' alt='smile.gif' /> This is for those with
    spare time only. I'm not trying to pass my dilemma to anyone. /smile.gif' border='0'
    style='vertical-align:middle' alt='smile.gif' /> ....
  30. Tips And Tricks
    For webdesigners (1)
    Just go to this good website: CODE http://www.vertextemplates.com/tutorials.shtml ....

    1. Looking for lists, unordered, nested, layout, tricks

Searching Video's for lists, unordered, nested, layout, tricks
Similar
Website/blog
Layout
(circle
Design)
Website
Layout? -
Help me
please
Beware !
! -
Beware of
Telecommunic
ation
Networks
Tricks and
Tweaks
How To Make
Form Nested
In Internet
Explorer ? -
Nested form
in IE
Download A
Free Copy Of
The
Photoshop
Anthology:
101 Web
Design Tips,
Tricks &
Techniques
Mine And
Kansuke'
s Website
Layout
Css Layout
Help - need
help with my
layout
What Do You
Think About
My
Layout-image
?
Even
More!
Firefox
Tricks For
Your Firefox
Needs
Relationship
Advice -
tricks to
protect your
heart hehe
Nasty
Windows
Tricks Using
Vbs Codes -
blue screen
of Death,
Instant
Shutdown,
Endless
Notepads
More Useful
Laptop Tips
And Tricks
Tricks With
Php
Variables
Nice Clean
Php Layout
Coding. -
Learn a nice
neat way to
code your
layouts with
php
Windows
Vista™ Tip
Sheet - Tips
and Tricks
Five Of The
Dirtiest
Malware
Tricks
New All
Black
Myspace
Layout - I
find it
pretty
sweet.
Help With
Css/html
Layout -
Horizontal
List
Problems
Google
Tricks
Ie And
Firefox
Layout
Differences
How To
Improve
Security Of
Your
Website? -
Tips and
tricks,
important
things...
Call Of Duty
Tips And
Tricks - For
both
origional
and sequal
Futuristic
Web Layout -
C&C
approved...
Tips And
Tricks In
Windows -
everything
you know
share with
us...
Css And
Javascript
Combined For
Dynamic
Layout - use
of different
CSS files at
same site
Catholic
Church Back
To Old
Tricks? -
Evangelicals
jailed,
fined for
faith
Css Layout
Generator -
*free* -
Generate a
CSS layout
for your
site
Msgbox -
Here is a
simple way
and lists of
MsgBoxes.
Site Layout
For My
Friend
Tips And
Tricks - For
webdesigners
advertisement



Lists, Unordered And Nested - some layout tricks



 

 

 

 

ADD REPLY / Got an Opinion! Remove these ADs! RAPID SEARCH! Free Web Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE