Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Oct 2011
    Posts
    136
    Thanks
    4
    Thanked 0 Times in 0 Posts

    unordered side by side list with CSS

    I'm looking for examples of unordered side by side list with CSS. Can someone help me please.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    67
    Thanks
    12
    Thanked 1 Time in 1 Post

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,930
    Thanks
    46
    Thanked 203 Times in 202 Posts
    Code:
    <div id="One">
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div id="Two">
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    Code:
    #One { float:left; }
    #Two { float:left; }
    Edit: Abduraooft's links are for horizontal menu's (we don't really know what you are asking for)
    Last edited by alykins; 04-10-2012 at 08:20 PM.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    Regular Coder
    Join Date
    Oct 2011
    Posts
    136
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I like what you did Alykins. The only thing is I want them side by side and not one above the other.

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,930
    Thanks
    46
    Thanked 203 Times in 202 Posts
    the CSS will make them side by side.. floating div "One" left and then bumped up against it will be div "Two"
    you may need to add this as well...
    Code:
    #One ul, #One ul li { float:left; }
    #Two ul, #Two ul li ( float:left; }
    but the ul's and li's should pick up the float through inheritance

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #7
    Regular Coder
    Join Date
    Oct 2011
    Posts
    136
    Thanks
    4
    Thanked 0 Times in 0 Posts
    The CSS doesn't seem to be working?

  • #8
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,930
    Thanks
    46
    Thanked 203 Times in 202 Posts
    mind you this is horrible mark up...

    Code:
    <html>
    <style type="text/css">
    #One{
    border:2px solid purple;
    float:left;
    }
    
    #Two{
    border:2px solid red;
    float:left;
    }
    
    #Three{
    border:2px solid green;
    float:left;
    }
    
    </style>
    <body>
    
    <div id="One">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
    
    <div id="Two">
      <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
    
    <div id="Three">
      <ul>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </ul>
    </div>
    
    </body>
    </html>
    now it's your job to apply it and mark it up correctly- this is for quick demo only
    Attached Thumbnails Attached Thumbnails unordered side by side list with CSS-demo.png  

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Posting Permissions

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