Размещение иконки на краю границы

Question

Я новичок в CSS и пытаюсь добиться следующего эффекта:

У меня есть таблица с короткими текстовыми строками в каждой ячейке, я хочу разместить 1-N маленьких значков на середине границ ячеек.

Небольшой эскиз, который может помочь визуализировать его:

http://img200.imageshack.us/img200/6506/sketcha.jpg

Я был бы благодарен за любые указания.

Answer 1

Лучше всего, вероятно, будет использовать положение: относительное на коробке, поместить значки внутри и использовать положение: абсолютное, чтобы разместить их, не занимая места в содержимом. Как это:

HTML:

<div id="wrapper">
  <img id="icon1" src="/path/to/image.png" alt="alt text" />
  <img id="icon2" src="/path/to/image.png" alt="alt text" />
</div>

CSS:

  #wrapper { position:relative; z-index:1; }
  #wrapper img { position:absolute; top:-10px; width:20px; height:20px; z-index:10; }
  #icon1 { right:10px; }
  #icon2 { right:40px; }

Что-то в этом роде. Фактические размеры будут основаны на размере и расположении самих значков, но это позволит выполнить работу.

Answer 2

, если вы не хотите использовать абсолютное позиционирование, возможно, сделайте следующее:

<style type="text/css">
    .box {width:200px; height:200px; border:solid 5px #ccc;}
    .icon1, .icon2 { display:block; width:30px; height:15px; background:black; margin-right:10px; margin-top: -10px; float:left;}
</style>


<div class="box">
    <span class="icon1"></span>
    <span class="icon2"></span>
</div>

Answer 3

Используйте положение атрибута CSS: относительное для стиля TD и положение: абсолютное вместе с верхними, левым и правым атрибутами, в зависимости от ситуации, в DIV, обертывающем содержимое.

Вы должны быть в состоянии достичь желаемого эффекта.

Answer 4

Вот очень простой пример того, как этого добиться. Это было закодировано без какого-либо тестирования, поэтому вам может потребоваться настроить его при необходимости.

<style type="text/css">

    .buttonCell
    {
        position: relative;
    }

    .button1, .button2
    {
        float: right;
        height: 15px; /* or whatever */
        margin-right: 5px;
        width: 15px; /* or whatever */
        top: -8px; /* or whatever */
    }

    .button1
    {
        background: url(path/to/image.ext) no-repeat top left;
    }

    .button2
    {
        background: url(path/to/image.ext) no-repeat top left;
    }

</style>
<table>
<tbody>
    <tr>
        <td class="buttonCell">
            <div class="button1"></div>
            <div class="button2"></div>
            Text text text
        </td>
    </tr>
</tbody>
</table>