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.
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?
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.
ok - ive tried to draw you what i want (hopefully i makes more sense):
have a look here :
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.
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.
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.
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.
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?
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.
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:
<!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>
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 ?
