How to achieve the following with css (background color with background image that overlaps header row):
This is the part of TH cell in the table. TH line would be in color #0098da and at the end of TH cell would be image (the url of images is here http://tax.allfaces.lv/templates/tax/images/pg_arrow.png ).
I have tried to position div with bg image in TH, but I had problems that image should overlap TH borders. And as a result I got the followign:
HTML:
<table id="duration-of-refund" border="0">
<tbody>
<tr>
<th>
<p>Purchases in Webshops</p>
<div class="img-at"> </div>
</th>
<th>
<p>Currency conversion, Refund transfer</p>
<div class="img-arrow"> </div>
</th>
</tr>
<tr>
<td>
<p>Some text here Some text here Some text here Some text here Some text here</p>
</td>
<td>
<p>Some text here Some text here Some text here Some text here Some text here</p>
</td>
</tr>
</tbody>
</table>
CSS:
#duration-of-refund td {
width: 400px;
}
#duration-of-refund th {
font-size: 21px;
color: white;
text-align: left;
height: 84px;
max-height: 84px;
}
#duration-of-refund tr th:nth-child(1) {
background-color: #0098da;
}
#duration-of-refund tr th:nth-child(2) {
background-color: #1F5CA9;
}
#duration-of-refund tr th:nth-child(1) p, #duration-of-refund tr th:nth-child(2) p {
width: 190px;
float: left;
}
.img-at, .img-arrow {
width: 83px;
height: 84px;
float: right;
margin-right: 20px;
position: relative;
top: -20px;
}
.img-arrow {
background-image: url(http://tax.allfaces.lv/templates/tax/images/pg_arrow.png);
}
.img-at {
background-image: url(http://tax.allfaces.lv/templates/tax/images/pg_at.png);
}
#duration-of-refund tr td:nth-child(2) {
background-color: #cceaf8;
}
}
JSfiddle example: http://jsfiddle.net/rAVqx/
I think, that theres should be another way how to do this.
Please, give me some clues how to achieve this? I have also other TH cells with different images to be positioned in the same way.
try this put image class tag in another div and apply styles as
float:right;margin-right:90px
and for image position as absolute
position: absolute;
your code is just modified
HTML
<table id="duration-of-refund" border="0">
<tbody>
<tr>
<th>
<p>Purchases in Webshops</p>
<div style="float:right;margin-right:90px;">
<div class="img-at"> </div>
</div>
</th>
<th>
<p>Currency conversion, Refund transfer</p>
<div style="float:right;margin-right:90px;">
<div class="img-arrow"> </div>
</div>
</th>
</tr>
<tr>
<td>
<p>Some text here Some text here Some text here Some text here Some text here</p>
</td>
<td>
<p>Some text here Some text here Some text here Some text here Some text here</p>
</td>
</tr>
</tbody>
</table>
CSS:
#duration-of-refund td {
width: 400px;
}
#duration-of-refund th {
font-size: 21px;
color: white;
text-align: left;
height: 84px;
max-height: 84px;
}
#duration-of-refund tr th:nth-child(1) {
background-color: #0098da;
}
#duration-of-refund tr th:nth-child(2) {
background-color: #1F5CA9;
}
#duration-of-refund tr th:nth-child(1) p, #duration-of-refund tr th:nth-child(2) p {
width: 190px;
float: left;
}
.img-at, .img-arrow {
width: 83px;
height: 84px;
float: right;
margin-right: 20px;
position: absolute;
top: -20px;
}
.img-arrow {
background-image: url(http://tax.allfaces.lv/templates/tax/images/pg_arrow.png);
}
.img-at {
background-image: url(http://tax.allfaces.lv/templates/tax/images/pg_at.png);
}
#duration-of-refund tr td:nth-child(2) {
background-color: #cceaf8;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.