How to create a tags box like mixx & delicious?

Question

i tried to search in google but no one talked about this.

i want a css solution to create a liquid tag box like the orange ones in this :

http://www.mixx.com/stories/10402914/haiti_us_gov_t_grants_matching_3_to_1_donations_to_worldvision_for_haiti

so, even if the word is long the tag box will fit it.

i want the same shape

Thanks

Answer 1

This is a css technique called sliding doors. You can find a good article about it here: http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx

Mixx uses this technique with just one image. The image is attached to the <li> tag and to the <a> tag. The overlapping of the images makes sure that the arrow is just as long as it is needed.

Answer 2

Mixx uses an ordered list, although an unordered one will do just fine:

<ol class="tag-list">
    <li><a href="http://www.mixx.com/tags/crisis-assistance" rel="tag" title="crisis assistance">crisis assistance</a></li>
    <li><a href="http://www.mixx.com/tags/earthquake" rel="tag" title="earthquake">earthquake</a></li>
    <li><a href="http://www.mixx.com/tags/haiti" rel="tag" title="haiti">haiti</a></li>
    <li><a href="http://www.mixx.com/tags/haiti" rel="tag" title="haiti">haiti</a></li>
    <li><a href="http://www.mixx.com/tags/world-vision" rel="tag" title="world vision">world vision</a></li>
</ol>

Set your list at the top level so that there are no bullets or other graphics associated with the list items:

ol, ul {
    list-style:none outside none;
}

Next, set your list items so that they display horizontally (inline). Mixx have used float: left; but you might also use display: inline;:

ol.tag-list li {
    background:url("../images/layout/tag-bg.gif") no-repeat scroll 100% 0 transparent;
    float:left;
    margin:0 0.8em 0.8em 0;
    padding:0 1em 0 0;
}

You'll notice that Mixx has the background for their list items set to this sprite:

The link within each list item also uses this same sprite, but changes the position of it in CSS (background: ... -19px...):

ol.tag-list li a {
    background:url("../images/layout/tag-bg.gif") no-repeat scroll 0 -19px transparent;
    color:#955C0F;
    display:block;
    height:1.4em;
    padding:0.15em 0 0.2em 1.2em;
    text-decoration:none;
}

This shifts the vertical position of the sprite (which is 38px high) up 19px, effectively showing the arrow-end.

That's essentially all there is to it.