Placing an Icon on the edge of a border

Question

Hello,

I am new to CSS and trying to achieve the following effect:

I have a table with short text lines in each cell, I want to be able to put 1-N small icons on the middle of the cells borders.

A small sketch that might help visualise it:

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

I would be thankfull for any guidance.

Regards,

Amit

Answer 1

Here is a very basic example of how to accomplish this. This was coded up without any testing, so you may need to adjust as needed.

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

Answer 2

Use the CSS attribute position:relative for the TD style and position:absolute along with top, left and right attributes as appropriate on a DIV wrapping the contents.

You should be able to achieve the desired effect.

Answer 3

Your best bet will probably be to use positon:relative on the box, put the icons inside, and use position:absolute to place them without them taking up space in the content. Like this:

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

Something like that. The actual dimensions would be based on the size and placement of the icons themselves, but this would get the job done.

Answer 4

if you don't want to go with absolute positioning then maybe do this:

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