button overlapping image
When I shrink the page my button overlaps. Here is the relevant html:
<tr>
<td>
<table style="width:100%;">
<tr align="center">
<td class="hide-mobile-cell" align="left" style="padding:25px;max-width: 60%;font-family: sans-serif;">
<td style="font-family: sans-serif;">
MY WEBSITE
</td>
<td style="padding:25px;">
<p style="font-family: sans-serif;">This will link to my website. </p>
</td>
</table>
</tr>
<tr>
<td style="padding-right: 25px;padding-left: 25px;font-family: sans-serif;">
I want to make it so that my button is responsive and does not overlap.
Try adding the white-space: nowrap property on your <a> tag:
<tr>
<td>
<table style="width:100%;">
<tr align="center">
<td class="hide-mobile-cell" align="left" style="padding:25px;max-width: 60%;font-family: sans-serif;">
<td style="font-family: sans-serif;">
MY WEBSITE
</td>
<td style="padding:25px;">
<p style="font-family: sans-serif;">This will link to my website. </p>
</td>
</table>
</tr>
<tr>
<td style="padding-right: 25px;padding-left: 25px;font-family: sans-serif;">
This is happening because you have given fixed padding to the button so it will take the exact size as it was taking in fullscreen mode.
read Media Queries and you will understand what to do.
Still I will give you a short idea of what to do!
resize the screen size to the point where you feel like the media query needs to be applied and then fix the padding and font size inside that media query so that the button stays in a single line.
Let me know if you don't understand this quite properly, I'll be happy to help you!
Related
I'm doing a text over an image and learning how to do the text size and position so it will look align, and right now I really don't know how to make the gap in between the h3 and p smaller.
I don't want to use CSS if possible I want it to be in HTML only just using the style in the code.
If you have a better way to do text over an image and multiple sentences with adjustable gap size and use each sentence use different font. It will be great.
Image from desktop
<table width="600" cellspacing="0" cellpadding="0" align="center">
<tr bgcolor="#f9c9d5">
<td></td>
<td rowspan=2>
<img src="bimage/box.jpg" alt="box">
</td>
</tr>
<tr>
<td colspan=2>
<h3 align="center" style="font-size:20px"> WELCOME</h3>
<p align="center">Jinho</p>
</td>
</tr>
</table>
you can use line-height property
<table width="600" cellspacing="0" cellpadding="0" align="center">
<tr bgcolor="#f9c9d5">
<td></td>
<td rowspan=2>
<img src="bimage/box.jpg" alt="box">
</td>
</tr>
<tr>
<td colspan=2>
<h3 align="center" style="font-size:20px, line-height:0"> WELCOME</h3>
<p align="center">Jinho</p>
</td>
</tr>
</table>
It is not recommended to use tables and inline styles, but perhaps you meant this?
<table style="width:600px; height:132px; border-spacing: 0; border-collapse: separate;
background-image: url(https://i.stack.imgur.com/B49ut.jpg)">
<tr>
<td style="text-align:center;">
<h3 style="font-size:20px; margin-bottom:0">WELCOME</h3>
<p style="margin-top:0">Jinho</p>
</td>
</tr>
</table>
I'm having problems with the following code.
<tbody>
<tr align="center">
<td>
<p align="right"><font face="Arial, Helvetica, sans-serif"><strong>Processoren</strong>
<img src="images/IntelPentium4.jpg" align="middle" height="37" width="50"> </font></p>
</td>
<td>
<p align="right"><font face="Arial, Helvetica, sans-serif"><strong>Moederborden
</strong> <img src="images/MB.jpg" align="middle" height="47" width="47"> </font></p>
</td>
</tr>
<tr align="center">
<td height="54" width="50%">
<p align="right"><strong><font face="Arial, Helvetica, sans-serif">Geheugen <img src="images/geh.gif" align="middle" height="47" width="50"></font></strong></p>
</td>
<td height="54" width="50%">
<p align="right"><strong><font face="Arial, Helvetica, sans-serif">Grafische kaarten <img src="images/56326.jpg" align="middle" height="50" width="50"></font></strong></p></td>
</tr>
<br><br><br>
</tbody><tbody>
<tr align="right">
<td align="left"> <img src="images/gamepc1.png" width="140" > </td>
<td align="right"> <img src="images/gamepc2.jpg" width="120"> </td></tr>
</tbody><tr>
<td></td>
<td class="test11"><img src="images/annie2.png" width="140">
</td></tr>
<tbody>
<tr align="right">
<td align="left"> <img src="images/gamepc3.png" width="120"> </td>
<td align="right"> <img src="images/gamepc4.png" width="100"> </td>
</tr>
</tbody></table>
enter image description here
Basicly, I can't figure out how to center the anime picture. Please dont ask me why there is random anyme on this webpage, but the owner of the store wanted me to do that. I've tried so many options to center the picture, they just work. Could someone try to take a look at it and help me out?
I tried centering it with css rules, also tried margin-left shit but I cant figure out why its not reaction on such code.
I've never worked with and before. I'm a first year student who had to make some websites for school that worked out pretty good. My friend asked me if I could fix some stuff for his work's owner's website. This website is designed like 10years ago. I already asked him if I couldn't just make a new one, but he insisted that I need to use this one.
Could someone help me out? Thanks!
Inside your tbody with the image of the anime you are using two <td>.
You can delete the first <td></td> and use colspan="2" for the other td, so you will only need one td. This td will take the full width. Now you can easily center the image.
<td colspan="2" class="test11" style="text-align:center;">
<img src="images/annie2.png" width="140">
</td>
Result look like this (be aware, I have not included the sources of the images).
I've checked out a few posts, and tried them. Didn't work. This may become a decision and tell clients this is what it is, but I don't want to come to that.
So after testing with Litmus, my main issue is the borders(left and right) vs the top and bottom image not lining up correctly on outbook 2007/10 vs everything else.
<body>
<style type="text/css">
body{
color:#415b7c;
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
padding:0;
margin:0;
}
table {border-collapse: collapse;}
</style>
<table width="100%" bgcolor="#ffffff">
<tr>
<td><!-- header -->
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr valign="bottom">
<td>
<table width="600" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr><td>
<img src="http://wearehmc.com/emailTemp/VSAC/top.png" width="600" style="display:block">
</td></tr>
</table>
</td>
</tr>
<tr valign="top">
<td>
<table width="600" align="left" bgcolor="#ffffff" style="border-left-style:solid; border-left-color:#3d5b83; border-left-width:2px; border-right-style:solid; border-right-color:#3d5b83; border-right-width:2px; border-collapse: collapse; ">
<tr>
<td>
client log
</td>
<td>
<table cellpadding="10" style="color:#576276;">
<tr>
<td>
<p style="font-weight:bold">
Text
</p>
<p>
text
</p>
</td>
</tr>
</table>
</td>
<td>
client logo
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="left" cellpadding="0" cellspacing="0">
<tr>
<td style="color:#ffffff; font-size:22px; font-weight:500; line-height:30px">
<table width="600" align="left" bgcolor="#659acf" cellpadding="20" style="border-left-style:solid; border-collapse: collapse; border-left-color:#3d5b83; border-left-width:2px; border-right-style:solid; border-right-color:#3d5b83; border-right-width:2px; border-collapse:collapse;">
<tr>
<td style="color:#ffffff; font-size:24px; ">
text
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="left" cellpadding="0" cellspacing="0">
<tr><td>
<img src="http://wearehmc.com/emailTemp/VSAC/bottom.png" width="600" style="display:block">
</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr></table>
I've taken out client copy and logos.
As I've said it may come down to a decision of not letting it line up in outlook 2007/10, while letting it work in others.
So if anyone has any suggestions, it would be most helpful.
For outlook (And gmail) You need to specify border="0" on your images.
<img src="/" width="" height="" alt="" border="0" style="display:block">
This should be on every image you use in your email, even spacers. (In fact, especially on spacers, since those will create unwanted empty space without any content)
Also, Outlook has trouble rendering cell-padding and spacing (2007 and 2010 both use microsoft WORD as their rendering engine, I'll let you imagine how great that is to render html-emails).
So you should really be using nested tables instead of cell-padding, with spacer images to create the inner spaces of your sections.
Oh, and I see that all your styling is not inline. This will cause problems with your html-email stability. (gmail will strip every styling that is not inline, as well as the #000000 color on links (use #000001 instead)).
Oh also. Border styles and colors. Those will not display properly everywhere. The solution is again nested tables. With bgcolor and 1 / 2px width spacers to give the illusion of borders.
Hope this all helps. (I know this sounds like a lot of errors in your html-email, but once you get the hang of coding for the worst possible mail clients in mind, it'll become second nature! ;) )
I am getting a line across a table I made in an html email. It is in the orange area. I'm not really sure what is causing is. There is no images in there. Here is my code for that table.
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td height="23" bgcolor="#f08122" colspan="3"> </td>
</tr>
<tr>
<td width="23" bgcolor="#f08122"></td>
<td bgcolor="#f08122" valign="middle" style="font-family:Helvetica, Arial, sans-serif; color:#FFFFFF;" align="center"><span style="font-size:30px; line-height:36px; font-weight:bold;"><strong>Improve outcomes and empower patients with health logs</strong></span><br /><br />
<span style="font-size:27px;">Order now and get <strong>10% more FREE!*</strong></span></td>
<td width="23" bgcolor="#f08122"></td>
</tr>
<tr>
<td height="23" bgcolor="#f08122" colspan="3"> </td>
</tr>
<tr>
<td height="5" colspan="3"></td>
</tr>
</table>
Here is the link to the actual email also if you wanted an active view: https://tagwebstore.com/email/tag-email-logbooks.html
Here is a screenshot of the html email from my iPhone.
The lines appear to be above and below the white text. Any ideas? Thanks in advance.
The borders appear when a background color or image is applied to individual table cells.
you can try:
Removing background colors or images from individual table rows and
cells, and/or;
Nesting the problem table in a new table, featuring a background color that matches that of the inner table.
source
Also, setting style="display: block;" on the img element consistently helps all images position exactly, in tandem with the above suggestions.
I am having trouble getting a table to correctly nest inside another in IE, but it works fine in Firefox and Chrome. For some reason IE is showing the cell with the nested table as much wider then it is set to be.
Simplified version of my code:
<table width="575" border="0">
<tbody>
<tr>
<td height="10" colspan="3"><span style="FONT-SIZE: 12px"><span style="FONT-FAMILY: Arial">CITY (Arial, small, all caps), Country (only if city isn't well known, Arial, small) - Content text (Arial, small) First paragraph is to be full width and above any images or related boxes, unless there is a lead.<br />
</span></span></td>
</tr>
<tr>
<td height="10" colspan="3"></td>
</tr>
<tr>
<td width="280"><span style="font-size: 12px;"><span style="font-family: Arial;">Half-width items: Text next to images or related boxes is to match or slightly exceed height of image or related box it sits next to with the tops set to align. First half-width image in an article or any related box goes on the right side of the page. </span></span></td>
<td width="10"></td>
<td width="260" valign="top">
<table width="260" border="0">
<tbody>
<tr>
<td>
<div style="width:260px;border:2px groove black;padding:5px;"><strong><span style="font-size: 14px;"><span style="font-family: Arial;">Related Links - Arial, medium, bold</span></span></strong><br />
<span style="font-family: Arial;"><span style="font-size: 12px;"><span style="font-size: 2px;"><br />
</span> • To be used when relevant links exist<br />
<span style="font-size: 2px;"><br />
</span> • Links to remain one line or shorter<br />
<span style="font-size: 2px;"><br />
</span> • Link text - Arial, small, linked<br />
</span></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="10" colspan="3"></td>
</tr>
</tbody>
Thank you for any help. I just can't figure out why IE won't play the same as the other browsers.
FYI, you can achieve this in CSS without using tables.
I changed the width from pixels to percentage and it works fine in IE now...
<tr>
<td width="44%"><span style="font-size: 12px;"><span style="font-family: Arial;">Half-width items: Text next to images or related boxes is to match or slightly exceed height of image or related box it sits next to with the tops set to align. First half-width image in an article or any related box goes on the right side of the page. </span></span></td>
<td width="2%"></td>
<td width="44%" valign="top">
<table width="100%" border="0">
<tbody>
<tr>
<td>
<div style="width:260px;border:2px groove black;padding:5px;"><strong><span style="font-size: 14px;"><span style="font-family: Arial;">Related Links - Arial, medium, bold</span></span></strong><br />
<span style="font-family: Arial;"><span style="font-size: 12px;"><span style="font-size: 2px;"><br />
</span> • To be used when relevant links exist<br />
<span style="font-size: 2px;"><br />
</span> • Links to remain one line or shorter<br />
<span style="font-size: 2px;"><br />
</span> • Link text - Arial, small, linked<br />
</span></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Not sure why you are using colspan="3" while you can do away with two.
Anyway, test the above code to check if this is what you are after...
Thanks.
ADDED:
I removed the width for the td's and that works fine as well. Not sure why IE is rendering it differently when the width is supplied.
<tbody>
<tr>
<td height="10" colspan="3"><span style="FONT-SIZE: 12px"><span style="FONT-FAMILY: Arial">CITY (Arial, small, all caps), Country (only if city isn't well known, Arial, small) - Content text (Arial, small) First paragraph is to be full width and above any images or related boxes, unless there is a lead.<br />
</span></span></td>
</tr>
<tr>
<td height="10" colspan="3"></td>
</tr>
<tr>
<td><span style="font-size: 12px;"><span style="font-family: Arial;">Half-width items: Text next to images or related boxes is to match or slightly exceed height of image or related box it sits next to with the tops set to align. First half-width image in an article or any related box goes on the right side of the page. </span></span></td>
<td></td>
<td valign="top">
<table border="0">
<tbody>
<tr>
<td>
<div style="width:265px;border:2px groove black;padding:5px;"><strong><span style="font-size: 14px;"><span style="font-family: Arial;">Related Links - Arial, medium, bold</span></span></strong><br />
<span style="font-family: Arial;"><span style="font-size: 12px;"><span style="font-size: 2px;"><br />
</span> • To be used when relevant links exist<br />
<span style="font-size: 2px;"><br />
</span> • Links to remain one line or shorter<br />
<span style="font-size: 2px;"><br />
</span> • Link text - Arial, small, linked<br />
</span></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="10" colspan="3"></td>
</tr>
</tbody>