www.webdeveloper.com
Results 1 to 6 of 6

Thread: Horizontal Lists

  1. #1
    Join Date
    Nov 2002
    Posts
    57

    Horizontal Lists

    Hello,

    After reading the following article ( http://www.alistapart.com/stories/taminglists/ ) I know that it is possible to make horizontal lists.

    Here is my question though. If I make a horizontal list and the lists wraps to the next line, which it will, is there anyway to make the items line up vertically.

    For examply, instead of it being like this:

    Item1 | Another Item | More Items
    Even More Items | Still Some More

    I want it to look like this:

    Item1               | Another Item    | More Items
    Even More Items | Still Some More |

    Is this possible without using tables?

    Thanks!

  2. #2
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Even when you use tables, the lists do not get wrapped in a fluid manner. In other words, vertical alignment will have to be hard-coded. For example, say you have 10 links: Link1 to Link10. On 1024*768, they appear in a single line, but wrap when viewed with 800*600. Even if you use tables, you will not get the flexibility of having it wrapped the way you are looking for.

    Anyway, after all the balh-blah, here is a suggestion: add width {***px} in your li styles. This way, when the list gets wrapped, they will appear to be vertically aligned as well.

    If this method doesn't work for you, post an example with tables, and we will try to give you a css solution.

  3. #3
    Join Date
    Nov 2002
    Posts
    57
    I don't care necessarily about it being fluid, I just want it to be lined up vertically.

    If I used a table I would just have it so that there are three accross everytime. I tried to set the width using width: ... but it didn't work.

    If you have any other suggestions I would appreciate it.

    Thanks!

  4. #4
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    The reason is that NS does not apply width to inline elements. Let me look into it a little more before giving you a reply.

    - Niket

  5. #5
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    I can't think of a way to do it on inline list. So if you want something like this:
    Code:
    My favourite links: Link 1 | Link 2 | Link 3 | Link 4
                        Link 5 | Link 6 | Link 7 | Link 8. I hope
    you enjoy these links as much as I do.
    I dont think that can be done with lists. There are other ways to do it without tables.

    But instead, if you want
    Code:
    Link 1 | Link 2 | Link 3 | Link 4
    Link 5 | Link 6 | Link 7 | Link 8
    -----------------------------------
    OK, now its time for blah blah.
    For the second type of display:
    Code:
    ul {margin: 0; padding: 0; display: block; list-style: none}
    li {margin: 0; padding: 3px; float: left;
    width: 150px /* replace with with em for more fluid layout */
    color: #339; font-weight: bold; border-left: 1px solid black}
    li.first {border-left: none;}
    <ul>
    <li class="first">...</li>
    <li>...</li>
    ...
    <li></li>
    </ul>

  6. #6
    Join Date
    Nov 2002
    Posts
    57
    Thanks,

    That works great! I appreciate your help.

    Thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles