SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Horizontal List

  1. #1
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal List

    I'm trying to create a horizontal list, with little success. This is what I'm trying to accomplish; An Unordered List that lists horizontally, not vertically like standard behaviour. I've drawn a picture to illustrate what I'm after, and to compensate my poor explanatory skills:

    Image removed

    I have tried to use inline on the LI's, but with no success. I need to be able to set the List Items, or "boxes'" width and height, and that doesn't work for me when using inline. I have also tried to float the LI's, but then the container doesn't strech all the way down to the footer.

    The "Container" is a div, with no set height, and should strech as far down as the List Items go. I might need to add more "boxes" later on, so I don't want to specify the height. The "Container" only contains this UL, and nothing else.

    This is probably something simple, but I can't figure it out. I really appreciate any help.
    Last edited by Woden; Jan 16, 2007 at 10:51.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Float the <li> boxes and the div will stretch if you clear the floats. See the FAQ at the top of this forum on clearing floats.

    Also, if your div container is only containing the ul, the likelihood is you don't need the container. The UL element behaves much like a div, it's block level, you can give it borders and background colour.

  3. #3
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a bunch. It doesn't feel like the most logical solution, and it feels a little bit like a hack, but it seems to work and make a bit sense at least.

    Does anyone know why you can't set width or height when using display: inline; on LI?

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Elements with display:inline may not have set widths or heights. It's the way things work. You can learn about the differences between inline boxes and block boxes here.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I don't think it's a hack at all. That picture you had before shows exactly why floats exist - you want some boxes to appear side by side and if there's not enough space on the line any more, go to the next line. That's how floats work. Clearing floats is not a hack either, though in my opinion it feels a bit dirty and I don't like that concept much.

  6. #6
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, thanks for the info. And Raffles, it was the clearing part I was referring to. Sorry for being unclear. It doesn't feel like the most logical solution.

    I encountered something else with floats and LIs, too. Lets say I float a series of LI to right, they seem to show up in reversed order. If my last LI contains a P with the content "Bye-bye", when floated right, it shows up as the first (from the left). Is there some way to reverse this, without reordering the LIs? Because I want them to show up in the same "order" as without stylesheet.

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
  •