Retour Icon auf dem Rand einer Grenze

Question

ich bin neu in CSS und zu versuchen, den folgenden Effekt zu erreichen:

ich mit kurzen Textzeilen in jeder Zelle eine Tabelle haben, möchte ich 1-N kleine Symbole setzen auf der Mitte der Zellen Grenzen.

Eine kleine Skizze, die es helfen könnte, visualisieren:

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

Ich wäre für jede Führung dankbar sein.

Answer 1

Ihre beste Wette wird wahrscheinlich sein, Position zu verwenden: relativ auf der Box, legen Sie die Symbole hinein, und verwenden Sie position: absolute, um sie zu platzieren, ohne dass sie Platz im Inhalt einnehmen. Wie folgt aus:

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

So ähnlich. Die tatsächlichen Abmessungen würden auf der Größe und Platzierung der Symbole selbst basieren, aber dies würde die Arbeit erledigen.

Answer 2

Hier ist ein sehr einfaches Beispiel, wie dies zu erreichen ist. Dies wurde ohne Tests programmiert, daher müssen Sie möglicherweise nach Bedarf anpassen.

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

die CSS Attributposition verwenden: relative für den TD-Stil und die Position: absolute zusammen mit oben, links und rechts Attributen gegebenenfalls auf einem DIV den Inhalt gewickelt wird.

Sie sollten in der Lage sein, den gewünschten Effekt zu erzielen.

Answer 4

, wenn Sie mit absoluter Positionierung gehen wollen dies vielleicht nicht dann tun:

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