0

Hi all, I wonder if you can help me at all. I need to display one ul list into separate (3-4) columns one next to the other one, only if the number of items is bigger than 6.
Let's look at the following code.
Html is:

<div class="wrapper">
    <h2 id="first">First</h2>                     
        <ul id="items">                      
            <li><a href="#">Product1</a></li>
            <li><a href="#">Product2</a></li>
            <li><a href="#">Product3</a></li>
            <li><a href="#">Product4</a></li>
            <li><a href="#">Product5</a></li>                           
            <li><a href="#">Product6</a></li>
            <li><a href="#">Product7</a></li>
            <li><a href="#">Product8</a></li>
            <li><a href="#">Product9</a></li>
            <li><a href="#">Product10</a></li>
            <li><a href="#">Product11</a></li>
            <li><a href="#">Product12</a></li>
            <li><a href="#">Product13</a></li>
            <li><a href="#">Product14</a></li>
            <li><a href="#">Product15</a></li>                          
            <li><a href="#">Product16</a></li>
            <li><a href="#">Product17</a></li>
            <li><a href="#">Product18</a></li>
            <li><a href="#">Product19</a></li>
            <li><a href="#">Product20</a></li>                          
        </ul>
    <div class="clear"></div>
   </div>

CSS:

.wrapper ul{
    list-style: inside disc none;
    color: #AC2973;
    /* float:left; */
    margin-right:11.189%;
    margin-left:8px;    
}
.wrapper ul#items li{
    /*width:33%;
    float:left; */
} 

.wrapper ul li a{
    font-size:0.875em;
    line-height:1.428571428571429em; /*14/20*/
}

Now, I appreciate that there will be people saying "oh why don't you use multiple lists etc etc", the thing is, it's a bit complicated to explain, but the cms doestn' like multiple lists etc etc, so in essence I have to have 1 ul which display like multiple ones, one next to the other.

I have tried with css only, following this approach http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/ but I will have problems displaying the list correctly on mobile devices so I need to do it via script.

I presume a script should look at the ul, determine whether there are more than 6 items, if so display the 7th item up to the 13th in a separate column and so on. Is it achievable? where would I start from?
Any advice is much appreciated

thanks

2
Contributors
7
Replies
35
Views
4 Years
Discussion Span
Last Post by LastMitch
0

Hi all, I wonder if you can help me at all. I need to display one ul list into separate (3-4) columns one next to the other one, only if the number of items is bigger than 6.

What does this has to do with javascript?

You don't need to add wrapper CSS in front of the ul, li.

It doesn't work. So I got no idea why you did that.

You only need these CSS code:

ul{width:760px;margin-bottom:20px;overflow:hidden;border-top:1px solid #ccc;}
li{line-height:1.5em;border-bottom:1px solid #ccc;float:left;display:inline;}
#items li { width:25%; }

Html code:

<div class="wrapper">
<h2 id="first">First</h2> 
<ul id="items">
<li><a href="#">Product1</a></li>
<li><a href="#">Product2</a></li>
<li><a href="#">Product3</a></li>
<li><a href="#">Product4</a></li>
<li><a href="#">Product5</a></li>
<li><a href="#">Product6</a></li>
<li><a href="#">Product7</a></li>
<li><a href="#">Product8</a></li>
<li><a href="#">Product9</a></li>
<li><a href="#">Product10</a></li>
<li><a href="#">Product11</a></li>
<li><a href="#">Product12</a></li>
<li><a href="#">Product13</a></li>
<li><a href="#">Product14</a></li>
<li><a href="#">Product15</a></li>
<li><a href="#">Product16</a></li>
<li><a href="#">Product17</a></li>
<li><a href="#">Product18</a></li>
<li><a href="#">Product19</a></li>
<li><a href="#">Product20</a></li>
</ul>
<div class="clear"></div>
</div>

it works fine. I like it.

Edited by LastMitch: grammer

0

hi LastMitch,
thanks for that. Well the reason why I said I might need js is because I have attempted - before posting - something similar to what you've done and it works fine as long as you view the site on a desktop machine. If you resize your browser, say you go down to a resolution of 350px, then the list breaks and I need a solution that works across mobile devices too. That said I haven't tested your code as yet, so I will do it right now to check the list doestn' break.
As for having "longer" css selectors, unfortunately that is necessary for several reasons:
1) I have many uls and lis in my page, and I want to target only the ones inside the wrapper container;
2) I am not the only one who updates the css (which is pretty big by the way), but there are other people that will do that. So I am happy to have a "slower" selector to make sure that the style of that list doesn't get overridden by something else declared somewhere else in the css
thanks

Sorry I forgot a very very important point. WIth your solution above the "reading order" changes: list items ina list are meant to be read from top to bottom, whereas with the percentage solution above, I end up having to read the list from left to right, so effectively the list loses its meaning I believe

Edited by Violet_82: Forgot a very important point!

0

thanks for that. Well the reason why I said I might need js is because I have attempted - before posting - something similar to what you've done and it works fine as long as you view the site on a desktop machine. If you resize your browser, say you go down to a resolution of 350px, then the list breaks and I need a solution that works across mobile devices too. That said I haven't tested your code as yet, so I will do it right now to check the list doestn' break.
As for having "longer" css selectors, unfortunately that is necessary for several reasons:
1) I have many uls and lis in my page, and I want to target only the ones inside the wrapper container;
2) I am not the only one who updates the css (which is pretty big by the way), but there are other people that will do that. So I am happy to have a "slower" selector to make sure that the style of that list doesn't get overridden by something else declared somewhere else in the css
thanks

I hope you know that you mention 3 issues you are having now and you expect a member to resolve all 3?

I think that's a bit far fetch don't you think?

you mention your CMS doesn't work well with the list code.
you mention this CSS doesn't well well with your mobile website.
you mention that small javascript code snippet will resolve this issue?

Personally I try this CSS list in a responsive design and works fine in

@media only screen and (min-device-width : 320px) and (max-device-width : 480px)

Right now base on what you mention and you did I think you add something in your code to prevent the list to display correctly.

Edited by LastMitch: grammer

0

No I am not expecting a member to resolve all the issues, I was just answering your question about "what all this has to do with javascript" and therefore I listed the issues that I thought could be resolved with js.
I haven't added anything to the code, I appreciate that it will work fine with @media only screen and (min-device-width : 320px) and (max-device-width : 480px) - I haven't tried but if it worked for you I don't see why it shouldn't work for me - but the main issue with theis approach as said is that the reading order changes: a list is meant to be read from top to bottom and not I have to read it from left to right, so that, for example, product1 and product2 are next to each other and not one above the other as it should be, see screenshot

Attachments
<!DOCTYPE html>
<html>
	<head>
		<style>
			ul{width:760px;margin-bottom:20px;overflow:hidden;border-top:1px solid #ccc;}
			li{line-height:1.5em;border-bottom:1px solid #ccc;float:left;display:inline;}
			#items li { width:25%; }
		</style>
	</head>
	<body>
		<div class="wrapper">
			<h2 id="first">First</h2> 
			<ul id="items">
				<li><a href="#">Product1</a></li>
				<li><a href="#">Product2</a></li>
				<li><a href="#">Product3</a></li>
				<li><a href="#">Product4</a></li>
				<li><a href="#">Product5</a></li>
				<li><a href="#">Product6</a></li>
				<li><a href="#">Product7</a></li>
				<li><a href="#">Product8</a></li>
				<li><a href="#">Product9</a></li>
				<li><a href="#">Product10</a></li>
				<li><a href="#">Product11</a></li>
				<li><a href="#">Product12</a></li>
				<li><a href="#">Product13</a></li>
				<li><a href="#">Product14</a></li>
				<li><a href="#">Product15</a></li>
				<li><a href="#">Product16</a></li>
				<li><a href="#">Product17</a></li>
				<li><a href="#">Product18</a></li>
				<li><a href="#">Product19</a></li>
				<li><a href="#">Product20</a></li>
			</ul>
			<div class="clear"></div>
		</div>
	<body>
</html>
0

I haven't tried but if it worked for you I don't see why it shouldn't work for me - but the main issue with theis approach as said is that the reading order changes: a list is meant to be read from top to bottom and not I have to read it from left to right, so that, for example, product1 and product2 are next to each other and not one above the other as it should be, see screenshot

I saw your demo. I usually don't download things but I saw your code you need to put it in the middle column:

 ---------------header--------------
 |   1   |        2       |    3   |
 |       |    your list   |        |
 |       |                |        |
 |       |                |        |     
 |       |                |        |
 ---------------footer--------------

You mean something like (it's not the same code, I took it out a few stuff and put a div container)cf333fb42ed26792fe9eacc4d070cc53

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.