I have a table that is split into 3. My problem is I have content on the left side and pic on the right side. When I open the page the pic is starting in the middle of the page I need the pic to be displayed at the top of the page. How can I do that?
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td >
<table> Lots of Content </table>
</td>
<td width ="10%">
<table> Empty table (that gives space between left content and right image </table>
</td>
<td width = "20%">
<table width="100%">
<tr>
<td> <Asp:Image Runat="server" Id="Image" align="top"> </td>
</tr>
</table> </td>
</tr>
</table>
If you really want / need to keep the existing structure and look for a quick and dirty fix, then set the position of the Image to absolute and with top and left position it exactly where you want.
Use this page to figure out what kind of positioning you want (not sure from post) http://www.w3schools.com/css/css_positioning.asp
And then embed the code like this:
<head>
<style type="text/css">
img
{
[Style properties you pic]
}
</style>
</head>
Or consult css_howto and use a proper CSS file for you entire page layout (no more tables)
that's easy... here's the hack... add a class to the td
.positionhack {position:relative}
then on the image
.positionTop {
position:absolute;
top:0;
}
Related
I've created a mailer view in rails, which displays great on all clients except outlook. The limiting factor is the lack of the 'position' attribute.
I'm trying to place an image on top of a table row, so that the top and bottom edges sit above/below the row. I've achieved this for other email clients, by putting the image in another row above this, making the position absolute, and giving it a negative top margin. I can then bring the image down and overlap the bottom row as much as I like by adjusting the top margin value. (See Code)
<tr>
<td>
<%= image_tag(attachments['logo.png'].url, style:"text-
align:left;height:100px; width:100px; margin:-30px 10px 10px 10px;
position: absolute") %>
</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 125px;">
Some Text
</td>
</tr>
position: absolute does not work in outlook, what would be a good alternative to help me achieve this?
Thanks!
You won't be able to achieve this in the same way as position:absolute.
Your alternatives are:
Split the image up into three and have each slice in each of the three sections.
Make the three row sections into a background image and place the image in as normal.
I understand neither of these are ideal but you're limited with Outlook and the usual margin and position tricks won't work.
With the options I've suggested, rather than restructuring your code, you could simply add a new block just for Outlook, using Outlook specific conditional statements:
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>Outlook content</td>
</tr>
</table>
<![endif]-->
<!--[if !mso]><!-- -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>All other clients</td>
</tr>
</table>
<!--<![endif]-->
Currently trying to align an image to the bottom of it's table. At present it reverts to the top naturally. I've tried everything but the image still sits to the top of the table.
</table>
<td class="logo-label">
<table>
<img src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" height="36" width="113">
</td>
</table>
I know it will be something simple but at the moment I cannot get my head around why the image isn't moving.
First of all, the HTML structure is completely wrong. <td> and </td> are table cells, so they lie between <tr> and </tr> (table rows). <tr> and </tr> lie in between <table> and </table> (the table itself). The structure of a table is shown below:
<table>
<tr>
<td>Cell contents here</td>
</tr>
</table>
You can have as many <tr>s and <td>s as you wish.
A table by default has no width. Put in another way, its width is set to auto, i.e. it takes the width of its contents. Set the width and height attributes to avoid this. A table also has no borders by default. Set border="1" to make the borders visible.
To align an image to the bottom of its parent element (<td> in this case), one way to do it is to set position:relative for the parent element and set position:absolute for the child element. Then, set bottom:0 for the child element. The image will then be aligned to the bottom of the element. The snippet below sums up the whole process.
<table border="1" width="500" height="300">
<tr>
<td style="position: relative">
<img style="position:absolute; bottom:0" src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" alt="Natural Complexions" height="36" width="113">
</td>
</tr>
</table>
There may also be some rules in your logo-label CSS rule, which we don't know about.
First of all, that is a real mess you have. Secondly, you need to look at your CSS file and look up what "logo-label" is doing. That is controlling the alignment of the image.
<table>
<tr>
<td class="logo-label">
<img src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" alt="Natural Complexions" height="36" width="113">
</td>
</tr>
</table>
I'm developing an email and would like an image to show up only on a mobile device.... So I created an empty <td> with a span inside, and styled the span to have a background image.
The problem is, I'd like the image to take up a whole row, instead of being right next to the headline. I tried clear:both and display:block but I'm not sure why it's not working. I also tried setting the width to 100% but that just throws everything off... any suggestions?
http://jsfiddle.net/pEDSn/
.test {
width: 41px;
height: 41px;
background-image: url('http://placehold.it/41x41');
background-repeat: no-repeat;
background-size: 41px 41px;
display: block;
clear: both !important;
}
because of the arrangement of 3 in your single row, the table layout is enforced over the and css.
I would suggest moving your h1 into a separate row.
<tr>
<td> <!-- first td you are using as a spacer --> </td>
<td> <span><!-- this is where your image is --></span> </td>
<td> <!-- last column is here --> </td>
</tr>
<tr>
<td colspan="3"><h1><!-- place your heading text here --></h1></td>
</tr>
I added an empty row with the class "test" and it worked... check it out:
<table id="headline_body_copy_top" width="532" border="0" cellspacing="0" cellpadding="0">
<td align="left" valign="top">
<h1 style="padding:0; margin:0;"><font size="5"><span class="headline_text">Ficaborio vellandebis arum inus es ema gimus, quibus vent.</span></font></h1>
</td>
</tr>
<tr>
<td height="25" class="marginResize">
<!-- spacer -->
</td>
</tr>
http://jsfiddle.net/pEDSn/2/
Using a background-image in this technique is not supported across major email clients. You should inline the tag for all the clients that do not support css in the style tag. Also, background-image does not work in Outlook, unless it is in the <body> tag.
If you want it to show the image only on mobile, you'd be better off using a normal image tag and hiding it with display:none;, then in a media query, overriding to display:block;. This would still not work for the inline-only clients like Gmail, but it is the better way to do it.
I am coding a html email, the problem is that I have a black border around my table, when I slcide psd make it no image and set background color like this
<td width="640" height="2" colspan="16" style="background-color:#666666;">
left and right <td> look ok in html and the email client, but the upper and bottom one are bit expanded, see attached image for this
This is in my laptop upper <td>
and this is how it looks in emails
code is simple as
<td width="640" height="2" colspan="16" style="background-color:#666666;">
</td>
What's the problem with it? Please help ..!
Outlook expands all table cells to a minimum of 19px high. This is something you'll need to work around in html email design. One method is to create a 20px high image that has your 2px border across the bottom.
Add this to your CSS and see how it works:
body
{
margin: 0;
padding: 0;
}
try adding
style="border-collapse:collapse;"
to your
<table>
like this
<table style="border-collapse:collapse;">
Your table has borders, as is the standard. This is my snippet for all of my tables' structure-
<table border="0" cellpadding="0" cellspacing="0" width="640" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="left">
</td>
</tr>
</table>
Is there a spacer gif in your TD ?
If yes, the trick is simple :
<img src="SPACER" border="0" style="display:block;" height="x" width="y" alt="" />
This will collapse the white space around your images. Make sure you set the same height to your td and img also.
I think you might need to add some position property
Try position: absolute
I have normal table, nothing special about it, here it is:
live example : http://jsfiddle.net/fFENK/1/
<table width="100%" border="1">
<tr>
<td rowspan="2">January</td>
<td colspan="2">$10s0</td>
</tr>
<tr>
<td>$100 <br/>$100 <br/>$100 <br/> </td>
<td>$540</td>
</tr>
</table>
The problem here is the text that got automatically centered along, as you can see in the live example I gave before, the text "January" is in the middle of the cell and not at the top of the cell like it suppose to be. How do i fix it?
Set the vertical-align property of the cell.
Add some css to your code:
td {
vertical-align:top;
}
Add valign attribute to <td> node:
<td rowspan="2" valign="top">January</td>
You should apply this css to make it get to the top
td { vertical-align: top }