I need to find out why the image here is really small. I need these images to be retina ready, so thats why they are at 50%. Please confirm that i have done this correctly.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="templateBody" width=
"700">
<tr>
<td class="leftColumnContent" valign="top" width="280">
<!-- // Begin Module: Top Image with Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" style=
"background-color: #eeeef9;" width="100%">
<tr>
<td align="center" valign="middle" width="50%">
<div style="text-align:center;">
<h4 style="text-align:center;">DEL IKON</h4>
<hr style=
"height: 2px;background-color: black;border: 0;width: 160px;">
<p>På alle sider på hvisk.com – når<br>
du er logget ind – finder du i<br>
venstre side et ikon, hvor der står<br>
<strong>DEL</strong>. Når du trykker på
ikonet,<br>
kommer der en ’skuffe’ frem.</p>
</div>
</td>
<td align="center" valign="middle"><img src=
"https://gallery.mailchimp.com/54366e4388f5f1f871ed3d155/images/9de246f4-90cc-4185-b1b8-16b1b402b5e2.png"
style="width:50%;"></td>
</tr>
</table><br>
<!-- // End Module: Top Image with Content \\ -->
</td>
</tr>
</table>
</body>
</html>
Setting an element to width:50% is relative to width of the parent container, not the width of the element itself, see the quick demo.
<img style="width:50%;" src="//dummyimage.com/100"/>
You could make the image at least x2 size of the parent container size then apply either of the CSS rules as needed for high pixel density displays, such as Apple retina display.
img {max-width:100%; height:auto;} or img {width:100%; height:auto;}
I know what you mean. You mean why your picture is so large (3000px) but you set 50% --> less than 1500px?
Because 50% is 50% of width td, not 50% of 3000px. Please set width:100% and maybe you know why
Related
I am trying to get these two images and two pieces of text (facebook and instagram) to be next to each other on one line. Please look at the picture below. This is not my code, so I do not know where to begin.
It is going to be used in an email, so this is why all of the CSS styles have to be inline.
This is how it looks now
This is how I want it to look
<tr style='background-color: #1F3466;'>
<td style='background-color: #1F3466;'>
<footer style='background-color: #18A5A7;'>
<h2 style='margin-left: 25px;font-family: sans-serif; color: aliceblue;'>Fique bem informado! </h2>
<h3 style='margin-left: 25px;font-family: sans-serif; color: aliceblue;'>Acompanhe também o Grupo São Cristóvão Saúde nas redes sociais: </h3>
<Footer style='display: flex;flex-direction: row;align-content: center;align-items: center;font-family: sans-serif;'>
<img src='fb_logo.png' style="width:25px; height:25px; margin-left:25px" alt='facebook' /><a style='text-decoration: none;color: aliceblue;' href='https://m.facebook.com/gruposaocristovaosaude/'> Facebook.com/gruposaocristovaosaude</a>
</Footer>
<footer style='display: flex;flex-direction: row;align-content: center;align-items: center;font-family: sans-serif;'>
<img src='inst_logo.png' style="width:25px; height:25px; margin-left:25px" alt='instagram' /><a style='text-decoration: none;color: aliceblue;' href='https://instagram.com/saocristovaosaude/'> #saocristovaosaude</a></footer>
</footer>
</td>
</tr>
<tr>
Rather than having the nested tag "Footer" with display: flex twice, just move the contents of your second tag into your first one.
Something like this.
<tr style='background-color: #1F3466;'>
<td style='background-color: #1F3466;'>
<footer style='background-color: #18A5A7;'>
<h2 style='margin-left: 25px;font-family: sans-serif; color: aliceblue;'>Fique bem informado! </h2>
<h3 style='margin-left: 25px;font-family: sans-serif; color: aliceblue;'>Acompanhe também o Grupo São
Cristóvão Saúde nas redes sociais: </h3>
<Footer
style='display: flex;flex-direction: row;align-content: center;align-items: center;font-family: sans-serif;'>
<img src='fb_logo.png' style="width:25px; height:25px; margin-left:25px" alt='facebook'/><a style='text-decoration: none;color: aliceblue;'
href='https://m.facebook.com/gruposaocristovaosaude/'> Facebook.com/gruposaocristovaosaude</a>
<img src='inst_logo.png' style="width:25px; height:25px; margin-left:25px" alt='instagram' /><a style='text-decoration: none;color: aliceblue;'
href='https://instagram.com/saocristovaosaude/'> #saocristovaosaude</a>
</Footer>
</footer>
</td>
</tr>
<tr>
Also as a list of changes to make this a lot easier for you:
Don't nest the footer tag, your document should only have one of these.
Get rid of your inline styles and add them to a css file.
You could put both elements in a separate div and nest them in the parent div d-flex flex-row. Ref: https://getbootstrap.com/docs/4.0/utilities/flex/
This is what you are after. Hybrid/spongy method that does not rely on media query for stacking. Your inner two columns ( [Content goes here] ) will have contents of each column. Right now the code when run doesn't show words as the parent td has font-size:0;. Be sure to add inline styles for each column.
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="text-align:center;font-size:0;">
<!--[if (gtemso 9)|(IE)]>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:300px;display:inline-block;vertical-align:middle;">
[Content goes here]
</div>
<!--[if (gtemso 9)|(IE)]>
</td>
<td width="50%" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:300px;display:inline-block;vertical-align:middle;">
[Content goes here]
</div>
<!--[if (gtemso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
Unable to place image even with the signature in table. The top pf the image should be the same level as the top of the text
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Email Signature</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" style="width: 100%;
max-width: 560px">
<tr>
<td width="5%" valign="middle">
<img href="https://www.pravoconstruction.com/" src="https://media-exp1.licdn.com/dms/image/C4E0BAQGQicp-n_FWzw/company-logo_200_200/0/1530564205372?e=2159024400&v=beta&t=OdxbaYftUNG_-cf8lLTWVA-voPANK8goWs3hiafOo84" style="width: 30%;min-width: 62px;
display: block;">
</td>
<td width="70%" valign="top">
<h4 style="margin:0 0 5px; font-size: 9px;font-family: arial;color:#99A3A4; line-height:1.2"><strong>test email</strong></h4>
<h5 style="margin:0 0 5px; font-size: 8px;font-family: arial;color:#99A3A4; line-height:1.2">job role | 123.456.7890</h5>
<h5 style="margin:0 0 5px; font-size: 8px;font-family: arial;color:#99A3A4; line-height:1.2">1234 anywhere lane | Texas,TX 77777</h5>
</td>
</tr>
</table>
</body>
</html>
Looks like your photo has some space inside the image which probably causes it to look not lined up. If you want to compensate for that I would suggest adding some padding to the top of the h4.
Also, you could crop the image so it doesn't have this space on the top.
Im been trying to make my page work on different browsers and its seems it only works on IE and in other browser all my images are misalign. im not really good at HTML and its been awhile since the last time I use html, please check my codes below. And i need my page to be 640 x 480 px. Thanks
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AD</title>
</head>
<body>
<table width="640" border="0" align="center" cellpadding="0" cellspacing="0">
<div style="{z-index:3;}">
<img src="images/Header.gif" width="640" height="110"
/div>
<div style="{position: absolute; top: 145; left: 310; z-index:3;} font-family:Arial, Helvetica, sans-serif; font-size:22px; color:#000000;">at</div>
<div style="{position: absolute; top: 115; right: 185; z-index:3;}">
<img src="images/Brush.gif" width="100" height="215"
</div>
<div style="{position: absolute; top: 20; right: 145; z-index:3;}">
<img src="images/LOGO.gif" width="330" height="85"
</div>
<tr>
<td align="center" valign="top" bgcolor="#f0f8ff" style="background-color:#f0f8ff; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#000000; padding:8px;"><table width="80%" border="0" cellspacing="0" cellpadding="0" style="margin-top:10px;">
<center> text 1 <br><b>Competitive text2
<br>text3</b>
<br></center></div></td>
<br>
<center> <div style="font-size=20px;"> text4
<br>text5K.<br>
</center></div>
<br>
</tr>
</table></td>
</tr>
<tr>
<tr>
<tr>
<td align="left" valign="top" bgcolor="#00000" style="background-color:#00000;"><table width="100%" border="0" cellspacing="0" cellpadding="7">
<tr>
<td align="left" valign="top" style="color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:16px;"> <center><b>Apply online today at <font color=#6699ff> www.startek.com/careers</font></b>
</td>
<tr>
<td align="center" style="color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:13px;"> <center>address
<br><b>tel.no.</b>
</td>
</tr>
</table></td>
</tr>
</body>
</html>
Make use of CSS layout elements such as position. Your code just works on some browsers because some formatting is not cross browser compatible.
I advise you to use CSS for formatting because some of the HTML formatting you use are already deprecated. Here is a nice CSS tutorial
The same problem was also with me...Since HTML output may vary depending upon the browser, you should use adobe dreamweaver.It has a functionality to output HTML same in all browser by default...by the way..how it does i don't know.
If you can't afford dreamweaver right now..make sure you include position attribute in
div tag properly.
try like this:
<div position=absolute>main panel</div>
I'm trying to build a newsletter for an email campaign. I have to build it with tables and all that cause most of the email clients ignore thinks like div etc. now I have the problem that I would like to have the text obertauern ...... in one line and under it the line ( <hr> ) but its not working the way I would like to have it.
On the pic you can see what I'm trying to do and I put the html into jsfiddle.
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center">
<td colspan="2">
<img src="head.jpg" width="700" border="0">
</td>
<tr>
<td colspan="2">
<p style="color:#00668a;text-align:left;font-size:18px;">
Wer den Sonnenskilauf im SalzburgerLand noch intensiv genießen möchte, den erwarten strahlender Sonnenschein, bestens präparierte Pisten und sensationelle Urlaubsangebote:
</p></td>
</tr>
<tr style="background-color:#deeef4;">
<td width="130" cellpadding="0" ><p style="color:#00668a;padding:10px">OBERTAUERN <span style="color:#a9a9a9;font-size:13px">Gültigkeit der Pauschale: 22.03. – 12.04.2014 & 19.04. – 04.05.2014</span></p><a href="http://urlaub.salzburgerland.com/de/winterurlaub?utm_campaign=RK_WI_13&utm_medium=DE&utm_source=CARE-Verlag&utm_content=Newsletter" target="_blank">
<img src="ab1.jpg" width="250" height="138" border="0" style="padding:10px"></a>
<td width="200" height="163"><p>"Sund and Fun Wochen"</p>
<ul>
<li>7 Tage Aufenhthalt inkl. Frühstück</li>
<li>7 Tage Aufenhthalt inkl. Frühstück</li>
</ul><img src="button.png" width="345" height="35" border="0"></td></td>
</tr>
</table>
jsfiddle
just use the border property to create the line and change the p to a div so you do not put a lot of space after it:
<tr>
<td colspan="2">
<div style="border-top: solid 1px #00668a;height:1px;">
Here is a jFiddle:
http://jsfiddle.net/qXxPb/2/
Try:
<td width="600" cellpadding="0" >
For the td where the text is located (or use something else than 600).
I fixed your jFiddle: http://jsfiddle.net/mSLf4/5/
Should work like that, you missed some tablecells and I made your sentence in an extra row + set the cell to span over 2 cells.
Should work now, next time validate your code first please.
<td colspan="2">...</td>
was the important line.
Below is my code for my website. It works perfectly on firefox but not in chrome or safari. The only thing that doesn't work is the navigation row displays to the right of the header picture and the home button is the full length of the header picture. I think it has something to do with the display:inline in the css but I'm note sure.
<html>
<head>
<title>Workouts</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id = "page">
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
<tr class = "nav" height="30px" width="100%">
<td></td>
<td>Home</td>
<td>About</td>
<td>Workouts</td>
<td>Trainers</td>
<td>Contact</td>
<td></td>
</tr>
<tr class = "content" width="100%">
<td><img width="100%" src="images/content.png" /></td>
</tr>
</table>
</div>
</body>
</html>
This is my stylesheet
* {
margin-top:0;
padding-top:0;
padding-bottom: 0;
margin-bottom: 0;
}
body{
background:pink;
}
.border{
background-color: #c92f51;
}
.nav a{
text-decoration: none;
color:pink;
}
.nav a:hover{
color:gray;
}
.nav td{
display: inline-table;
width: 14.29%;
height="30px";
text-align: center;
font-size: 24px;
color:pink;
}
tr .content{
background:#c92f51;
}
.content td{
background:white;
padding: 30px 30px 30px 30px;
}
Invalid mark-up without DOCTYPE declaration. Check your code by copy/paste in w3c validator check the errors.
Every table row has to have the same number of columns. If you don't, you need a colspan attribute to make up for it.
Also you should not have <div> tags directly instead a table. How browsers handle these types of errors is not very consistent, so it's best to fix them. Try changing:
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
To
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<tr id = "header">
<td colspan="7">
<img src =images/header_logo2.png />
</td>
</tr>
And also add the same colspan on the last row:
<tr class = "content" width="100%">
<td colspan=7><img width="100%" src="images/content.png" /></td>
</tr>
More generally, using tables for layout like this is not good practice nowadays. If you search google for "css layouts vs tables" you can find out a lot more about it.
Use a validator. Your HTML is invalid and at least one of your errors causes significant differences in how different browsers error recover from it.
Some will move the <div> that is a child element of the <table> so it is outside the table (because it isn't allowed there).
You don't have any tabular data in there, so get rid of all the table markup and use something more appropriate (e.g. a list for your list of links and so on).