SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 Column List - Need Vertically

    I have some check boxes & labels that display in a 2 column format. The content goes from left - right , then the next row & so on.
    I need the content to go from top - bottom in first column & then top - bottom in the 2nd column. Is this possible ? I can't change (at the most make limited changes to) the HTML as the content comes from a database
    Thanks

    The content now is like
    A B
    C D
    E F
    G H

    I need it like

    A E
    B F
    C G
    D H

    Here is the HTML & CSS


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <style type="text/css">
    #MyList {width:500px; list-style:none; margin:0 auto 0 auto;}
    #MyList li {list-style-type:none; float:left; width:250px; }
    #MyList li label{width:200px;	padding:2px 10px 0 8px; display:inline-block;}
    </style> 
    </head>
    <body>
    <ul id="MyList">
    
            <li><input id="i1" type="checkbox" /><label for="i1">A- Item List</label></li>
            <li><input id="i2" type="checkbox" /><label for="i2">B- Item List</label></li>
            <li><input id="i3" type="checkbox" /><label for="i3">C- Item List</label></li>
            <li><input id="i4" type="checkbox" /><label for="i4">D- Item List</label></li>
            <li><input id="i5" type="checkbox" /><label for="i5">E- Item List</label></li>
            <li><input id="i6" type="checkbox" /><label for="i6">F- Item List</label></li>
            <li><input id="i7" type="checkbox" /><label for="i7">G- Item List</label></li>
            <li><input id="i8" type="checkbox" /><label for="i8">H- Item List</label></li>
            <li><input id="i9" type="checkbox" /><label for="i9">I- Item List</label></li>
            <li><input id="i10" type="checkbox" /><label for="i10">J- Item List</label></li>
    </ul>
    </body>
    </html>

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never mind,
    I got it for now. I'm putting half of the items from the database in a div & the rest in another floated div.
    Although the div in a ul seems not a good idea, it is working.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <style type="text/css"> 
    #MyList {width:500px; list-style:none; margin:0 auto 0 auto;}
    #MyList li {list-style-type:none; float:left; width:220px; }
    #MyList li label{width:150px;	padding:2px 10px 0 8px; display:inline-block;}
    .group { width:240px;  overflow:hidden; float:left;}
    </style> 
     
    </head>
     
    <body>
     
    <ul id="MyList">
     
        <div class="group">
            <li><input id="i1" type="checkbox" /><label for="i1">A- Item List</label></li>
            <li><input id="i2" type="checkbox" /><label for="i2">B- Item List</label></li>
            <li><input id="i3" type="checkbox" /><label for="i3">C- Item List</label></li>
            <li><input id="i4" type="checkbox" /><label for="i4">D- Item List</label></li>
            <li><input id="i5" type="checkbox" /><label for="i5">E- Item List</label></li>
        </div>
        <div class="group">
            <li><input id="i6" type="checkbox" /><label for="i6">F- Item List</label></li>
            <li><input id="i7" type="checkbox" /><label for="i7">G- Item List</label></li>
            <li><input id="i8" type="checkbox" /><label for="i8">H- Item List</label></li>
            <li><input id="i9" type="checkbox" /><label for="i9">I- Item List</label></li>
            <li><input id="i10" type="checkbox" /><label for="i10">J- Item List</label></li>
        </div>
    </ul>
     
    </body>
    </html>

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    OK, second try. My deleted attempt was goofy <smile>. Needed caffein.

    An alternative (which validates):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    
    
    
    -->
    <head>
        <title>template</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    div {
        outline:1px solid lime;    /* LAYOUT TESTING */
        text-align:center;
    }
    .MyList {
        outline:1px solid magenta;    /* LAYOUT TESTING */
        list-style:none;
        text-align:left;
        width:225px;
        display:inline-block;
        padding:0;
        margin:0;
    }
    .MyList li {
        outline:1px solid cyan;    /* LAYOUT TESTING */
        list-style-type:none;
        width:225px;
    }
    .MyList li label {
        background-color:yellow;    /* LAYOUT TESTING */
        display:inline-block;
        width:185px;
        padding:2px 10px 0px 8px;
    }
    
        </style>  
    </head>
    <body>
    <div>
        <ul class="MyList">
            <li><input id="i1" type="checkbox" /><label for="i1">A- Item List</label></li>
            <li><input id="i2" type="checkbox" /><label for="i2">B- Item List</label></li>
            <li><input id="i3" type="checkbox" /><label for="i3">C- Item List</label></li>
            <li><input id="i4" type="checkbox" /><label for="i4">D- Item List</label></li>
            <li><input id="i5" type="checkbox" /><label for="i5">E- Item List</label></li>
        </ul>
        <ul class="MyList">
            <li><input id="i6" type="checkbox" /><label for="i6">F- Item List</label></li>
            <li><input id="i7" type="checkbox" /><label for="i7">G- Item List</label></li>
            <li><input id="i8" type="checkbox" /><label for="i8">H- Item List</label></li>
            <li><input id="i9" type="checkbox" /><label for="i9">I- Item List</label></li>
            <li><input id="i10" type="checkbox" /><label for="i10">J- Item List</label></li>
        </ul>
    </div>
    </body>
    </html>

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    as ronpat pointed out, the only VALID direct child of a UL or OL is an LI. So wrapping your LIs in DIVs is a nono. Ron's suggestion is valid, and logically acceptable ;except perhaps in the case of an ordered list in which your count would reset... but there are HTML ways around this too.

    CSS3 offers columned layout, however support is still spotty and somewhat buggy.

    IF you know can anticipate the height of each LI ( lets say you know you text isnt going to wrap, for example, so all LIs are the same height) you could do this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <style type="text/css">
    #MyList {width:500px; list-style:none; margin:0 auto 0 auto; border:1px solid red}
    #MyList li {list-style-type:none;  width:250px;  height: 3ex}
    #MyList li label{width:200px;	padding:2px 10px 0 8px; display:inline-block;}
    .seccol , .seccol ~ li {margin-left: 250px;}
    .seccol { margin-top: -15ex;} 
    </style> 
    </head>
    <body>
    <ul id="MyList">
    
            <li><input id="i1" type="checkbox" /><label for="i1">A- Item List</label></li>
            <li><input id="i2" type="checkbox" /><label for="i2">B- Item List</label></li>
            <li><input id="i3" type="checkbox" /><label for="i3">C- Item List</label></li>
            <li><input id="i4" type="checkbox" /><label for="i4">D- Item List</label></li>
            <li><input id="i5" type="checkbox" /><label for="i5">E- Item List</label></li>
            <li class="seccol"><input id="i6" type="checkbox" /><label for="i6">F- Item List</label></li>
            <li><input id="i7" type="checkbox" /><label for="i7">G- Item List</label></li>
            <li><input id="i8" type="checkbox" /><label for="i8">H- Item List</label></li>
            <li><input id="i9" type="checkbox" /><label for="i9">I- Item List</label></li>
            <li><input id="i10" type="checkbox" /><label for="i10">J- Item List</label></li>
    </ul>
    </body>
    </html>
    That should cover most modern browsers. For even broader support, of course, you could replace .seccol ~ li with a class, '.col2item' for example. and add "class='col2item'" to each LI AFTER the one with class "seccol".

    Hope that helps

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    dresden_phoenix, another simply elegant example. Very clever, and very appreciated. Thank you for posting. Now I gotta read about "ex" units of measure <smile>.

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys for your posts. I will use 2 unordered lists.
    @dresden_phoenix - That's a nice method. but at the moment I am not sure about using that fixed negative margin.

  7. #7
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had a similar problem and I used a jQuery solution. I am not sure if this would be acceptable but I'll post it anyway. The solution is to let your server side code display the items in one UL then use jQuery to distribute the items into two or more columns. Example:

    HTML Code:
    <ul id="MyList">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
    </ul>
    JavaScript/jQuery

    Code JavaScript:
      $(function() {
        var numberOfColumns = 3;
        var itemsPerColumn = Math.ceil($('#MyList').children("li").length / numberOfColumns);
        var previousColumn = $('#MyList');
        var currentColumn;
        var i;
        for (i = 1; i < numberOfColumns; i++) {
          currentColumn = $('<ul id="MyList-' + i + '"></ul>').insertAfter(previousColumn);
          previousColumn.children('li:gt(' + (itemsPerColumn - 1) + ')').appendTo(currentColumn);
          previousColumn = currentColumn;
        }
      });

    Code CSS:
      ul {
        float: left;
        margin-left: 10px;
        border-left: 5px solid #CCC;
        padding-left: 30px;
        list-style-type: decimal-leading-zero;
      }

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Hey, d_p! Looks like we can sneak by without adding a class to item 6 (or creating column divs) by using the adjacent sib selector. Whadda-ya-think? Cross-browser compatible?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?896957-2-Column-List-Need-Vertically
    
    -->
    <head>
        <title>template</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    .MyList {
        border:1px solid red;
        list-style-type:none;
        width:500px;
        height:15ex;    /* REQUIRED. (comment me out and reload!) */
        margin:0 auto;
    }
    .MyList li {
        width:250px;
        height:3ex;
    }
    .MyList li label {
        display:inline-block;
        width:200px;
        padding:2px 10px 0 8px;
    }
    li + li + li + li + li + li {margin-top:-15ex;margin-left:250px;}
    li + li + li + li + li + li + li {margin-top:0ex;}
    
        </style>
    </head>
    <body>
    
    <ul class="MyList">
        <li><input id="i1" type="checkbox" /><label for="i1">A- Item List</label></li>
        <li><input id="i2" type="checkbox" /><label for="i2">B- Item List</label></li>
        <li><input id="i3" type="checkbox" /><label for="i3">C- Item List</label></li>
        <li><input id="i4" type="checkbox" /><label for="i4">D- Item List</label></li>
        <li><input id="i5" type="checkbox" /><label for="i5">E- Item List</label></li>
        <li><input id="i6" type="checkbox" /><label for="i6">F- Item List</label></li>
        <li><input id="i7" type="checkbox" /><label for="i7">G- Item List</label></li>
        <li><input id="i8" type="checkbox" /><label for="i8">H- Item List</label></li>
    </ul>
    <ul class="MyList">
        <li><input id="i1" type="checkbox" /><label for="i1">A- Item List</label></li>
        <li><input id="i2" type="checkbox" /><label for="i2">B- Item List</label></li>
        <li><input id="i3" type="checkbox" /><label for="i3">C- Item List</label></li>
        <li><input id="i4" type="checkbox" /><label for="i4">D- Item List</label></li>
        <li><input id="i5" type="checkbox" /><label for="i5">E- Item List</label></li>
        <li><input id="i6" type="checkbox" /><label for="i6">F- Item List</label></li>
        <li><input id="i7" type="checkbox" /><label for="i7">G- Item List</label></li>
        <li><input id="i8" type="checkbox" /><label for="i8">H- Item List</label></li>
        <li><input id="i9" type="checkbox" /><label for="i9">I- Item List</label></li>
        <li><input id="i10" type="checkbox" /><label for="i10">J- Item List</label></li>
    </ul>
    
    </body>
    </html>


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
  •