display one ul list in columns

Question

Violet_82 89 Posting Whiz in Training

11 Years Ago

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

javascript

2 Contributors
7 Replies
209 Views
3 Days Discussion Span
Latest Post 11 Years Ago Latest Post by LastMitch

LastMitch

11 Years Ago

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 11 Years Ago by LastMitch because: grammer

LastMitch

11 Years Ago

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 11 Years Ago by LastMitch because: grammer

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Violet_82 89 Posting Whiz in Training · Answer 1 · 2013-04-24T07:16:29+00:00

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

Violet_82 89 Posting Whiz in Training · Answer 2 · 2013-04-25T07:28:35+00:00

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

LastMitch · Answer 3 · 2013-04-26T02:37:03+00:00

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

Violet_82 89 Posting Whiz in Training · Answer 4 · 2013-04-26T09:42:05+00:00

yes that's it, could you show me the source code please?
thanks

LastMitch · Answer 5 · 2013-04-27T01:13:57+00:00

yes that's it, could you show me the source code please?

It's actually from here (it's different from the one you are using):

http://alistapart.com/article/multicolumnlists