SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    horizontal ul with some li on left and others right

    Another day... another question...

    I have a horizontal ul with 5 li.
    I want to 'split it'... 3 li to be on the left and 2 on the right. With a gap between.

    To float a single li to the right, I'd use...

    ul#listname .right {float: right;} and apply a class="right" to the appropriate li.

    But what about 2? Can I simply wrap a class around 2 li?

  2. #2
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This seems to work OK, but I've just noticed that IE is losing the list style, for some reason:
    HTML 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>
        <title>
          Untitled
        </title>
        <style type="text/css">
    /*<![CDATA[*/
    <!--
    #listContainer {
      width: 400px;
      border: 1px solid #ccc;
    }
    li.right {
      float:right;
      margin-right: 20px;
      clear: both;
    }
    -->
    /*]]>*/
        </style>
      </head>
      <body>
        <div id="listContainer">
          <ul>
            <li class="right">
              List Item 4
            </li>
            <li class="right">
              List Item 5
            </li>
            <li>
              List Item 1
            </li>
            <li>
              List Item 2
            </li>
            <li>
              List Item 3
            </li>
          </ul>
        </div>
      </body>
    </html>
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On IE Mac I'm getting 4 and 5 on the right with no bullets. Th eothers are to the left with bullets.

    Should all be inline, no bullets.

    Thanks anyway, I'll take a break and come back to it.

  4. #4
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, didn't read it properly

    Is this what you are looking for:
    HTML 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>
        <title>
          Untitled
        </title>
        <style type="text/css">
    /*<![CDATA[*/
    <!--
    #listcontainer {
      width: 100%;
      height: 50px;
      border: 1px solid #ccc;
      padding: 0;
    }
     #list li
    {
    display: inline;
    list-style-type: none;
    padding: 10px;
    }
    #list li.right {
      float: right;
    }
    #list li.left {
      float: left;
    }
    -->
    /*]]>*/
        </style>
      </head>
      <body>
        <div id="listcontainer">
          <ul id="list">
            <li class="left">
              <a href="#">Item one</a>
            </li>
            <li class="left">
              <a href="#">Item two</a>
            </li>
            <li class="left">
              <a href="#">Item three</a>
            </li>
            <li class="right">
              <a href="#">Item five</a>
            </li>
            <li class="right">
              <a href="#">Item four</a>
            </li>
          </ul>
        </div>
      </body>
    </html>
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. That's great.

    Is it reliable to 'clean the code' so the default li is a float left?
    I know it's a bit anal - I like 'simple'.

    #list li
    {
    display: inline;
    list-style-type: none;
    padding: 10px;
    }

    #list li {
    float: left;
    }

    #list li.right {
    float: right;
    }

    <ul id="list">
    <li><a href="#">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    <li class="right"><a href="#">Item five</a></li>
    <li class="right"><a href="#">Item four</a></li>
    </ul>

  6. #6
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, the less code the better. You could actually use less code still:
    Code:
    #list li { display: inline; list-style-type: none; padding: 10px; float:left;} 
    #list li.right {float: right;}
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Appreciated.


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
  •