For the first time I am posting here cause if usually I am able to find a solution to my code issues throughout other answers, this time, no matter what I try, it doesn't work.
I am doing a table with two rows with basically pictures on the first row linking some PDF docs with a title below (second row).
The thing is that pictures do not have the same size (that can't be change). I would like them to be align on the bottom of the row, with a small margin before the separation line.
Right now, they are centered (by default I guess) which is not bad but not what I want anyway.
The second issue that I have while they are centered is that the first picture of of the row is always a bit higher than the rest for some reason. Can't figure out why.
Hopefully you can help me with the code written below (I assume that its full of mistakes since several calls doesn't work and could probably be removed).
<table width="780"; bgcolor="#e8e8e8" style="table-layout:fixed" VALIGN="top">
<tr>
<td style="word-wrap: break-word;"; ALIGN="CENTER">
<div align="center";>
<a href="PDF URL" target="_blank">
<img src="URL" alt="ALT">
</a>
</div>
</td>
<td>
<div align="center">
<a href="PDF URL" target="_blank">
<img src="URL" alt="ALT">
</a>
</div>
</td>
<td>
<div align="center">
<a href="PDF URL" target="_blank">
<img src="URL" alt="ALT">
</a>
</div>
</td>
</tr>
<tr>
<td><div align="center"><p style="font-size:11px"><a title="TITLE1" href="URL" target="_blank">TITLE1</p></a>
</div></td>
<td><div align="center"><p style="font-size:11px"><a title="TITLE2" href="URL" target="_blank">TITLE2</p></a>
</div></td>
<td><div align="center"><p style="font-size:11px"><a title="TITLE3" href="URL" target="_blank">TITLE3</p></a>
</div></td>
<td><div align="center"><p style="font-size:11px"><a title="TITLE4" href="URL" target="_blank">TITLE4</p></a>
</div></td>
{/tr}
{/table}
You should first include a .css file call in your header like this:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Then u can create a "mystyle.css" file in order to apply all the styles you want for your table.
Take a look at this page. W3School - CSS
There u have some examples about how to change color, margin, background images and so on.
EDIT:
If you want o apply all the styles in the .html file try looking at this web. http://www.w3schools.com/tags/
There u have all html tags, select the one u want and see the attributes could use.
Related
I wanted to have a full-width call-to-action banner on my client's website. The template that my client has does not support CSS, so I'm making use of like old school HTML to build pages.
I have a background image for the img src and I want to overlay the text in it. I'm in need of a code that is working since I'm really not well-versed.
I searched up for solutions in adding overlay text to a background image, but most of the answers contain CSS. Here's a code that I tried.
<table>
<tr>
<td></td>
<td rowspan=4><img src="/uploads/image12345jpg"></td>
</tr>
<tr>
<center><td colspan=4>This is the overlay text</td></center>
</tr>
</table>
</center>
I'd appreciate your help and answers.
The support says that I have to individually add it in the HTML code... not sure where it goes.
I think you might be looking for something like this: https://jsfiddle.net/DIRTY_SMITH/vz04m3ph/2/
<TABLE border="0" cellpadding="0" cellspacing="0">
<TR>
<TD width="221" height="300" background="https://placeimg.com/640/480/any" valign="bottom">
<FONT size="+1" COLOR="red">This is the overlay text</FONT>
</TD>
</TR>
</TABLE>
EDIT:
This question is asking how to use inline styles, I think:
(I've also put some inline javascript on a click function because you mentioned your scripts wernt working either)
https://jsfiddle.net/DIRTY_SMITH/vz04m3ph/28/
<td style="position:relative;">
<img src="https://placeimg.com/640/480/any" style="position:absolute;z-index:1;" width="600px" height="150px" />
<div style="z-index:2;position:relative;color:red;font-weight:bold; font-size: 40px; top: 40px; left: 100px;" onClick="(function(){
alert('See You can click me');
return false;
});">
<a href="#" onClick="(function(){ alert('See You can click me'); return false; })();return false;">
your text goes here click here</a>
</div>
</td>
This worked for me. Thank you for the help! Appreciate it.
<div class="container" style="position:relative;text-align:center;color:white;" >
<img class="img-responsive" src="https://placeimg.com/640/480/any" alt="#" style="width:1880px;height:250px;" >
<div class="centered" style="position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);" >Example Text</div>
</div>
I have created a header for our companies email templates, luckily I was able to find a basic template on the web and tweak it to our requirements.
I am a real beginner when it comes to HTML so I am sure there are many errors in it too.
I need to figure out how to reduce the blue banner to 42px in height but everything I try ruins it. I have also been told that my 600 wide option is very old school and it should be 1200. I have tried to change this too, but then it loses all of the other formatting and looks terrible.
Its supposed to be responsive, if anyone could make any edit suggestions I would be very grateful.
header.txt
header.html
try changing the padding in the td containing the logo/image. To decrease the height of the blue banner, decrease the padiing at top and bottom of the above mentioned table data.
This helps you but another way is to decrease the logos height.
From looking at the codes, there is no specific "height" that is being assigned to the table containers that you can change to specify to 42px. The most that you can do is to remove the "top" and "bottom" padding from the containers inside to make the header's height smaller.
Here's a sample code with the changes. If you notice, I changed the top and bottom padding to 0px. For the second td, I left 5px for the top padding to add some spaces between the logos and the top edge of the screen. If you want to edit the width, I change the width to 800px but you also need to adjust the widths of the 2 containers inside the table. For example, I changed them from 270px to 370px each.
Lastly, I agree that this "template" that you found seems very complex and it would be better to learn a little bit of basic html and css and what you're trying to do is simple and can be done with much simpler codes. Good luck!
<center>
<table cellspacing="0" cellpadding="0" width="800" class="w320">
<tr>
<td valign="top" width="370" style="background:#2980B9;padding:0px 15px 0px 15px;">
<a href="https://www.hayley-group.co.uk/" style="text-decoration:none;">
<img src="http://hosted.hayley-group.co.uk/shop/hayley_web_logo_white(trans).png" width="110" height="auto" alt="Hayley Group PLC Logo"/>
</a>
</td>
<td valign="top" width="370" style="background:#2980B9;padding:5px 15px 0px 15px">
<table border="0" cellpadding="0" cellspacing="0" class="mobile-center-block" align="right">
<tr>
<td align="right">
<a href="https://www.facebook.com/HayleyGroup/">
<img src="http://hosted.hayley-group.co.uk/shop/social_facebook.png" width="30" height="30" alt="social icon"/>
</a>
</td>
<td align="right" style="padding-left:5px">
<a href="https://twitter.com/HayleyGroup">
<img src="http://hosted.hayley-group.co.uk/shop/social_twitter.png" width="30" height="30" alt="social icon"/>
</a>
</td>
<td align="right" style="padding-left:5px">
<a href="https://www.linkedin.com/company/hayley-group">
<img src="http://hosted.hayley-group.co.uk/shop/social_linkedin.png" width="30" height="30" alt="social icon"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
I have a HTML table that's completely composed of eight images. They're puzzle pieces, so they have to be placed specifically and accurately.
This was easy on desktop, I just used absolute positioning to mess around with the pixels and make it work. It looks like trash on mobile though. The pieces are still together, but the puzzle is all the way to the right of the screen and it's too large. I've done a fair bit of Googling, but the only results I found were for tables composed of text, which doesn't work for my situation.
Here's the table, if anyone's interested -
<table width="100%" id="table" border="0" cellpadding="0" cellspacing="5" align="center">
<tr>
<td id="one">
<img src="1.png" class="merge0">
</td>
<td id="two">
<img id="2" src="6.png" class="merge">
</td>
<td>
</td>
</tr>
<tr>
<td id="three">
<img src="4.png" class="row1">
</td>
<td id="four">
<img src="2.png" class="merge1">
</td>
<td id="five">
<img src="7.png" class="merge2">
</td>
</tr>
<tr>
<td id="six">
<img src="8.png" class="row2">
</td>
<td id="seven">
<img src="5.png" class="row3">
</td>
<td id="eight">
<img src="3.png" class="row4">
</td>
</tr>
</table>
I read a bit about jQuery mobile, but I've never really grasped the concept of jQuery, and mobile is a foreign platform to me. I'm hoping to learn though :)
I've also tried those "desktop to mobile" converters, and they all are horrible.
Edit - I think people might suggest that I completely take the table out and use a different method of arranging my images. I'm really not sure how to go about doing this, and I'd prefer it if I could keep my current setup. If it's not possible though, I'd appreciate some pointers on how to do it differently.
Go over the getting started page and then use jQuery-mobile grids:
<div class="ui-grid-a">
<div class="ui-block-a"><img src="1.png" class="merge0"></div>
<div class="ui-block-b"><img id="2" src="6.png" class="merge"></div>
</div>
For the grid with three images just use "ui-grid-b"
Hope this helps
best
M
I am trying to make a template, which I want to use with outlook, but when I use this code, i am getting logo at right and link text left in outlook, which is total oppose to which output I want. How do I resolve it?
<center>
<table width="600px;" style="margin:auto auto;">
<tr style="left:auto">
<td>
In this main table's td tag below mentioned tables are included.. I also check that all tags are closed properly without forget any single tag.
This code is for logo and link's main table...
<table width="150px;" bgcolor="ffffff" cellpadding="0" cellspacing="0" align="left">
this code for link
<td style="text-align:right;">
<a href="http://www.url.com" target="_blank">
<span style="font-family:Myriad Pro; color:#0d5497; font-size:20px; text-align:end; inline-box-align:last; left:auto" data->www.linkurl.com
</span>
</td>
I had also used text-align, left:auto, right:auto in
<table> <tr> <td>
level accordingly but not getting proper output.
Image of output in outlook
I think this is more towards what you are looking for here: JSFiddle Example
You had the right idea with
<td style="text-align:right;">
<a href="http://www.url.com" target="_blank">
<span style="font-family:Myriad Pro; color:#0d5497; font-size:20px; text-align:end; inline-box-align:last; left:auto" data->www.linkurl.com
</span>
</td>
but some of your css looks a little off. Text-align doesn't have an 'end' value and I had never heard of inline-box-align before.
I'm trying to correct an old template which contains tables and not divs.
The whole template consists of tables.
I'm tyring to position an png image absolutely in the table, that is overlapping the background.
The code I've made is as follows:
<tr>
<td></td>
<td><a href="homepage.html">
<div style="position:absolute;margin-top:-60px;margin-left:-18px;">
<img src="images/header.png" width="280" height="120" alt="" border="0">
</div>
</a>
</td>
</tr>
The problem is that some browsers "miss" a pixel.
Is there any way to position absolutely an image in a table?
p.s. at the moment, I know that the best way is to use divs, but I shall not alter the whole template, just alter only the heading.
Correct way:
<tr>
<td></td>
<td>
<div style="position:absolute;margin-top:-60px;margin-left:-18px;">
<a href="homepage.html">
<img src="images/header.png" width="280" height="120" alt="" border="0">
</a>
</div>
</td>
</tr>