Photoshop Question posted in
The official user guide can be found here.

Each icon at top of <td> – Photoshop

SOLVED by P. Leger:
In my CSS I simply added/changed the vertical-align to top.
This worked for me

I am developing a simple schedule where the admin can manage users and add users to a specific date.

I want the ‘+’ icon at the top of <td> inside a <table>.
Because if there are 3 people planned in on Monday and there are 2 people planned in on thuesday, the icons will be outlined by each other.

This is how it is right now:
You see the red line is straight if there are an equally number of values in a table

You see the red line is straight if there are an equally number of values in a table

This is how I want it (photoshopped):
enter image description here

The red lines are in all rows straight.
The red lines are just an indication on how I want it to be (because in real they aren’t there of course).

My code right now inside the <td></td>:

echo '<a href="../rooster/add_rooster.php?week='.$weekrow.'&day='.$day.'&daynmb='.$day_numb.'"><img src="../rooster/images/add.png" width="15" align="left" class="imgtable"></a><br/>
</div>';

And the class imgtable:

.imgtable {
    float:top;      
}

I tried every position and float. But I just need something that the image is fixed inside the table.

Currently I am just using a simple image, but I prefer using a font awesome icon.

I hope that you will understand my question.
Thanks for reading

Tags:

2

Answers


  1. 0

    Just position the icon absolutely and make sure the cell (, or whatever the icon’s parent is) is positioned relatively. Then you can position the icon with left/right, and top/bottom. 

    <td style="position relative...">
     <img src="..." style="position: absolute; left: 5px; top: 5px">
</td>

    that should position them all in the same spot relative to their parent (the table cell).

    Example: https://jsfiddle.net/silvertail/cej23cbh/

    Login or Signup to reply.
  2. 0

    There is no float: top.

    float: left | right | none | inherit

    I think, you don’t want the <a ...><img src=... /></a> fixed, but at the top of <td>. Therefore you have to access the <table> id or class. And from there the <td>. And set vertical-align: top.

    HTML

    <table id="myTable">
    <tr>
        <td>box</td>
        ...
    </tr>
    ...
</table>

    CSS

    #myTable td {
    vertical-align: top;
}

    Example

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search