vinpkl Posted August 23, 2012 Share Posted August 23, 2012 hi all i m creating dropdown menu and i want to split the menu items in the multiple columns I tried this <ul style="padding-bottom:20px;"> <?php $leftqry="select * from itemstable where item_catg='men'"; $leftresult=mysql_query($leftqry); for($i = 0; $i < 10; $i++){ //$leftrow=mysql_fetch_array($leftresult); while($leftrow = mysql_fetch_array($leftresult)) { if (($i % 2) == 0) echo("</ul><ul>"); echo "<li>" . "<a class='leftnav' href='http://localhost/products.php?category_id=10&dealer_id=22'>» " .$leftrow['item_name']. "</a></li>"; } } ?> </ul> this output the list as <ul><li>item 1</li></ul> <ul><li>item 2</li></ul> <ul><li>item 3</li></ul> and so on But i want it to output the list like this below <ul> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ul> vineet Quote Link to comment https://forums.phpfreaks.com/topic/267459-split-list-dropdown-in-multiple-columns/ Share on other sites More sharing options...
Christian F. Posted August 23, 2012 Share Posted August 23, 2012 For that you'll need to use CSS, more specifically width and float. Float and give the list elements a width of 33%, then give the ul element the total width you'd like the columns to be. Quote Link to comment https://forums.phpfreaks.com/topic/267459-split-list-dropdown-in-multiple-columns/#findComment-1371696 Share on other sites More sharing options...
jazzman1 Posted August 23, 2012 Share Posted August 23, 2012 Try, $leftqry="select * from itemstable where item_catg='men'"; $leftresult=mysql_query($leftqry); for($i = 0; $i < 10; $i++): ?> <ul style="padding-bottom:20px;"> <?php //$leftrow=mysql_fetch_array($leftresult); while($leftrow = mysql_fetch_array($leftresult)) { echo "<li>" . "<a class='leftnav' href='http://localhost/products.php?category_id=10&dealer_id=22'>» " .$leftrow['item_name']. "</a></li>"; if (($i % 2) == 0) echo("</ul><ul>"); } ?> </ul> <?php endfor;?> Quote Link to comment https://forums.phpfreaks.com/topic/267459-split-list-dropdown-in-multiple-columns/#findComment-1371706 Share on other sites More sharing options...
vinpkl Posted August 23, 2012 Author Share Posted August 23, 2012 hi jazz Your code output comes as <ul><li>item 1<li></ul> <ul><li>item 1<li></ul> <ul><li>item 1<li></ul> <ul><li>item 1<li></ul> <ul><li>item 1<li></ul> <ul><li>item 1<li></ul> <ul><li>item 1<li></ul> <ul><li>item 1<li></ul> <ul><li>item 1<li></ul> I want to have it in single <ul></ul> like this below <ul> <li>item</il> <li>item</il> <li>item</il> <li>item</il> <li>item</il> <li>item</il> <li>item</il> <li>item</il> <li>item</il> </ul> vineet Quote Link to comment https://forums.phpfreaks.com/topic/267459-split-list-dropdown-in-multiple-columns/#findComment-1371710 Share on other sites More sharing options...
jazzman1 Posted August 23, 2012 Share Posted August 23, 2012 Ah, this is a different and is to late to thing by the way this is a valid html structure <ul style="padding-bottom: 20px"> <?php for($i = 0; $i < 10; $i++): ?> <?php //$leftrow=mysql_fetch_array($leftresult); while($row = mysql_fetch_array($result)) { echo "<li><a class='leftnav' href='http://localhost/products.php?category_id=10&dealer_id=22'>» " .$row['name']. "</a></li>"; if (($i % 2) == 0) echo "</ul><ul style=padding-top: 20px>"; } ?> <?php endfor;?> </ul> PS, Christian is right, you can use CSS in this case. Quote Link to comment https://forums.phpfreaks.com/topic/267459-split-list-dropdown-in-multiple-columns/#findComment-1371712 Share on other sites More sharing options...
vinpkl Posted August 23, 2012 Author Share Posted August 23, 2012 hi jazz <ul> ouput is empty <ul> no li items are displayed </ul> vineet Quote Link to comment https://forums.phpfreaks.com/topic/267459-split-list-dropdown-in-multiple-columns/#findComment-1371715 Share on other sites More sharing options...
jazzman1 Posted August 23, 2012 Share Posted August 23, 2012 Hi vinpkl, it was too late last night for me. Check this out -> http://stackoverflow.com/questions/2478748/can-i-render-in-tabular-form-with-ul-and-li-in-html In your example: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <style type="text/css"> ul{ margin: 0 auto; padding: 0; } /* The wider the #list_wrapper is, the more columns will fit in it */ #list_wrapper{ width: 200px } /* The wider this li is, the fewer columns there will be */ ul.multiple_columns li{ text-align: left; float: left; list-style: none; height: 30px; width: 100px; } </style> </head> <body> <form id="form1" runat="server"> <div> <div id="list_wrapper"> <ul class="multiple_columns"> <?php //$leftrow=mysql_fetch_array($leftresult); while($leftrow = mysql_fetch_array($leftresult)): ?> <?php echo '<li><a href=#>'.$leftrow['item_name'].'</a></li>';?> <?php endwhile;?> </ul> </div> </div> </form> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/267459-split-list-dropdown-in-multiple-columns/#findComment-1371773 Share on other sites More sharing options...
Barand Posted August 23, 2012 Share Posted August 23, 2012 try $leftqry="select * from itemstable where item_catg='men'"; $leftresult=mysql_query($leftqry); $items = array(); while($leftrow = mysql_fetch_array($leftresult)) { $items[] = "<li>" . "<a class='leftnav' href='http://localhost/products.php?category_id=10&dealer_id=22'>» " . $leftrow['item_name']. "</a></li>"; } $chunk = ceil(count($items)/3); $chunks = array_chunk($items, $chunk); foreach($chunks as $ch) { echo "<div style='float:left; width:30%;'><ul style='padding-bottom:20px;'>" . join("\n", $ch) . "</ul></div>\n"; } Quote Link to comment https://forums.phpfreaks.com/topic/267459-split-list-dropdown-in-multiple-columns/#findComment-1371778 Share on other sites More sharing options...
jazzman1 Posted August 23, 2012 Share Posted August 23, 2012 Very nice, Barand. I like this Quote Link to comment https://forums.phpfreaks.com/topic/267459-split-list-dropdown-in-multiple-columns/#findComment-1371782 Share on other sites More sharing options...
codefossa Posted August 23, 2012 Share Posted August 23, 2012 Simple way of doin' what I think your goal is. Example: http://xaotique.no-ip.org/tmp/1.php <html> <head> <title>Temp Page</title> <style type="text/css"> #container { width: 500px; } #list li { width: 33%; float: left; } </style> </head> <body> <div id="container"> <ul id="list"> <?php for ($i = 1; $i < 10; $i++) { echo "<li>{$i}</li>\n"; } ?> </ul> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/267459-split-list-dropdown-in-multiple-columns/#findComment-1371787 Share on other sites More sharing options...
Christian F. Posted August 23, 2012 Share Posted August 23, 2012 Thank you, Kira, for helping to keep things simple. That was the exact same solution as I suggested, in case it wasn't clear. It is by far the simplest, most efficient and graceful solution to this issue. Quote Link to comment https://forums.phpfreaks.com/topic/267459-split-list-dropdown-in-multiple-columns/#findComment-1371846 Share on other sites More sharing options...
jazzman1 Posted August 23, 2012 Share Posted August 23, 2012 Thank you, Kira, for helping to keep things simple. That was the exact same solution as I suggested, in case it wasn't clear. It is by far the simplest, most efficient and graceful solution to this issue. Ah...obviously you like simple things By the way, Barand's solution is the best for me and array_chunk() is very helpful when constructing db tables with a known number of columns but an unknown number of values. Quote Link to comment https://forums.phpfreaks.com/topic/267459-split-list-dropdown-in-multiple-columns/#findComment-1371882 Share on other sites More sharing options...
Barand Posted August 23, 2012 Share Posted August 23, 2012 If the items are in order, I find it more natural to read down columns rather than scanning across to find an item. Quote Link to comment https://forums.phpfreaks.com/topic/267459-split-list-dropdown-in-multiple-columns/#findComment-1371888 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.