CODEWITHSUNDEEP
htmlcsshtml-lists
Charles Marsh
Charles Marsh

Reputation: 465

Unordered list help

I need to loop though an array of links for a drop down menu.

The dropdown menu is fixed height div. I need the links to fill up the div starting from top left, downwards, then when the column is at max height (set by the surrounding div) it will start a new column from the top downwards as show below.

link one    link four   link seven  
link two    link five   link eight
link three  link six    link nine

I'm trying to use <ul> <li></li> </ul> but I cant get my head around how I'm going to style it up? if I float it left it will align left, if I don't it won't float left to start a new column?

Its a LIQUID file so I'm limited. (liquid being the Shopify template file type)

Upvotes: 0

Views: 236

Answers (4)

Richard JP Le Guen
Richard JP Le Guen

Reputation: 28753

I don't think this is really as general an answer as what you're looking for, but assuming certain constants (always nine items; always 3 columns of 3 items) here's an example of using relative positioning to achieve the desired effect:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
    <head>
        <title>Unordered list help/title>
        <style type="text/css">
            #myList {
                width:301px;
                height:61px;
            }
            #myList li + li + li + li {
                width:100px;
                float:right;
                clear:right;
                position:relative;
                top:-60px;
                left:-100px;
            }
            #myList li + li + li + li + li + li + li {
                position:relative;
                left:0px;
                top:-120px;
            }
            #myList li:first-child,
            #myList li:first-child + li,
            #myList li:first-child + li + li {
                width:100px;
            }
        </style>
    </head>
    <body>
        <ul id="myList">
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
            <li>Six</li>
            <li>Seven</li>
            <li>Eight</li>
            <li>Nine</li>
        </ul>
    </body>
</html>

Upvotes: 0

Paul Sham
Paul Sham

Reputation: 3205

If you would like an alternative to using CSS3, try looking at this A List Apart article on multi-column lists, which has multiple methods for breaking a list into multiple columns. I won't post a specific solution because it would depend on your situation but I've tried Method 6 and it worked.

Upvotes: 0

Vilx-
Vilx-

Reputation: 106902

I'm afraid such a flow is impossible in HTML/CSS as it is today. Things flow from left to right, then top to down. Not the other way round. Right. CSS3 columns. Didn't know about those. :P Thanks, Chris!

Anyways, while CSS3 columns are still not very widely supported, the easiest workaround is to give each item a fixed height, and then you can calculate each column in your server side code. Just emit a standard <table> with them and be done with it.

Otherwise you can use Javascript to measure each item and perform the layout on client side.

Upvotes: 0

Chris Schmitz
Chris Schmitz

Reputation: 8247

You can accomplish this with CSS3 columns: http://www.quirksmode.org/css/multicolumn.html

Otherwise you would need to wrap your rows in a containing element that is the height of your div and float those.

The only other way I could see doing it is with some JavaScript but you would still probably need to insert some sort of extra markup to accomplish this if you didn't use CSS3 columns.

Upvotes: 3

Related Questions