Garrick Cheung » PHP http://www.garrickcheung.com Sharing what I know and learn about CSS, MooTools, Javascript, PHP and etc. Wed, 28 Apr 2010 02:52:47 +0000 en hourly 1 http://wordpress.org/?v=abc Two columns with unordered lists http://www.garrickcheung.com/css/two-columns-with-unordered-lists/ http://www.garrickcheung.com/css/two-columns-with-unordered-lists/#comments Fri, 17 Oct 2008 11:19:54 +0000 Garrick http://www.garrickcheung.com/?p=48 David Walsh recently posted “Get WordPress Post Categories“, where he talked about using the wordpress get_categories() function to create a two column list of his categories in his theme.

I offer a slightly different approach using an unordered list. Here’s the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?php
    /* BUILD THE CATEGORY LIST */  
    $categories = get_categories(array('type' => 'post','child_of' => 0,'orderby' => 'name','order' => 'ASC','hide_empty' => true));  
    $category_count = 0; $category_col = 1;  
 
    foreach($categories as $catty)   
    {  
        $category_count++;  
        ${'category_list_'.$category_col}[] = array('name'=>$catty->cat_name,'url'=>$catty->category_nicename);  
        if(floor($category_count) == (count($categories) / 2)) { $category_col = 2; }  
    }
 
    //merge the two lists -Garrick
    $category_list = array_merge($category_list_1, $category_list_2);
?>
 
<div class="list_wrap">
    <ul class="category_list">
        <?php foreach($category_list as $category){ ?>
        <li><?php echo '<a href="/sugar/',$item['url'],'">',$item['name'],'</a>'; ?></li>
        <?php } ?>
    </ul>
</div>

Notice that the difference is the array_merge() and unordered list.

Now, it wouldn’t be complete with CSS, which would be something like the following:

1
2
3

.list_wrap {overflow:hidden; margin-left:-10px;}
.category_list {float:left; list-style:none; margin:0; padding:0; width:100%;}
.category_list li {border-bottom:1px solid #000; display:inline; float:left; margin:5px 0 5px 10px; padding:3px 0; width:195px;}

The .list_wrap style is a container so we can do a negative margin to shift things over. The ul and li both float left so that it won’t have extra spacing that IE6 automatically adds. The li has a display:inline because it fixes the 3-pixel-bug in IE6 when an element is floated and has margin-left/right. Lastly, we have to adjust the li’s width accordingly.

When doing the math, you’ll notice that the li’s width and margin-left x 2 columns = 410px. Now remember that .list_wrap has a margin-left:-10px so it fixes the additional 10px from the li’s.

Check out the example page to get a better idea. The category list is contained in a box with borders to help you see it better.

I think using an unordered list makes semantic sense because, after all, you’re listing links.

]]> http://www.garrickcheung.com/css/two-columns-with-unordered-lists/feed/ 5