SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using Unordered List like Table Cells?

    Is it "legal" (and possible) to use an unordered list set to display "inline" like table cells? Styling each <li> with different widths and backgrounds and have styled content within those (like <p> tags) resulting in a fixed 3 column (or more) layout?

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It's not normal in any way.

    don't think a <p> inside a <li> is allowed.

    Use divs to get your three column layout. don't re-invent the (square )wheel.

  3. #3
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by brooklynartist10 View Post
    Is it "legal" (and possible) to use an unordered list set to display "inline" like table cells? Styling each <li> with different widths and backgrounds and have styled content within those (like <p> tags) resulting in a fixed 3 column (or more) layout?
    Yes, it is. You can set the display: options for any element to be whatever you want, so you could have li {display:table-cell;}, although you would then need to figure out how to set the table-row and table holders. The other option is just to float the list items, but then you might struggle to get the height right.

    <li> can contain either inline or block elements, so you can have <li><p>...</p></li> (but you can't have <li><p>...</p>...</li>, it has to be one or the other (with the exception of containing nested <ul>s)).

    But the question is ... why would you want to? I'm struggling to think of a situation where that kind of large-scale content would be a legitimate use of <li>, it sounds far more suited to <div>s instead ... can you give an example of how you would use it?

  4. #4
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's just out curiosity that I was wondering. I noticed the inline lists I've using for my horizontal menus and just wondered if that would scale up to hold more content. I experimented with it briefly but had trouble getting the individual list areas to behave individually. It just seemed like a possible alternative to nesting DIVS and floating them. But it seems to be more trouble than its worth. I know table attributes are possible in the most updated browsers - i just (briefly) thought that a inline list might create a row-like structure in the same way and be accepted to larger number of browsers.

    Thank for you input, though! I really appreciate it.

  5. #5
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by brooklynartist10 View Post
    It's just out curiosity that I was wondering. I noticed the inline lists I've using for my horizontal menus and just wondered if that would scale up to hold more content. I experimented with it briefly but had trouble getting the individual list areas to behave individually. It just seemed like a possible alternative to nesting DIVS and floating them. But it seems to be more trouble than its worth. I know table attributes are possible in the most updated browsers - i just (briefly) thought that a inline list might create a row-like structure in the same way and be accepted to larger number of browsers.
    The thing about "inline" is that it doesn't support multi-row content - so the contents of each "cell" would be limited to a single line of text, which could be quite restricting. "Inline-block" would get round that, but again you are cutting out older browsers.

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by brooklynartist10 View Post
    Is it "legal" (and possible) to use an unordered list .... resulting in a fixed 3 column (or more) layout?
    Yes, it is possible and it has been done before. However it is advised against doing so.

    If you are curious to see some examples there are several here -
    http://www.tjkdesign.com/articles/fl...ss_layouts.asp

    Even the author admits that they are just for demo purposes only.


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
  •