SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    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!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    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&#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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •