I've added a Wordpress "contact us" page to my web site. But i couldnt align the content normally. I added a contact form and a google maps iframe. But i cant shown them at the same level together. The page's sidebar is hidden and I dont need it. How can this problem be solved?
http://www.mersinhatayrestaurant.com/?page_id=10
I also try using tables
<table>
<tr>
<td>[si-contact-form form='1']</td>
<td>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=tr&geocode=&q=Hatay+Restaurant,+Yeni%C5%9Fehir,+Adnan+Menderes+Bulvar%C4%B1,+Mersin,+T%C3%BCrkiye&aq=0&sll=36.804204,34.638567&sspn=0.194075,0.528374&g=mersin&ie=UTF8&hq=Hatay+Restaurant,&hnear=Adnan+Menderes+Blv,+Mersin%2FYeni%C5%9Fehir,+T%C3%BCrkiye&ll=36.778016,34.586682&spn=0.006295,0.011489&output=embed"></iframe>
</td>
</tr>
</table>
But nothing changed. I am waiting for your solutions. Thank you.
try a float:left on both the iframe and div for the contact form without the table. or add a vertical-align: top; to the TD with the contact form. you have statically assigned height and width to iframe, and if that is taller than the contact form, then it will fill the entire TD cell and the contact form will move to the bottom as the default behavior for TD is vertical-align: bottom;
EDIT:
Added the vertical align dynamically to your site and it worked, just add it in below.
<table>
<tr>
<td style="vertical-align:top;">[si-contact-form form='1']</td>
<td>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=tr&geocode=&q=Hatay+Restaurant,+Yeni%C5%9Fehir,+Adnan+Menderes+Bulvar%C4%B1,+Mersin,+T%C3%BCrkiye&aq=0&sll=36.804204,34.638567&sspn=0.194075,0.528374&g=mersin&ie=UTF8&hq=Hatay+Restaurant,&hnear=Adnan+Menderes+Blv,+Mersin%2FYeni%C5%9Fehir,+T%C3%BCrkiye&ll=36.778016,34.586682&spn=0.006295,0.011489&output=embed"></iframe>
</td>
</tr>
</table>
Related
I am working with some HTML/CSS and VML code to make a button render consistently in most email clients. As outlook doesn't support rounded corners I'm having to add some VML code to achieve this effect. I managed to fix most of the alignment issues but I can't figure out where the spacing at the top/bottom on the button is coming from and how to get rid of it?
I was able to use some VML code from this bulletproof email button generator and Microsoft's reference site
The reason why I'm not using the bulletproof generator is because the people responsible for adding content to emails are not technical and as such I'm trying to minimise issues by exposing them to code as little as possible. Also I understand clicks on VML buttons might not track on some Outlook clients.
Also a similar question can be found here but the solution provided there didn't work in my case or I might have overlooked something?
Below is the code I'm working with. Please note the VML button background colour has been set to green and the table that's meant to be the button is blue. I did this as it was easier for me to troubleshoot.
So far I managed to identify the strange padding around the text itself is coming from the inline css on the a tag but I can't figure our where those random lines of space at the top and bottom of the VML button are coming from.
<!-- button -->
<div align="center" class="float-center" >
<!--[if mso]>
<v:roundrect
xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" arcsize="100%" fillcolor="green" style="width:250px; height:70px;mso-fit-shape-to-text:True;"
<v:stroke color="#1e6db1"/>
<center>
<![endif]-->
<table class="button rounded cta-main float-center" style="Margin:16px 0 16px 0;border-collapse:collapse;border-spacing:0;float:none;margin:16px 0 16px 0;padding:0;text-align:center;vertical-align:top;width:auto">
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:none;-webkit-hyphens:none;Margin:0;border-collapse:collapse!important;color:#1f2935;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:none;line-height:1.5;margin:0;padding:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word" valign="middle">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:center;vertical-align:top;width:100%" valign="top">
<tr style="padding:0;text-align:left;vertical-align:top;">
<td style="-moz-hyphens:none;-webkit-hyphens:none;Margin:0;background:#1e6db1;border:none;border-collapse:collapse!important;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px;color:#fefefe;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:none;line-height:1.5;margin:0;padding:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word" valign="top">
<a href="https://click.email.ucas.com/?qs=6c9084e0730ba4dc1922768cfa83b05115461a1febe2fb9df4b046be8ebdbf014229f45cf8558f65a28e9fcdb54ced5d6a5fa122aee33ef8" style="Margin:0;border:0 solid #1e6db1;border-radius:50px;color:#fefefe;display:inline-block;padding:24px 32px 24px 32px;font-family:Helvetica,Arial,sans-serif;font-size:18px;font-weight:700;mso-line-height-rule:exactly;line-height:1.5;margin:0;text-align:left;text-decoration:none;">
<span style="color:#fefefe;">
Finance ›
</span>
</a>
</td></tr></table></td></tr></table>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
<!-- end button -->
VML stuff in general adds a lot to your file size unnecessarily.
I use this for my button code and it works on all the major litmus clients:
<table class="button" border="0" cellpadding="0" cellspacing="0" style="background-color:#212121; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; overflow:hidden; mso-padding-alt:0px 21px 0px 21px;">
<tr>
<td width="100%" height="54" align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#FFFFFF;">
<a href="http://buttonLink.com" target="_blank" style="color:#FFFFFF; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:21px; padding-bottom:0px; padding-left:21px; color:#FFFFFF;">
SHOP NOW
</span></a>
</td>
</tr>
</table>
Litmus also has this super helpful article on buttons:
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design
can anyone help me with my problem? I try to build newsletter with couple table segments because mailchimp have problem with code and break my mail content if he is not in the table. Main problem for me is image over image. Please, take a look at my code.
Pattern is bottom image and have 100% size (700x50px) and logo is top image (32x32px). Logo must to be on right side and over pattern image with margin-top -20px and margin-right 30px but without using "position" property (mailchimp break all position property).
Right now, my logo is under pattern. I was try to fix this problem with z-index but nothing happens here.
<table class="header_class">
<td>
<img class="pattern_header"src="pattern.jpg" alt="pattern" />
<img class="logo_small"src="logo.jpg" alt="logo" align="right"/>
<h1>July 2017</h1>
</td>
</table>
my css:
pattern_header{
max-width: 700px;
}
logo_small{
margin-right: 30px;
margin-top: -20px;
}
(I am totally beginner and maybe my code isn't ok)
What the header should look like:
For background to work on emails you can use positions (as you have found out). For backgrounds to work in Outlook you need to use VML (vector markup language), this is native to outlook (>2007). All the rest of the email clients should be able to read the background declaration on the td.
Few things to note in the below code:
I have added [HEIGHT OF IMAGE] where you need to add the height for the VML.
You have not provided image dimensions which you will need for logo. Note Outlook doesnt read style attributes on images.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="https://i.stack.imgur.com/UX7Jw.png" style=" background:url(https://i.stack.imgur.com/UX7Jw.png);background-image:url(https://i.stack.imgur.com/UX7Jw.png);">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:700px;height:159;">
<v:fill type="frame" src="https://i.stack.imgur.com/UX7Jw.png" color="#e9e9e9" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right" valign="top" style="padding:30px 30px 30px 0px;"><img class="logo_small" src="https://i.stack.imgur.com/164VA.png" alt="logo" align="right"/></td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Let me know if this works for you.
This is what I need. Logo alignment is not to the top (offset from top 20px and from right 30px). Pattern alignment is top.
Example
I have an iFrame inside my index page. This iFrame contains an aspx page with a form inside it, with runat=server.
For some weird reason, anything I add after the iFrame is not being rendered to the page.
I tried adding text, a div, nothing is being added after when I run the page.
Code:
<body>
<asp:Panel ID="Panel1" runat="server" Height="80px">
<iframe name="LogoFrame" id="LogoFrame" src="asp/Logo.aspx"
scrolling="no"
style="border-style: hidden; padding: 0px; margin: 00px; width: 100%; height: 100%"
width="100%"/>
</asp:Panel>
<form id="MainMenu" method="post" runat="server">
<asp:Panel ID="Panel2" runat="server" Height="38px">
<table class="tableMenu" id="MainTable" style="BACKGROUND-COLOR: #e2eded" cellSpacing="0"
cellPadding="0" width="100%" border="0">
<tr class="trMenu2" vAlign="middle">
// Some other things below, including the closing of Panel2 and MainMenu form
When I run and inspect the page...
If I remove the iFrame, the rest of the page renders properly.
What is up with that?
I suspect it's because the iframe tag is self-closing and iframes should not be self-closing. If you replace ' />' with '></iframe>', I think that should resolve the problem.
Seems like the iframe is out of the form tag. But you put the iframe inside a Panel, which is an asp.net tool. You can try Removing the panel, or moving the code inside the form tags.
I've got a question - i know how to fill in a text in a textbox which is in an iframe if there is the FORM-tag used. But what can i do if the textbox don't have the FORM tag? I've tried some code variations without success. Let's say the code looks like this:
<tr><td align="left" valign="top" class="etext">Please enter your search string:</td></tr><tr><td align="left" valign="top" class="formfieldpadding"><label><INPUT TYPE="TEXT" id="text" class="formfield" NAME="pse_164_etext" VALUE="" ></label></td></tr><tr><td align="right" valign="top" class="buttonpadding"><input name="submit" type="image" src="/blah/button1.png" alt="Submit Button" wcflags="IgnoreDBOCheck,TreatAsCDATA" style="width: 237px; height: 60px; border: none; padding-top: 0px;" /></td></tr>
How can i fill the VALUE of the textbox which is in my iframe ???? Would be REALLY glad if someone could help me, I mean REALLY! thanks guys :)
The problem you'll face is that JavaScript is not allowed to access IFrame content from the parent window. This is a normal security restriction.
You can still bypass that by calling javascript FROM the Iframe. You can still access parent window from inside the IFrame:
parent.getElementById('text').value;
I have the following code:
<td colspan="7"height=200 valign="top">
<iframe id="myframe" name="myframe" src="index.php?page=1" width=810 height="100" marginheight="0" marginwidth="0" frameborder="1" scrolling="auto"></iframe>
</td>
I have don't see any scoll bar, either vertically or horizontally.
Any ideas?
Thanks
You should only see a scrollbar in the iFrame if the page you are opening in the iFrame is bigger than the size of the iFrame. Therefore, if 'index.php?page=1' will fit on a 810x100 window than the iFrame won't have any scrollbars. If you are expecting to see a scrollbar in the td that holds the iFrame you would need to style it differently. You would need to add style='overflow:auto' to the td that holds the iFrame. By doing this you are telling that td that if it's content is larger than it's max height and width it should have scrollbars.
This renders a horizontal and vertical scrollbar for me in IE7:
<html>
<body>
<table>
<tr><td colspan="7"height=200 valign="top">
<iframe id="myframe" name="myframe" src="http://www.google.se" width=810 height="100" marginheight="0" marginwidth="0" frameborder="1" scolling="auto"></iframe>
</td></tr>
</table>
</body>
</html>