SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Lists in CSS

  1. #1
    SitePoint Guru CompiledMonkey's Avatar
    Join Date
    Sep 2002
    Location
    Richmond, VA
    Posts
    975
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lists in CSS

    I have an unordered list that I would like to display without icons to their left and in a horizontal way instead of vertical. Normally Id use a table with X number of columns and just put the links in there. I would like to get away from that approach and learn to do this with CSS instead. Can anybody help me out?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    To stop the bullet showing use list-style-type:none in the ul declaration.
    Code:
    ul {
    list-style-type:none;
    margin:0;
    padding:0;
    }
    Also set padding and margins to zero to even moz and ie up. (Or explicitly set them as required)

    To display the list horizontally you will need to either float the list items left or use display:inline.

    If you use display:inline then in good browsers you will be unable to apply height and widths because an inline element cannot hold widths or heights. You will then need to add padding to give the element some width and height instead.

    If you float the element you can apply width and height as required and this also allows you to easily set an anchor to display:block so that the whole list item rolls over.

    Here are example sof every type of list you will ever need.


    http://css.maxdesign.com.au/listamatic/


    There is even an automatic list generator here.

    http://www.accessify.com/tools-and-w...st-o-matic.asp

    I should play around with the above links until you understand them and can apply them as required.

    Hope that helps.

    Paul

  3. #3
    SitePoint Zealot cyberian's Avatar
    Join Date
    Oct 2003
    Location
    MA
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a great place to learn about lists:

    http://css.maxdesign.com.au/listamatic/

    It shows you examples of vertical and horizontal lists - with and without icons/bullets. It also shows you the code, which is hugely helpful. Check it out.

    Edit:


    DOH! Paul beat me to the punch.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Great minds think alike

  5. #5
    SitePoint Guru CompiledMonkey's Avatar
    Join Date
    Sep 2002
    Location
    Richmond, VA
    Posts
    975
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great link guys, thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •