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>
Related
I'm trying to do something that should be fairly simple. I have a column of text in a table that has values from 1 to 18. I want the cell that has the text to align center. However, sometimes, the same cell needs to display an asterisk (*). When the asterisk is displayed, it should be aligned left in the same cell, while keeping the numbers themselves perfectly aligned.
I can't quite get it to align the right way
<table border=1>
<tr>
<td style="text-align:center" width=50>
<div>
<div style="float:left;">*</div>
<div>14</div>
</div>
</td>
</tr>
<tr>
<td align=center>
<div></div>
<div>16</div>
</td>
</tr>
</table>
Just give position: absolute to the div with asterisk, and your numbers will be always centered properly:
<table border=1>
<tr>
<td style="text-align:center" width=50>
<div>
<div style="position: absolute;">*</div>
<div>14</div>
</div>
</td>
</tr>
<tr>
<td align=center>
<div></div>
<div>16</div>
</td>
</tr>
</table>
In this case position: absolute tells: "Don't consider absolutely positioned div's dimensions". If you will inspect the div with number, you will see, that it takes the full width and height of parent element, like the div with asterisk is not in DOM.
May be my explanation is a little poor and not 100% correctly, but it should give you the basic understanding. For more info look through "position: absolute" area in this site or somewhere else: https://www.w3schools.com/css/css_positioning.asp
I am using the trick of assigning a small width to a table cell for it to wrap its content so the following works fine (I want the second and third cell to be assigned their width automatically according to their content):
<table style="width:100%;">
<tr>
<td style="width:1px;">11111111</td>
<td>1111111111111111</td>
<td>11111111</td>
<td style="width:1px;">11111111</td>
</tr>
</table>
But in my project, I am going to animate the width of the cell content to zero so I want the cell to be also of "0" width because I have a hover styling on the cell and even 1 px will trigger this styling when the mouse hovers over it. But assigning the cells 0 width instead of 1px is totally ignored.
One solution I thought of was binding the hover styling to the div inside the td. But is there a way to make the cell width really "0"?
try to use table-layout:fixed and width:0px on the td
<table style="width:100%;table-layout: fixed;">
<tr>
<td style="width: 0px;"> </td>
<td>1111111111111111</td>
<td>11111111</td>
<td style="width: 0px;"></td>
</tr>
</table>
The structure of my table is
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="404">
<img src="assets/Hero-Image2.png" width="404" height="192" style="width:404px;height:192px;border:0;margin:0;outline:0;"/>
</td>
<td width="396" bgcolor="#00188F">
<h1 style="color:#FFF;font-family:Segoe,Tahoma,Verdana,Arial,sans-serif;font-size:16pt;font-weight:100; margin-bottom:10px;">Simpilfied IT management for any enterprise</h1>
<h2 style="color:#FFF;font-family:Segoe,Tahoma,Verdana,Arial,sans-serif;font-size:14pt;font-weight:100;">Gain control over any hybrid cloud with our cost-effective all-in-one cloud solution</h2>
</td>
</tr>
</table>
aand I want the image inside the first cell to have the same height as the second cell (so that the image blends into the background color of it. I know there are alternative ways of doing this, but I'm constrained since this is an HTML email for Outlook).
Right now the right cell is always having a height of 196px, even if I strip its contents to nothing:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="404">
<img src="assets/Hero-Image2.png" width="404" height="192" style="width:404px;height:192px;border:0;margin:0;outline:0;"/>
</td>
<td width="396" bgcolor="#00188F">
</td>
</tr>
</table>
The right cell is always 196px and this causes the left cell to be the same height. Makes no sense.
If you add a display: block to the style of your image it will be fixed.
<img src="//placehold.it/404x192" style="width:404px; height:192px; display: block" />
The first answer should help you to understand why
EDIT: Actually, you dont need nothing but the display block and the image sizes.
What are the dimensions of your image?
I don't think HTML is "smart" enough to stretch your image to fit to your exact request.
Maybe you should try resizing your image in paint/photoshop to a dimension that has the same height/width ratio as 404:192 and see if that helps.
Is there an alternative to negative positioning in HTML emails? The image in the second table below is positioned 100px up using negative positioning. I need that image to overlap somewhat with the content above.
<table>
<tr>
<td valign="top" width="400" style="padding-right:10px;">
<p style="color:#575757;font-size:13px;line-height:19px;font-weight:normal;font-family:'Century Gothic'; text-align:justify;">Lorem Impsum</p>
</td>
<td><img src="kneeler.jpg" /></td>
</tr>
</table>
<table>
<tr>
<td style="position:relative; top:-100px;"><img src="shoes.jpg" /></td>
<td valign="top" width="400" style="padding-left:10px;">
<p style="color:#575757;font-size:13px;line-height:19px;font-weight:normal;font-family:'Century Gothic'; text-align:justify;">Lorem ipsum</p>
</td>
</tr>
</table>
I've tried padding-top: -100px; but that did not work. Please help!
You can do this by wrapping the element above in a div and setting the height of the wrapper to be less than the actual height of the element. (for example, height:200px if the element is naturally 300px and you want 100px of overlap) The element will overflow the wrapper, but the next element will start where the wrapper ends.
See answer here:How to position an element on top of another element without using position and margin?
And the example:
https://jsfiddle.net/acq3ob6y/1/
Negative values are mostly unsupported in html email. So is CSS position. For webmail at least, this is so that your email doesn't render outside of the desired window. Imagine Gmail with your CSS or email affecting the interface - they've limited the CSS you can use specifically to prevent this.
The only way to accomplish an image overlapping the container is to fake it. See this similar question for an example
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;
}