CODEWITHSUNDEEP
htmlcsshtml-tablehtml-email
Joris Mathijssen
Joris Mathijssen

Reputation: 669

Image layed over a table - HTML mail

I'm looking for a possible way to get a image overlay some tables. I tried Z-positioning but it didn't. Maybe I didn't do it right. I hope someone can give me some tips to get me in the right direction.

Reminder: I can't use div, because its a HTML mail.

CodeSample:

<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="left" bgcolor="ffffff" width="69%" class="bodycopy shadow" style="padding: 10px;">
            <p class="h1">Lorem Titel            </p>
            <p class="h2">Lorem subtitle
            </p>
            <p class="bodycopy">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum eleifend purus, eu lobortis odio viverra ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas non lobortis purus, et convallis dolor. In euismod felis sed ex consequat, non suscipit magna laoreet. Etiam non libero consequat erat interdum sollicitudin nec ut est. Nam quis nisl mi. Nulla lobortis justo nulla, ac vestibulum mauris dictum nec.
                <br />
                <br />Lorem ipsum.
                <br />dolar sit amet
            </p>
            <a href="#" </a>
        </td>
        <td width="2%">
            <img style="top: 0; z-index: 2; border: 1px solid #f00;" src="Fotos/icon-vb.gif">
        </td>
        <td align="right" class="shadow" width="29%">
            <img class="fix" src="ipod.gif" width="100%" border="0" alt="" />
        </td>
    </tr>
</table>

Upvotes: 0

Views: 170

Answers (1)

Richa
Richa

Reputation: 3289

Make following changes in html and CSS. Add z-index: 999;position:absolute; to small image and position:relative; to other

FIDDLE DEMO

HTML

 <img class='smallimg' src="Fotos/icon-vb.gif">

CSS

  .smallimg {
    z-index: 999;
    position:absolute;
    border: 1px solid #f00
}
.fix {
    position:relative;
}

Upvotes: 1

Related Questions