CODEWITHSUNDEEP
cssimagecss-float
NeverPhased
NeverPhased

Reputation: 1566

CSS: How to lay an image on top of a table

I have a table of figures and I want to append an image on top of the table on the border edges of the data. However I have no idea how to do this, can someone point me in the right direction?

Below is what I want to achieve:

enter image description here

At the moment I have the table without the round "arrow" and "=" images.

Thanks

Taking the advice below I have implemented this code:

<td>
<img src="images/up.png" alt="increase" height="20" width="20" style="position: relative; left: 47px;"/>&euro;<?php echo $cSalePrice; ?>
</td>

To give the following result:

enter image description here

As you can see the arrow image isn't centred to the blocks and also the text "€65" has been nudged down...

Any ideas?

Ok now trying the commented suggestion it has fixed the "€65" nudge. But still the image isn't vertically centered to the box:

enter image description here

Upvotes: 0

Views: 9775

Answers (4)

driedoezoe
driedoezoe

Reputation: 185

your image should have a position absolute, top and left (or bottom right). The < td> it's in should be position relative.

So, something like: 

<td style="position:relative;">&euro;65<img src="..." style="position:absolute; left:30px; top: 3px;"> </td>

This way, you can position the image relatively to the td it's in.

And you should use classes instead of inline code

Upvotes: 1

etoxin
etoxin

Reputation: 5264

Make the table relative.

Then add four images in te table that are positioned absolutly and positioned to each of their own corners. eg:

table{position:relative}
table img.topright{position:absolute;top:0;right:0;}
table img.bottomleft{position:absolute;bottom:0;left:0;}

etc

Upvotes: 1

Godisemo
Godisemo

Reputation: 1813

Something like this might work. Create an extra column and make the width 0. I am using divs instead of images but it is the same. You could try it here

the css

table {
    margin: 10px;
}

table td {
    border: 1px solid black;
    padding: 10px;
    width: 100px;
}

table td.thin {
    position: relative;
    width: 0;
    padding: 0;
    border: none;
    text-align: center;
}

table td.thin div {
    position: absolute;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    top: 50%;
    left: 50%;
    background: red;
    text-align: center;
    line-height: 20px;
    border-radius: 10px;
}

And the html

<table>
    <tr>
        <td>r1c1</td>
        <td class="thin"><div>×</div></td>
        <td>r1c3</td>
    </tr>
    <tr>
        <td>r2c1</td>
        <td class="thin"><div>×</div></td>
        <td>r2c3</td>
    </tr>
</table>

This should ensure vertical and horizontal centering and would not affect the other cells.

Upvotes: 1

Alexander Pavlov
Alexander Pavlov

Reputation: 32286

One solution is to place the <img src="..."> in the left TD, for example, and give it the following styling to shift it right of its layout position:

position: relative;
left: 16px;

Upvotes: 1

Related Questions