Как создать поле тегов, например mixx & delicious?

Question

Я попытался выполнить поиск в google, но об этом никто не говорил.

я хочу CSS решение создать ликвидный поле тега, как оранжевые в этом:

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

так, даже если это слово долго окно тега будет соответствовать его.

я хочу ту же самую форму

Благодаря

Answer 1

Это метод называется CSS раздвижных дверей. Вы можете найти хорошую статью об этом здесь: http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx

Mixx использует эту технику только с одним изображением. Изображение прикрепляется к тегу <li> и к тегу <a>. Наложение изображений гарантирует, что стрелка столько, сколько потребуется.

Answer 2

Mixx использует упорядоченный список, хотя неупорядоченное один будет делать только штрафом:

<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> 

указан список на самом высоком уровне, так что нет никаких пуль или других графических связанные с элементами списка:

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

Затем установите свои элементы списка так, чтобы они отображались горизонтально (inline). Mixx использовали float: left; но вы можете также использовать 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; 
} 

Вы заметите, что Mixx имеет фона для списка их элементов набора для этого спрайта: alt text http://www.mixx.com/images/layout/tag-bg.gif

Связь внутри каждого элемента списка также использует это же спрайт, но изменяет положение его в CSS (фон: ... -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; 
} 

Это сдвигает т он занимает вертикальное положение спрайта (высота которого составляет 38 пикселей) на 19 пикселей, эффективно показывая стрелку.

Это практически все есть.