I am trying to create an email signature using html and an image I designed in Photoshop. I have sliced the image in PS and saved the slices out onto my PC. I now want to add links to certain slices and have managed to do this but the code is very messy and poor so I know that there is a better way to do it. I have attached the code below.
The links are not the actual links and are just placeholders for now. I also know that I need to save the images externally and will get round to it but just want to try and get the code sorted for now. I also understand that the image size is massive for an email signature so can I just add a "max-width" and "max-height" to the code to size it down or do I have to individually change all the sizes of each slice?
Finally, will this a spliced html image display well as an email signature or, because there are so many images attached to it, will it just go straight into spam?
<!DOCTYPE html>
<html>
<style>
div {
position: absolute;
}
</style>
<head></head>
<body>
<a href="" />
<div style="background-image:url('img/img1.jpg'); left:0px; top:0px; width:2000px; height:122px"></div>
<a href="" />
<div style="background-image:url('img/img2.jpg'); left:0px; top:122px; width:124px; height:222px"></div>
<a href="https://www.linkedin.com" />
<div style="background-image:url('img/img3.jpg'); left:124px; top:122px; width:866px; height:198px"></div>
<a href="" />
<div style="background-image:url('img/img4.jpg'); left:990px; top:122px; width:1010px; height:102px"></div>
<a href="" />
<div style="background-image:url('img/img5.jpg'); left:990px; top:224px; width:246px; height:576px"></div>
<a href="https://www.bing.com" />
<div style="background-image:url('img/img6.jpg'); left:1236px; top:224px; width:630px; height:120px"></div>
<a href="" />
<div style="background-image:url('img/img7.jpg'); left:1866px; top:224px; width:134px; height:576px"></div>
<a href="" />
<div style="background-image:url('img/img8.jpg'); left:124px; top:320px; width:866px; height:24px"></div>
<a href="" />
<div style="background-image:url('img/img9.jpg'); left:0px; top:344px; width:122px; height:456px"></div>
<a href="https://www.google.com" />
<div style="background-image:url('img/img10.jpg'); left:122px; top:344px; width:540px; height:150px"></div>
<a href="" />
<div style="background-image:url('img/img11.jpg'); left:662px; top:344px; width:328px; height:456px"></div>
<a href="" />
<div style="background-image:url('img/img12.jpg'); left:1236px; top:344px; width:630px; height:42px"></div>
<a href="" />
<div style="background-image:url('img/img13.jpg'); left:1236px; top:386px; width:48px; height:414px"></div>
<a href="https://www.bing.com" />
<div style="background-image:url('img/img14.jpg'); left:1284px; top:386px; width:482px; height:56px"></div>
<a href="" />
<div style="background-image:url('img/img15.jpg'); left:1766px; top:386px; width:100px; height:414px"></div>
<a href="" />
<div style="background-image:url('img/img16.jpg'); left:1284px; top:442px; width:482px; height:42px"></div>
<a href="" />
<div style="background-image:url('img/img17.jpg'); left:1284px; top:484px; width:62px; height:316px"></div>
<a href="https://www.linkedin.com" />
<div style="background-image:url('img/img18.jpg'); left:1346px; top:484px; width:94px; height:90px"></div>
<a href="https://www.facebook.com" />
<div style="background-image:url('img/img19.jpg'); left:1440px; top:484px; width:60px; height:82px"></div>
<a href="https://www.twitter.com" />
<div style="background-image:url('img/img20.jpg'); left:1500px; top:484px; width:94px; height:90px"></div>
<a href="https://www.instagram.com" />
<div style="background-image:url('img/img21.jpg'); left:1594px; top:484px; width:92px; height:82px"></div>
<a href="" />
<div style="background-image:url('img/img22.jpg'); left:1686px; top:484px; width:80px; height:316px"></div>
<a href="" />
<div style="background-image:url('img/img23.jpg'); left:122px; top:494px; width:540px; height:30px"></div>
<a href="" />
<div style="background-image:url('img/img24.jpg'); left:122px; top:524px; width:2px; height:88px"></div>
<a href="https://www.google.com" />
<div style="background-image:url('img/img25.jpg'); left:124px; top:524px; width:418px; height:62px"></div>
<a href="" />
<div style="background-image:url('img/img26.jpg'); left:542px; top:524px; width:120px; height:276px"></div>
<a href="" />
<div style="background-image:url('img/img27.jpg'); left:1440px; top:566px; width:60px; height:234px"></div>
<a href="" />
<div style="background-image:url('img/img28.jpg'); left:1594px; top:566px; width:92px; height:234px"></div>
<a href="" />
<div style="background-image:url('img/img29.jpg'); left:1346px; top:574px; width:94px; height:226px"></div>
<a href="" />
<div style="background-image:url('img/img30.jpg'); left:1500px; top:574px; width:94px; height:226px"></div>
<a href="" />
<div style="background-image:url('img/img31.jpg'); left:124px; top:586px; width:418px; height:26px"></div>
<a href="https://www.google.com" />
<div style="background-image:url('img/img32.jpg'); left:122px; top:612px; width:406px; height:62px"></div>
<a href="" />
<div style="background-image:url('img/img33.jpg'); left:528px; top:612px; width:14px; height:188px"></div>
<a href="" />
<div style="background-image:url('img/img34.jpg'); left:122px; top:674px; width:406px; height:126px"></div>
</body>
</html>
Email is not web! Absolute positioning is an advanced trick that requires lots of hacks to work, and even <div>s are problematic, for Outlooks. Background images are also very tricky (there are plenty of answers on SO about these things individually).
Nobody knows all the spam rules, because otherwise people would subvert them, however, having so many links at the bottom of your message could easily be considered spammy. It's also risky because it's not normal. So I would advise against this method.
You will want to produce a HTML table, with <img>s (or just one image). However, best practice is to write out text in HTML, rather than have it in the image. I can't see the image so I can't give you sample code, other than something generic for a scalable image:
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="#">
<img src="https://via.placeholder.com/600x200" width="600" style="max-width:100%;height:auto;" />
</a>
</td>
</tr>
</table>
</body>
Related
So I have an ambitious idea on something I want to do specifically and want to know the best way to carry it out or if it's even possible.
I want it so when I hover over one of the tabs it plays a gif animation (like some arrow or something) once then leaves it in that last frame (so it doesn't continuously loop then is clickable.
I doubt my code will be any help at all but I'll leave it here anyway (I know it's messy and that I should fix it but I'm sorta new to this.)
<!DOCTYPE html>
<html lang="en-US">
<html>
<style>
head {
background-color: white;
}
span.mainbar {
display: inline-block;
margin-left:10px;
margin-top:3px;
}
span.text {
display: inline-block;
float:right;
margin-right:25px;
margin-top: 27px;
}
span.bar
{
display: inline-block;
float:right;
margin-right:25px;
margin-top: 20px;
}
span.facebook {
display: inline-block;
float:right;
margin-right:30px;
margin-top: 22px;
}
span.instagram{
display: inline-block;
float:right;
margin-right:22px;
margin-top: 22px;
}
span.twitter{
display: inline-block;
float:right;
margin-right:30px;
margin-top: 16px;
}
</style>
<head>
<title> The Project </title>
<link rel="shortcut icon" href="images/favicon.ico"/>
<span class="mainbar">
<a href="Homepage.html">
<img src="images/Temp Text Logo.png" alt="Main Logo" style=";border:0;">
</a>
</span>
<Span class="twitter">
<a href="https://www.twitter.com"target="_blank">
<img src="images/twitter.png" alt="twitter page"
style="width:50px;height50px:;border:0;">
</a>
</span>
<Span class="instagram">
<a href="https://www.instagram.com"target="_blank">
<img src="images/instagram.png" alt="instagram page" style=";border:0;">
</a>
</span>
<Span class="facebook">
<a href="https://www.facebook.com"target="_blank">
<img src="images/facebook.png" alt="facebook page" style=";border:0;">
</a>
</span>
<span class="bar">
<img src="images/bar.png" alt="bar" style=";border:0;">
</a>
</span>
<span class="text">
<a href="about.html">
<img src="images/about.png" alt="about" style=";border:0;">
</a>
</span>
<span class="text">
<a href="shop.html">
<img src="images/shop.png" alt="shop" style=";border:0;">
</a>
</span>
<span class="text">
<a href="Homepage.html">
<img src="images/home.png" alt="Home" style=";border:0;">
</a>
</span>
</head>
<body>
<hr>
</hr>
</body>
</html>
Tab example pic
All you need to do to make an image clickable is to wrap the image in a hyperlink parent:
<a href="http://www.google.com">
<img src="http://placehold.it/100">
</a>
As for only allowing the link to be clickable after the animation has played, it would theoretically be possible through JavaScript, but I wouldn't recommend that. The only way to do it would be with a timeOut, and you would possibly encounter a state where the timing gets out of sync.
Instead of this, I would recommend using a sprite map instead of a GIF.
Hope this helps! :)
You can't control animated gif without javascript/jquery control.
With 2 image, one static and one animated and control the start of animation with jquery, like this solution: Stop a gif animation onload, on mouseover start the activation
Using jquery plugin like this: http://rubentd.com/gifplayer/
This is my code:
<a target="_blank" href="http://weknowyourdreams.com">Family</a>
<img src="http://weknowyourdreams.com/images/family/family-02.jpg" height="140" width="300">
</a>
<a target="_blank" href="http://chess.com">Chess</a>
<img height="140" width="300" alt="Chess game" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/ChessSet.jpg/647px-ChessSet.jpg">
</a>
<a target="_blank" href="http://okcstorm.com/index.php/basketball/">Basketball court</a>
<img src="http://okcstorm.com/wp-content/uploads/2016/12/cropped-Basketball-2-1.jpg" width="300" height="200">
What I want to achieve is to link them each to the site that I've got them from. But, the problem is the phone in the code avengers keep telling me this error:
Uncaught TypeError: Cannot read property 'ClearPromptText' of null
I don't know what that means, please help.
.image-f{
float:left;
display:block;
margin-right:10px;
width:300px;
}
.image-f img{
float:left;
width:100%;
height:140;
}
<a target="_blank" class="image-f" href="http://weknowyourdreams.com/" >Family
<img src="http://weknowyourdreams.com/images/family/family-02.jpg" >
</a>
<a target="_blank" class="image-f" href="http://chess.com">Chess
<img alt="Chess game" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/ChessSet.jpg/647px-ChessSet.jpg">
</a>
<a target="_blank" class="image-f" href="http://okcstorm.com/index.php/basketball/">Basketball court
<img src="http://okcstorm.com/wp-content/uploads/2016/12/cropped-Basketball-2-1.jpg" ></a>
I have a question on jquery.mobile. I can show the 2 photo on my mobile. But it has interspaced between photo1 and photo2.
Could you give any ideas , I don't want to a space between objects.
many thanks.
css
.ui-grid-b img {
width : 50%;
height : 52vw;
}
html
<div class="ui-grid-b">
<a href="xxx.htm">
<img alt="alt..." src="img/image.jpg" />
</a>
<a href="xxx.htm">
<img alt="alt..." src="img/image.jpg" />
</a>
<a href="xxx.htm">
<img alt="alt..." src="img/image.jpg" />
</a>
<a href="xxx.htm">
<img alt="alt..." src="img/image.jpg" />
</a>
</div>
.ui-grid-b {
line-height : 0;
}
For some reason I have a tiny horizontal line to the bottom right of each of my social media images I've placed on a header on my website. I've tried to find an explanation on why they appear and more importantly, how to hide them. Does anyone know how to remove them? Thank you very much.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title> Chilun</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style type="text/css">
#font-face /* support for browsers & IE v10 onwards*/
{font-family:homefont; src: url("font.ttf");}
{font-family:headerfont; src: url("playball.ttf");}
body {background:url('img/mybackground3.jpg') no-repeat center center fixed;}
<!-- Make Header Sticky -->
#header_container {background:#00E5EE; border:0px solid #666; height:70px; left:0; position:fixed; width:100%; top:0;}
#header{padding: 0.3em 0; border-bottom: 0px; overflow: hidden; zoom: 1; line-height:0px; margin:0 auto; width:940px; text-align:right;display:inline-block; float:right;vertical-align:bottom;}
#wrapper{width:900px;margin:0 auto;}
a{color:#444;}
.logo{margin-left:600px;margin-top:100px;background:#fff;padding:10px;}
.bigtitle{font-family: homefont; font-size:120px; text-align:center; margin-top:200px;}
.header{top:100%; left:50%; font-family: headerfont; font-size:20px; color:#FFFFFF; font-style:italic; padding-top:0px; padding-bottom:0px; padding-right:20px; padding-left:0px;}
</style>
</head>
<body>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header"><p class="header"> Follow me on:
<a href="https://www.facebook.com/chilunliuTheBOSSE"><img src="/img/facebook-lnk.gif" alt="View my Facebook Profile" width="40" height="40" border="0">
<a href="https://plus.google.com/u/0/+chilunliu/posts/p/pub"><img src="/img/googleplus-lnk.gif" alt="View my Google Plus Profile" width="40" height="40" border="0">
<a style="margin:0; href="http://www.linkedin.com/pub/chilun-liu/1b/297/416"; View my Linkedin Profile </a><img src="/img/linkedin-lnk.gif" width="40" height="40">
<a style="margin:0; href=""; Email me </a><img src="/img/email-lnk.gif" width="40" height="40">
<a style="margin:0; href="http://www.youtube.com/user/chilunliu"; View my Youtube Channel</a><img src="/img/youtube-lnk.gif" width="40" height="40">
</div>
</p>
</div>
<!-- END: Sticky Header -->
<div id="wrapper">
<h2 class="bigtitle">
<p>
Chilun
Liu
</p>
</h2>
</div>
</body>
</html>
You are missing all of the </a> closing tags...
<a style="margin:0;" href="http://www.linkedin.com/pub/chilun-liu/1b/297/416"> View my Linkedin Profile</a> <img src="/img/linkedin-lnk.gif" width="40" height="40">
<a style="margin:0;" href=""> Email me </a><img src="/img/email-lnk.gif" width="40" height="40">
<a style="margin:0;" href="http://www.youtube.com/user/chilunliu"> View my Youtube Channel</a><img src="/img/youtube-lnk.gif" width="40" height="40">
this is how your a tags should be closed
Next what all the others says about closing the <a> tags with </a>. You need to set this in your css. I had the same problem and text-decoration: none; was the solution for me.
Css
a { text-decoration: none};
Check the changed tag.
<a style="margin:0;" href="http://www.linkedin.com/pub/chilun-liu/1b/297/416"> View my Linkedin Profile </a>
<img src="/img/linkedin-lnk.gif" width="40" height="40">
<a style="margin:0;" href=""> Email me </a>
<img src="/img/email-lnk.gif" width="40" height="40">
<a style="margin:0;" href="http://www.youtube.com/user/chilunliu"> View my Youtube Channel</a><img src="/img/youtube-lnk.gif" width="40" height="40">
Below is the result of the tag and there is no underline :)
View my Linkedin Profile
Email me
View my Youtube Channel
Hope this helps.
<a href="service.html">
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Sea Freight.png"/>
</a>
<a href="airfreight.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Air Freight.png">
</a>
<a href="projectcargo.html">
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Project Cargo.png">
</a>
<br/>
<a href="customclearance.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Custom Clearance.png">
</a>
<a href="transportation.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Domestic Transportation.png">
</a>
<a href="thirdparty.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Warehousing and Distribution.png">
</a>
</br>
<a href="coastalcargo.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Coastal Cargo.png">
</a>
<a href="veseelchartering.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Vessel Chertring.png">
</a>
</br>
I have create button by using img tag within anchor.
why I am getting small dash at right corner??
thanks in advance
There is a default text-decoration:underline associated with an anchor <a> tag. Since there is a space in the <a> </a>, that underline is the line you see.
Use text-decoration:none on <a>, that should solve it.
a {
text-decoration: none;
}
This appears to happen when:
the closing anchor tag is on a separate line from the rest of the element
AND the visible text of the anchor is an image
AND you have multiple images on the same line
and also the anchor/image is not the last item in the horizontal series
In the following example, you will not see dashes after the third and fifth images, but the other images will show a dash to the right of the image/link:
<p>
<a href="#">
<img src="image.jpg" alt="Test 1" />
</a>
<a href="#"><img src="image.jpg" alt="Test 2" />
</a>
<a href="#">
<img src="image.jpg" alt="Test 3" /></a>
<a href="#"><img src="image.jpg" alt="Test 4" />
</a>
<a href="#"><img src="image.jpg" alt="Test 5" />
</a>
</p>
I can't find any information to say if this is a violation of an HTML rule regarding splitting elements across multiple lines. I replicated the same issue in Chrome, Firefox and IE 11.
I can only guess that a space is being added after the image, since the closing tag is on a separate line. And this relates to the answers given above - the space is being automatically styled with an underline. But I don't know why the space is added after an image but not after text, or why this only happens when the images are on the same line.
<a> is an inline element. If you leave space between enclosed elements and the </a> element, it will be formatted automatically which is with an underscore.