Help Building UL

HTML & CSS
1

I am trying to build a UL but am very rusty on my CSS! I attached a sample of what i would like it to look like. Note that the length should adjust and should drop to a second line (like the last item on the list) if the item is too long for the div. I think this is fairly simple, but how would I build in the box boxes that show the count?

In is WordPress, so the code to gerate the list is

<?php wp_tag_cloud('smallest=8&largest=8&number=10&orderby=count&order=DESC'); ?>

I can use a separator element between tags and get the count with ‘topic_count_text_callback’ => default_topic_count_text

How would I style this to match the attachment?

Help is appreciated!

Thanks,

Jon

2

Hi,

There are probably loads of ways to do this but something like this should work.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul.sport {
    list-style:none;
    margin:0;
    padding:0;
    width:190px;
}
.sport li {
    float:left;
    width:190px;
    margin:0 0 3px;
}
.sport li a {
    float:left;
    background:blue;
    padding:5px 10px;
    color:#fff;
    text-decoration:none;
    margin:0 30px 0 0;
    position:relative;
    display:inline;
}
.sport li span {
    position:absolute;
    top:0;
    right:-29px;
    background:#000;
    width:28px;
    text-align:center;
    color:#fff;
    padding:5px 0;
}
</style>
</head>
<body>
<ul class="sport">
    <li><a href="#">New Your Yankees<span>20</span></a></li>
    <li><a href="#">New Your Knicks<span>9</span></a></li>
    <li><a href="#">Los Angeles Lakers<span>9</span></a></li>
    <li><a href="#">Notre Dame Fighting Irish<span>2</span></a></li>
</ul>
</body>
</html>

It’ll be 1px out in IE6 though at odd sizes.

3

Here’s a method that should also work in IE6.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul.sport {
    list-style:none;
    margin:0;
    padding:0;
    width:190px;
}
.sport li {
    float:left;
    width:190px;
    margin:0 0 3px;
}
.sport li a {
    float:left;
    background:blue;
    padding:5px 10px;
    color:#fff;
    text-decoration:none;
    margin:0 30px 0 0;
    position:relative;
    display:inline;
}
.sport li span {
    float:left;
    margin:0 0 0 -29px;
    background:#000;
    width:28px;
    text-align:center;
    color:#fff;
    padding:5px 0;
    position:relative;
}
</style>
</head>
<body>
<ul class="sport">
    <li><a href="#">New Your Yankees</a><span>20</span></li>
    <li><a href="#">New Your Knicks</a><span>9</span></li>
    <li><a href="#">Los Angeles Lakers</a><span>9</span></li>
    <li><a href="#">Notre Dame Fighting Irish</a><span>2</span></li>
</ul>
</body>
</html>
4

Thanks so much Paul! I’ll give it a shot tonight!

5

So I thought I had it, but now I’m running into some issues with the <span> can you please look at AthletesWhoTweet - Find NBA, NFL, MLB, NHL and other professional athletes on Twitter! and let me know what the issue might be?

Here is the HTML I am using…

<ul class="teams">
<?php 
//list all tags that are assigned to posts 
  $taxonomy = 'post_tag'; 
  $terms = get_terms( $taxonomy, 'orderby=count&order=DESC&number=10' ); 
  if ($terms) { 
    foreach($terms as $term) { 
      if ($term->count > 0) { 
 echo '<li>' . '<a href="' . esc_attr(get_term_link($term, $taxonomy)) . '" title="' . sprintf( __( "View %s players on Twitter" ), $term->name ) . '">' . $term->name.'</a><span>' . $term->count . '</span></li>'; 
      } 
    } 
  } 
?>
</ul>

Thanks!

6

I edited the “.teams li span” CSS, adding “float: left;”, changing to “position: relative;” and removed “right: 29px;”. In Firefox 4 it now looks like this: https://skitch.com/nintera/r38ee/athleteswhotweet-find-nba-nfl-mlb-nhl-and-other-professional-athletes-on-twitter

7

Sorry, for not replying but I’ve been away on holiday for a week or so. Hope you got sorted anyway :slight_smile: