SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy UL list splitter across columns?

    hi all

    This may be a CSS thing as well, so asking here

    Does anyone know how to split a list horizontally across columns,
    something like this: http://www.madeincima.it/en/articles...litter-plugin/

    BUt the above doesnt let me do this:
    I want to have list items split into 4 columns,
    but list items should be ordered top to bottom,
    and not column specific, ie when you make the browser smaller, the 4 columns will turn into 3 columns and all items will be split again amongst the 3 columns.
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

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

    If you mean you want the list to go 1 ,2 3 across the top of the page rather than down the page as in the plugin you showed then isn't that what lists will more or less do automatically if you float or set them to inline-block?

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    ol {
    	margin:0 auto;
    	padding:0;
    	width:70%;
    }
    li {
    	display:inline-block;
    	width:200px;
    	border:1px solid #000;
    	vertical-align:top;
    }
    * html li{display:inline}/* ie6 in line-block fix*/
    *+html li{display:inline}/* ie7 in line-block fix*/
    </style>
    </head>
    
    <body>
    <ol>
    		<li>List item 1</li>
    		<li>List item 2</li>
    		<li>List item 3</li>
    		<li>List item 4</li>
    		<li>List item 5</li>
    		<li>List item 6</li>
    		<li>List item 7</li>
    		<li>List item 8</li>
    		<li>List item 9</li>
    		<li>List item 10</li>
    		<li>List item 11</li>
    		<li>List item 12</li>
    </ol>
    </body>
    </html>
    If you want vertical columns then you will need some js to do that or perhaps something like the css3 multi column layout of which there is no support in IE9 and under.

  3. #3
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok - ive tried to draw you what i want (hopefully i makes more sense):
    have a look here :
    http://www.bluecrushdesign.co.za/images/columnwrap.jpg

    i want the list items to fall underneath each other (in order from top down),
    and then fall into the next column. Like automatic wrapping

    is it a bit clearer?
    do you see how when the browser is smaller , the columns are then only 2 and the items then spread equally between the 2 columns instead of 3.
    Is this more a php dev thing?
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by escapedf View Post
    ok - ive tried to draw you what i want (hopefully i makes more sense):
    have a look here :
    http://www.bluecrushdesign.co.za/images/columnwrap.jpg

    i want the list items to fall underneath each other (in order from top down),
    and then fall into the next column. Like automatic wrapping

    is it a bit clearer?
    do you see how when the browser is smaller , the columns are then only 2 and the items then spread equally between the 2 columns instead of 3.
    Is this more a php dev thing?
    That looks exactly like the plugin you showed me in your first post The plugin splits a single list across as many columns that will fit and fills from top to bottom as you wanted. What doesn't it do that you wanted exactly ?

    The css3 multi-column layout will also do this but as I said there's no support in IE9 so your choices will be a script of some sort.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    What doesn't it do that you wanted exactly ?
    Maybe the problem is that the lists in the jQuery example don't include item numbers to the left, but they can easily be reinstated. In the linked example, the ULs are et to list-style: none to remove the bullets, but without that the UL or OL will show bullets/numbers.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Maybe the problem is that the lists in the jQuery example don't include item numbers to the left, but they can easily be reinstated. In the linked example, the ULs are et to list-style: none to remove the bullets, but without that the UL or OL will show bullets/numbers.
    Yes, it's an easy matter to reinstate the bullets or list numbers in that plugin so it seems to be doing what the OP wanted.

  7. #7
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi guys..

    The problem is , that in the jquery example, is the actual order of the list items..

    Look at the 3rd example in the demo:
    When you make the screen smaller..

    Yes, the 5 columns turn into 4 columns..
    But look at the actual order of the list items inside these 4 columns

    if you look at the first column,,
    it goes:
    1, 6, 11, 5, 10, 15

    i want it to go
    1, 2,3, 4, 5, 6

    I not only want it to go down in order in the first column,
    but also down in order when the 5 columns become two.

    Look at the numbers/order in my drawing,
    im not sure how else to explain it :
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    O, I see. Paul may have a brilliant solution for that, but all I can think of off the top of my head is to wrap divs with classes around the various groups of lists and use media queries.

    E.g. Wrap a div around list one and two, and specify that, at a certain screen width, the div around the first two lists is constrained to the width of a single list, forcing the second list to drop beneath the first. Seems a bit awkward, though.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by escapedf View Post
    hi guys..

    The problem is , that in the jquery example, is the actual order of the list items..

    Look at the 3rd example in the demo:
    When you make the screen smaller..
    Yes but the third example is an example of aligning the lists horizontally as stated in the heading above. The first example goes vertically as you wanted.

    The only problem is if you want consecutive numbers as the js takes one single list and then creates 3 or 4 uls instead so it can make the columns which means the numbers will go vertically but reset to one on each column. However the data is completely vertical and in order.

    If you need consecutive numbers then you will need to interface with the script and add the numbers as required or perhaps append the "start" attribute(deprecated) to each new column ul when created using the correct number.

    The css3 column module should be able to handle this quite easily but you will have to wait for support.

  10. #10
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah the first example goes:
    1,2,3,4,5,11,12,13 when you make the browser smaller and it goes into 2 columns

    "interface with the script and add the numbers as required or perhaps append the "start" attribute(deprecated) to each new column ul when created using the correct number."

    Maybe i should ask in javascript forum how to "interface with script" or "append the start attribute"
    Is this a PHP or javascript thing?

    ?
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes it will need to be scripted I'm afraid and probably a job for javascript.

    This script does almost all you want except that you need to specify the number of columns. I'm sure someone in the JS forum could adjust it so that the cols parameter is created from the available width assuming each column has a fixed width. It would also have to be tied into the resize event and called each time the page is resized.

    If you want I'll move the thread to JS for you.

  12. #12
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes , please move it..

    can anyone from JS help pretty please ? ;-)
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I suppose it's not very practical, and may not be what you're after, but this was what I was suggesting using @medi rules:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    	
    <style media="all">
    * {margin: 0; padding: 0;}
    ol {width: 200px;  margin: 0 0 0 30px; padding: 0 0 0 20px;}
    
    @media only screen and (min-width: 1000px) {
    	.first, .second, .third, .fourth {float: left}
    }
    	
    @media only screen and (max-width: 1000px) {
    	div.twocol {width: 250px; float: left;}
    	div.threecol {width: 500px;}
    	.first, .second, .third {float: left}
    	.fourth {margin-left: 530px;}
    }
    
    @media only screen and (max-width: 750px) {
    	div.twocol {width: 250px; float: left;}
    	div.fourcol {width: 500px; float: left;}
    	.first, .second, .third, .fourth {float: left}
    	.fourth {margin-left: 30px;}
    }
    </style>
    	
    </head>
    <body>
    
    <div class="fourcol">
    <div class="threecol">
    <div class="twocol">
    <ol class="first">
    	<li>1st list item of many</li>
    	<li>2nd list item of many</li>
    	<li>3rd list item of many</li>
    	<li>4th list item of many</li>
    	<li>5th list item of many</li>
    	<li>6th list item of many</li>
    	<li>7th list item of many</li>
    	<li>8th list item of many</li>
    	<li>9th list item of many</li>
    	<li>10th list item of many</li>
    </ol>
    
    <ol class="second" start="11">
    	<li>11th list item of many</li>
    	<li>12th list item of many</li>
    	<li>13th list item of many</li>
    	<li>14th list item of many</li>
    	<li>15th list item of many</li>
    	<li>16th list item of many</li>
    	<li>17th list item of many</li>
    	<li>18th list item of many</li>
    	<li>19th list item of many</li>
    	<li>20th list item of many</li>
    </ol>
    </div>
    
    <ol class="third" start="21">
    	<li>21st list item of many</li>
    	<li>22nd list item of many</li>
    	<li>23rd list item of many</li>
    	<li>24th list item of many</li>
    	<li>25th list item of many</li>
    	<li>26th list item of many</li>
    	<li>27th list item of many</li>
    	<li>28th list item of many</li>
    	<li>29th list item of many</li>
    	<li>30th list item of many</li>
    </ol>
    </div>
    
    <ol class="fourth" start="31">
    	<li>31st list item of many</li>
    	<li>32nd list item of many</li>
    	<li>33rd list item of many</li>
    	<li>34th list item of many</li>
    	<li>35th list item of many</li>
    	<li>36th list item of many</li>
    	<li>37th list item of many</li>
    	<li>38th list item of many</li>
    	<li>39th list item of many</li>
    	<li>40th list item of many</li>
    </ol>
    </div>
    </body>
    </html>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •