SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    display nested list horizontally?

    I'm struggling to get this working, and now wonder whether it is possible at all. This is the code (automatically output by a CMS):
    Code:
    <ul class="level_1"> 
      <li class="year submenu">2007 
      <ul class="level_2"> 
        <li class="first">1</li> 
        <li>2</li> 
        <li class="last">3</li> 
      </ul>
      </li> 
      <li class="year submenu">2006 
      <ul class="level_2"> 
       <li class="first">1</li> 
        <li>2</li> 
        <li class="last">3</li>
      </ul>
      </li> 
    </ul>
    This is the layout I want:
    2007 | 1 | 2 | 3
    2006 | 1 | 2 | 3
    I wonder whether I'll have to do negative margins. But before I'll do this I wonder whether I' overlooking something.

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

    That seems pretty straight forward.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    *{margin:0;padding:0}
    ul.level_1,ul.level_1 ul {list-style:none;}
    ul.level_1 li {margin:10px 0}
    ul.level_1 li li{
        display:inline;
        border-left:1px solid #000;
        padding:0 5px;
        margin:0;
    }
    ul.level_1 ul{display:inline}
    
    </style>
    </head>
    <body>
    <ul class="level_1">
        <li class="year submenu">2007
            <ul class="level_2">
                <li class="first">1</li>
                <li>2</li>
                <li class="last">3</li>
            </ul>
        </li>
        <li class="year submenu">2006
            <ul class="level_2">
                <li class="first">1</li>
                <li>2</li>
                <li class="last">3</li>
            </ul>
        </li>
    </ul>
    </body>
    </html>
    Is that what you meant ?

  3. #3
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! Thanks so much, Paul.
    {display:inline} is what I didn't use.
    All the best!

  4. #4
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! Thanks so much, Paul.
    {display:inline} is what I didn't use.
    Best wishes.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    So good you had to say it twice


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
  •