I have an image which I would like to position near the right margin of my HTML page, and hover over all else on the page. I would also like the image to stay near the right margin when the window is resized. As of now, the image stays in a fixed position within the browser window instead, even appearing outside the page content area when the browser window is extended wide. My page content is centered in the browser window. Below is the code on the image:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<table width="900" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td background="../images/FWA_INV_head.jpg" valign="top" align="center">
<img src="images/bannerX.png" border="0" class="image" style="position:absolute;z-index:90;>
and here is the CSS:
.image {
position:absolute;
opacity:.90;
-moz-opacity:.90;
filter:alpha(opacity=90);
}
Please help me see the error of my ways.
When positioning an absolute element your absolute position is positioned inside of the nearest relative position. So it's absolutely positioned inside the relative position. Also your inline style has no closing "
Related
Problem: especially in Outlook, before the images are loaded the email inserts a square block equal to the width of the image. For my email, I have an image that spans the width of the email, but it's height is only 325px. Instead, it previews a 650px x 650px block. Is there any way to responsively and without Javascript prevent the square block from showing prior to images being loaded?
Code:
<table width="650" height="325" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img src="#" width="100%"/>
</td>
</tr>
</table>
You can give the image the original dimensions as the width and height attributes.
To ensure the image stays responsive you can add the following styles to the image:
<img src="#" width="650" height="325" style="max-width: 100%; height: auto;" />
max-width: 100%; ensures the image does exceed the parent element's width.
height: auto; will scale the height automatically to the width based on the given image dimensions.
Okay so I've bought a theme for mailchimp and need to modify it slightly for my own personal use. The html is written in tables.
What i am aiming for, is the background image in the header of the page (top table), to resize when the browser shrinks down to mobile size.
So far i have been able to achieve the shrinking of the image (through the use of setting width to 100% and not setting a height), although, when the browser is shrunk down to mobile size, the purple body behind the image overflows underneath the image (like this http://i.imgur.com/DfLv29v.png), when do not want to see any background at all. Along with this, on shrinking, I am trying to get the title, text, and read more button to scale down with the image, and have the logo and all top links hidden.
I have tried playing around with max-height and max-width, setting overflow to hidden, and trying to re-do the whole thing using a div container instead of a table, but it got way too complicated. I have no knowledge of javascript or jquery so a html/css solution is preferred.
Here is the code for the main section that i'm trying to shrink -
<table border="0" align="center" width="800" cellpadding="0" cellspacing="0" class="container800">
<tr>
<td align="center" style="background-image: url(http://pickedmail.com/mira/img/main-bg.png); background-size: 100%; background-position: top center; background-repeat: repeat;" background="http://pickedmail.com/mira/img/main-bg.png">
<table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590 bodybg_color">
<tr><td height="30" style="font-size: 30px; line-height: 30px;"> </td></tr>
<tr>
<td>
<table border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td height="5" style="font-size: 5px; line-height: 5px;"> </td></tr>
<tr>
here is the full thing in jsfiddle - https://jsfiddle.net/jackgenesin/2zzkrqzf/
Any help appreciated, feel free to tell me its way too complicated to do purely in html/css haha, thanks
The purple body has nothing to do with the image. That's coming from the bgcolor="8a5a8d"in the first <table> tag in your fiddle. You could eliminate that and the color would go away.
With the code you've posted, you've got explicit pixel widths declared in the first two <table> tags. This tells a browser that these shouldn't be resized. You need to use a relative dimension (e.g. 100%) to make this work. Better still add this css: `style="max-width=800px;" so the table doesn't get too big on desktops.
Since you've got nested tables to make this layout (something that still is required for many email clients), to really stop the header image from spilling over into the message body, you'd have to create two sets of nested tables one after the other. If that's too much work, change the background-size: parameter to cover. That will stretch the image to fill the background, cropping edges if needed to make everything fit.
Finally, to really achieve everything you want, with the auto-hiding logos and shrinking menus, you need to make your template responsive. Take a look at the free mailchimp templates for code you might be able to reuse for this.
And you will have to do all this in HTML/CSS, since you can't rely on an email client allowing javascript.
I'm trying to create an e-mail newsletter in HTML. The layout has a fixed-width (600px) center. If the viewport is larger than 600px in width, there should be some decoration images on the left and the right. These images should be 'glued' to the viewport's edges:
As you can see, when the viewport scales, the fixed-width (blue) content stays centered, but the (red) images on the left and on the right are moving with the viewport's edges.
If the viewport gets too narrow, the (red) images should become fixed such that they don't overlap the (blue) center content.
To accomplish this, I'm using <div>s with auto margins for the (red) images, for example: margin:0 auto 0 0.
This works well, except that on small devices like the iPhone, I want the e-mail client to just show the (blue) centered content:
But the <div>s with the (red) images on the side influence the content width, so the e-mail clients show them too.
How can I achieve this? Using Javascript and/or CSS media queries is not an option, since most e-mail clients strip CSS and JS from the e-mail HTML.
You should use tables.
You'll need 3 tables for that.
First, the good old centering table:
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
Then, another centering table of 3 columns in percents:
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" align="left" valign="middle">YOUR LEFT CONTENT HERE</td>
<td width="70%" align="center"> YOUR MAIN CONTENT TABLE HERE </td>
<td width="15%" align="right" valign="middle">YOUR RIGHT CONTENT HERE</td>
And, in the middle TD of the previous center, you can put your 600px wide main content table.
This might need some styling tweaks with floats and block elements aligns, but the basic structure is there.
*Table 2 is nested in table 1's main TD cell.
For mobile mail clients, just put a class on the two LEFT and RIGHT tds, then have them display:none; in your media query. Since the content will be nested inside those, it will inherit the display none and your 3 columns table will effectively become a single column one.
This is not possible without media queries. There is no way to get the left and right columns to pop or hide on resize. Even if you used a float/align technique, it would just pop the right side only (then center with the left above).
I would suggest a fluid table with a max width div to keep your main content at 600px.
<style>
#media only screen and (min-device-width: 600px) { /* don't over stretch */
.main {
width:600px !important;
}
}
</style>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td width="15%" align="left">left
</td>
<td width="70%" align="center">
<div class="main" style="max-width:600px !important;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
center
</td>
</tr>
</table>
</div>
</td>
<td width="15%" align="right">right
</td>
</tr>
</table>
What about a table where the middle cell has a fixed width and the other two cells have a) either a background image aligned to either side, or b) have an image with overflow:hidden on the cells?
Here's a more minimal solution to what you want to achieve.
For the red elements, you can continue to set their positions with margin: 0 auto 0 0... etc, but include this CSS:
width: 0;
overflow: visible;
z-index: 1;
This way, the red elements won't "clash" with the blue <div> when they "meet".
For the blue <div>, declare a higher z-index:
z-index: 2;
Because the z-index of the blue is higher than the red, the red elements will hide underneath the blue element when they "overlap".
Note: gmail does not yet support z-index (source), but you could look into creating the same effect through default stacking.
Side notes:
It REALLY does not have to get as complex as using tables. Read: Why not use tables for layout in HTML?
I have a problem that seems to only occurs in IE (i'm currently using IE8). Basically, i have web pages that consist of a header, content area and a footer. I am trying to stretch an image to be displayed as a left and right border in the content area. the image is not a solid color, so simply setting a border property would not work. In all browsers but IE, the image stretches just fine.
The site is heavily table based due to the fact that it is written for a CMS known as NetSuite. A lot of the tables and html are created by the CMS and are very difficult and tricky to modify.
You can see the page in action at - web site page
I have tried numerous combinations of height:100% and different positioning values with little help. One of the problems is that the height of the content area is dynamically set.
The code in place now looks like this:
<table border="0" cellpadding="0" cellspacing="0" width="1020" height="100%" align="center">
<tr style="height:100%;">
<!-- left side image -->
<td style="width:9px; height:100%;"><img src="http://www.marware.com/images/body_outer_border.png" border="0" height="100%" width="9" /></td>
<td valign="top" width="400" align="center">
<!-- right side image -->
<td style="width:9px; height:100%;"><img src="http://www.marware.com/images/body_outer_border.png" border="0" height="100%" width="9" /></td>
</tr>
<td style="height:100%; position:relative;">
<img style="position:absolute; top:0px; left:0px; width:100%; height:100%;" border=0 src="http://www.marware.com/images/body_outer_border.png" width="9" height="100%">
</td>
Make the img absoultely positioned at 0,0 with 100% width and height. And relative positioning on the td so the absolute positioning is relative to it. I'm relatively sure that this absolutely works in IE8.
I have the following code:
<textarea>
<td align="center" bgcolor="#996633" onMouseover=javascript:ShowContent("menu7_items") onMouseout=javascript:HideContent("menu7_items")>
<p> Stock Update </p>
<div id="menu7_items" style="display:none;" onMouseover=javascript:ShowContent("menu7_items") onMouseout=javascript:HideContent("menu7_items")>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">Update Paper</td>
</tr>
</table>
</div>
</td>
</textarea>
There is a TD inside which there is a DIV and inside DIV there is a Table. DIV's default style is display:none. On mouseover TD, the div should appear like a popup in a given position. But it is not happening. DIV is appearing in the same TD. How to make DIV's position independent of TD.
position: absolute;
You may also want to specify the direction properties (top, right, bottom, left), but try it without those first to see how it looks. If you use them, you may want to use position: relative on the parent to position the absolute child relative to it (the same works with any position value that isn't "static", the default).