I am trying to align an image to the left, and then put text directly next to it for an email. The basic html isn't working, I am seeking help from a table guru that can show me how to simply put an image on the left and have text on the right that would work in email templates. Any help would be greatly appreciated.
Without knowing more for your design I don't know if there's a better way to do this than in tables.
But as you asked for tables:
<table>
<tr>
<td>
<img src="http://your.image.here"/>
</td>
<td>
Your text goes here
</td>
</tr>
</table>
That will give you a one row table, with two cells in the row. On the cell on the left will be an image, on the right will be the text.
Related
I have a new challenge, which I haven't seen posted or answered here....
I have an image that needs to appear in the top-right corner of an email in Outlook, but that image is treated like a background image - the main content of the email is floated over it. The image file is NOT the width of the email. It's about 15% of the width of the email and perhaps 20% the height.
The email body must be 640px wide, height is variable. The image is 203px wide and 432px tall.
I'm using VML to display the background image in Outlook. The image is set to be the background image of a <td> tag, and that tag contains a number of additional tables that provide the email body (hence the variable height). The image should appear only once at the top right of the td.
Would coordorigin and coordposition be a valid approach to keep the image to a single location, or would it negatively impact the td containing the rest of the email body?
Any help would be appreciated.
Below is the bare minimum you need to achieve what you are asking for:
<!-- main containing table -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<!-- main body table -->
<table class="w320" width="640" cellpadding="0" cellspacing="0" border="0" style="position:relative;">
<tr>
<td style="position:relative;>
<!--[if gte mso 9]-->
<v:image src="...yourimagehere.jpg" style="width:203px;height:432px;position:absolute;top:0;right:0;z-index:-1;" />
<![endif]-->
Your email here
Bear in mind that using a negative z-index on VML objects when using a background colour on the body of your email will result in the VML object displaying behind the bgcolor
VML allows a lot more styles than your typical HMTL rendered in the word processor, take full advantage where you can.
I can't actually remember if "right" works for position in Outlook. if not just use left:397px; instead.
Hope this helps
You can not click a button unless you edit at least one field, and button will be disabled. once you edit any field the button 'reset' will be enabled to click.
You can solve this in a number of ways.
Probably one of the more useful ways (If you are using this fact more than once), is to save the "status" of the button to a variable.
Below are two separate examples of how you could code this.
The first example will take a variable called isSelected, and assign it either a value of "block" or "none" dependent on how the selector is displaying.
The second example will look at the radio button and see whether it is present in the "On" state or not.
This first one uses the jQuery addon
<tr>
<td>storeEval</td>
<td>jQuery('div.search-date-container div.modal').css('display')</td>
<td>isSelected</td>
</tr>
<tr>
<td>gotoIf</td>
<td>storedVars['isSelected']=='block'</td>
<td>skipToDatepicker</td>
</tr>
This second one doesn't
<tr>
<td>storeElementPresent</td>
<td>id=edw_paynow</td>
<td>edwPresent</td>
</tr>
<tr>
<td>echo</td>
<td>${edwPresent}</td>
<td></td>
</tr>
<tr>
<td>gotoIf</td>
<td>${edwPresent}==false</td>
<td>skipEDW</td>
</tr>
You may need to adapt the code slightly - but I don't know what buttons you are using. If you provide a bit more info and an upvote I'm sure I could try figure it out :)
I've built a custom mailchimp template and added repeatable and hideable sections so my client can edit it more easily. I have read all the documentation, my code validates, and the email itself functions great, except for one problem. Here's the gist of my layout - and ideally how I would like it to work (all extraneous code removed - but I can supply it separately if needed).
<table mc:repeatable>
<tr>
<td><img src="" alt="article image"></td>
</tr>
<tr>
<td>
<h2 mc:edit="article_title" mc:hideable>Optional Title</h2>
<div mc:edit="article_body" mc:hideable>Optional content</div>
</td>
</tr>
<tr>
<td>
<div mc:edit="article_button" mc:hideable>Optional Styled Button</div>
</td>
</tr>
</table>
When I go into the campaign editor, I can hide sections successfully. UNTIL I duplicate the block. Once I have 2 blocks, and I hide the 1st block's h2, it hides the following div. If I hide the div, it hides the button. Note: within campaign editor it appears to hide things properly. Only when I preview the email can I see that it's hiding the wrong sections.
I have tried every variation I can think of:
Nesting tables for each piece of hideable content
Separating the edit and hideaable tags to parent/child elements
Renaming all the mc:edit attributes
Moving mc:repeatable to the tr or nested tables instead
Removing mc:hideable completely, except for the button (So they would delete copy rather than hiding the whole section.)
Item 5 above resulted in a completely different problem. When I duplicated the block and hid the button on the replicated block, it hid the button in the FIRST section. It's like the names are getting crossed somehow.
There's gotta be something I'm missing. Mailchimp's documentation seems really straightforward and I haven't been able to find anything about this specific issue.
Thanks in advance!
As a workaround instead of creating mc:hideable elements inside the mc:repeatable block I've created multiple variants using mc:variant, and each variant has different items inside it.
So in your example your varients would be:
Block
Block with title
Block with content
Block with button
Block with title and content
Block with title and button
Block with title and content and button
Block with content and button
This is not quite as neat as a solution but it does work.
See here for mc:variant syntax.
Im stuck on something and although there is 1000 different ways to select what I need, I cant get it going.
In the HTML below, the <tr class="hide"> is hidden, and when someone clicks the link in the span, I want it to slidedown.
I've tried
$(this).parent().next().slideToggle('slow');
and a bunch of other similar things, but no love. It seems because the hidden tr element is down 2 levels I cant select it.
Mind you, there will be multiple of these on a page, it needs to be the next one in line that slides down, so I cant just $('.hide') select it.
Can someone help?
Heres my HTML
<td>
<span class="details">Details</span>
</td>
</tr>
<tr class="hide">
<td></td>
Try to
$(this).closest('tr').next().slideToggle('slow');
Assuming that the code you wrote is being triggered when a user clicks the span, then your code is not going high enough up the DOM to get to the next TR. What you need is this:
$(this).parent().parent().next().slideToggle('slow');
The first parent() gets you to the <td>, and the second one gets you to the <tr>.
I am trying to get all the articles that I have included to appear on the front page. I have published all of them and also enabled the Front Page column for each of them . But the problem is that one of the articles (say 'main article') occupy the entire width and the others appear side by side. I want of all them to appear taking up the entire width.
<table>
<tr><td>Main article</td></tr>
<tr><td>Sub Article1</td>
<td>Sub Article2</td>
</tr>
<tr><td>Sub Article3</td>
<td>Sub Article4</td>
</tr>
</table>
but i need them to appear as
<table>
<tr><td>Main article</td></tr>
<tr><td>Sub Article1</td></tr>
<tr><td>Sub Article2</td></tr>
<tr><td>Sub Article3</td></tr>
<tr><td>Sub Article4</td></tr>
</table>
is this question relevant and able to be understood...
Please help me out..
You need to setup this in the Menu section. Go to Menu → [Menu where your Front Page assigned]
Than choose menu thread, that response to your Front Page and in it's setup set number of columns to 1 or 0. Thats may help.