SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
-
Jul 21, 2009, 04:36 #1
- Join Date
- Jul 2009
- Posts
- 1
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
newbie: tag cloud with title in the middle
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!
-
Jul 21, 2009, 05:17 #2
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
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%; 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; }
Bookmarks