newbie: tag cloud with title in the middle

**dspathis** · Jul 21, 2009, 03:36

Hi,

I'm trying to style a tag cloud with a title in the middle. The tag cloud is an unordered list.

The markup would look something like this:

<html>
<body>
<div id="title">My Title</div>
<ul>
<li><a href="...">tag1</a></li>
<li><a href="...">tag2</a></li>
<li><a href="...">tag3</a></li>
<li><a href="...">tag4</a></li>
<li><a href="...">tag5</a></li>
<li><a href="...">tag6</a></li>
</ul>
</body>
</html>

The way I'd like it styled is as follows:

tag1
tag2 tag3
My Title
tag4 tag5
tag6

I can't figure out how to get some of the tags to appear above the title and some below (in other words, I need to somehow push down the title). I'd like to achieve this -- if possible -- with the "clean" markup I indicated above.

Any ideas?

Thanks!

**Raffles** · Jul 21, 2009, 04:17

Well, firstly, if you want "clean" markup, you should use a heading for the title. H2 or H3 probably.

This is going to be difficult if the number of LI elements varies, unless you use JavaScript. Then you could use some mathematics and absolute positioning to put each LI element wherever you want it.

However, if you only need those six, then you could do something like this:

HTML Code:

<h2>My Title</h2>
<ul id="tags">
<li><a href="...">tag1</a></li>
<li><a href="...">tag2</a></li>
<li><a href="...">tag3</a></li>
<li><a href="...">tag4</a></li>
<li><a href="...">tag5</a></li>
<li><a href="...">tag6</a></li>
</ul>

Code css:

* {margin:0; padding:0}
#tags {
  width:300px;
}
li {
  text-align:center
}
li + li {
  width:50&#37;;
  float:left;
}
li:last-child {
  width:auto;
}
li + li + li + li {
  margin-top:4em;
}
#tags li:last-child { /* needs to be more specific */
  width:auto;
  margin-top:0;
  float:none;
}
h2 {
  position:relative;
  top:3.5em;
  text-align:center;
  width:300px;
}

This works OK in Firefox. Obviously depending on your compatibility needs, you would need to use classes to work around certain browsers' lack of support for :last-child and perhaps even the adjacent sibling combinator.

The SitePoint Forums have moved.

User Tag List

Thread: newbie: tag cloud with title in the middle

Thread Tools

Display

newbie: tag cloud with title in the middle

Bookmarks

Bookmarks

Posting Permissions