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 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. 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;?> 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 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. 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 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> 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"; } 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 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> 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. 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. 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. 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
Archived
This topic is now archived and is closed to further replies.