My code is:
<span style="text-align:center; width:80px; display:inline-block;">
<a href="#" target="_blank" style="text-decoration:none;">
img here
<span style="font-size: 13px; color: #301985; display:block; top:5px; position:relative;">content</span>
</a>
</span>
<span style="text-align:center; width:80px; display:inline-block;">
<a href="#" target="_blank" style="text-decoration:none;">
img here
<span style="font-size: 13px; color: #301985; display:block; top:5px; position:relative;">content</span>
</a>
</span>
Problem is:
It is working good in all mail. In outlook 2007 it displayed like this image.
I want content is displayed the below the image. But it is not working in outlook 2007.
I found this url https://www.campaignmonitor.com/css/
Display, float property are not working on outlook 2007. Any other solution to acheive my design?
use <div> in place of <span> I hope it will help...
Related
I am trying to add rounded corners to an image, but it does not seem to take effect when I do. I am not sure if I am putting the border-radius in the right location. Would someone be able to offer any advice by chance?
<p style="margin-bottom:0px">
<a href="Unpublisthed Website" target="_blank"><img border="0" src="Unpublished Photo" alt="Photo" width="124" style="max-width:124px; height:auto; border:0 border-radius:20px">
<br><br></a>
<span style="FONT-SIZE: 7pt; line-height: .8"> Click picture to view<br></span>
<span style="FONT-SIZE: 7pt; line-height: 1.6"> introduction video.</span>
</p>
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/
I have created an email signature in HTML and would like to use it in Outlook 2010. However, there are few things I am getting stumped on.
Some preface info:
(I included my logo, and four social media icons with links in my signature. I just uploaded the images to dropbox and linked to them in my code)
My code opened fine and looked as it should it my browser, so I saved the code to the signatures folder. I went to compose a new message and tried inserting my signature, but no dice. Outlook recognizes that the signature exists in the signature folder, but when I click on it, it isn't included in the message.
I read here that Outlook needs 3 different files (in .htm, .txt and .rtf formats). in order for a signature to work. But I'm not convinced that this is the case. To test this theory, I went to htmlsig.com and created a signature. It was just a simple html document. I downloaded the signature and saved it to the signature folder. I then opened Outlook, created a new message, and was able to insert that signature just fine.
I opened up the signature folder to see what kinds of files were in there, and the only file in there was a single Chrome HTML document.
My question:
How can I add my html file to be used as an email signature?
In case you were curious, here is my source code: (Its a work in progress)
<!DOCTYPE html>
<html>
<body>
<p style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 12px; margin-bottom: 10px;">
<img src="https://dl.dropboxusercontent.com/s/ccjrncxekbz4k1p/Transparent%20logo.jpg?dl=0" alt="MidWest Quality Gloves" border="0" class="sig-logo" height="115" width="133">
</p>
<p class="social-list" style="font-size: 0px; line-height: 0; font-family: Helvetica, Arial, sans-serif;">
##facebook##
<a style="text-decoration: none; display: inline;" class="social signature_facebook-target sig-hide" href="https://www.facebook.com/MidwestGlove/">
<img width="33" style="margin-bottom:2px; border:none; display:inline;" height="33" data-filename="facebook.jpg" src="https://dl.dropboxusercontent.com/s/42pre6zyk40xa98/Facebook.jpg?dl=0" alt="Facebook">
</a>
<span style="white-space: nowrap; display: inline;" class="signature_facebook-sep social-sep">
</span>
##instagram##
<a style="text-decoration: none; display: inline;" class="social signature_instagram-target sig-hide" href="https://www.instagram.com/midwestglove/">
<img width="33" style="margin-bottom:2px; border:none; display:inline;" height="33" data-filename="instagram.jpg" src="https://dl.dropboxusercontent.com/s/dmrbysqop83moq8/instagram.jpg?dl=0" alt="Instagram">
</a>
<span style="white-space: nowrap; display: inline;" class="signature_instagram-sep social-sep">
</span>
##pinterest##
<a style="display: inline; text-decoration: none;" class="social signature_pinterest-target sig-hide" href="https://www.pinterest.com/mwglove/">
<img width="33" style="margin-bottom:2px; border:none; display:inline;" height="33" data-filename="pinterest.jpg" src="https://dl.dropboxusercontent.com/s/9ejjex9wzksbvy3/pinterest.jpg?dl=0" alt="Pinterest">
</a>
<span style="white-space: nowrap; display: inline;" class="signature_pinterest-sep social-sep">
</span>
##LinkedIn##
<a style="text-decoration: none; display: inline;" class="social signature_linkedin-target sig-hide" href="https://www.linkedin.com/company/midwest-quality-gloves-inc">
<img width="33" style="margin-bottom:2px; border:none; display:inline;" height="33" data-filename="linkedin.jpg" src="https://dl.dropboxusercontent.com/s/b6ceobojyt3zjle/linkedin.jpg?dl=0" alt="linkedin">
</a>
<span style="white-space: nowrap; display: inline;" class="signature_linkedin-sep social-sep">
</span>
</body>
</html>
Back in the time when i used outlook 2010 i remember that i had to go to the Signatures panel and create a new one with some text. Then went to:
C:\Users\MYNAME\AppData\Roaming\Microsoft\Signatures
Edited the .htm signature file that was created and replaced the content with my html code, saved and restarted outlook. Can't really explain for certain why and how.
I have made a page that grants me access to a lot of nice websites of the web, so I don't have to type in all the links.
I want to use this page for my site www.x3mismusic.eu for a index of all the songs, but since there is no place for a home button, I'd like to make the full page clickable as a link. I made it so that whenever you use shift+x links will be disabled so that you can click trough the buttons. However even though I put a link on the background it doesn't show it and it also doesn't work.
I tried to put a link (anchor tag) around body, create a second wrap with a link and I even tried to use the JavaScript "onclick" tag in the body, but that didn't work like I wanted, because onclick makes me unable to use the button links I created.
I surfed the web for ages but couldn't find any reason or solution for why the link doesn't work. Can someone please help me with making the background clickable as a link, while being able to still activated the button links?
I am not good at formatting code in here so I'll have a jsfiddle link to the code. Here is the link:
http://jsfiddle.net/e5fm5byn/
<a href="http://jsfiddle.net/e5fm5byn/" target="_blank">because it asked me
to input code</a>
Hie there
you should not have multiple id's with same value
and now coming to your question
<html>
<head>
<style type="text/css">
.disableMenu {
pointer-events:none;
}
.x {
background-color:#000;
color:#600;
padding-left:50px;
padding-right:50px;
padding-top:5px;
padding-bottom:5px;
border:3px solid #600;
text-align:center;
float:left;
}
.x:hover {
background-color:#000;
color:#0a0;
padding-left:50px;
padding-right:50px;
padding-top:5px;
padding-bottom:5px;
border:3px solid #0a0;
text-align:center;
float:left;
}
a {
color:#fff;
text-decoration:none;
}
a:hover {
color:#b89200;
text-decoration:none;
}
body {
background:linear-gradient(to bottom right, #123264, #606);
color:#b89200;
width:100%;
height:100%;
position:absolute;
margin:0;
padding:0;
}
#wrapper {
width:100%;
height:100%;
position:absolute;
left:0%;
top:0%;
margin:0;
padding:0;
}
#wrapper2 {
width:100%;
height:100%;
position:absolute;
left:0%;
top:0%;
margin:0;
padding:0;
}
</style>
</head>
<body onkeypress="IEKeyCap()" onclick="myClickEvent(this)">
<div id="wrapper">
<span class="x">
<b>
youtubeX
</b>
</span>
</a>
<a href="http://www.lunagang.nl" target="_blank" title="lunagang">
<span class="x">
<b>
lunagang
</b>
</span>
</a>
<a href="http://www.facebook.com" target="_blank" title="facebook">
<span class="x">
<b>
facebook
</b>
</span>
</a>
<a href="http://46.21.172.161:2222/CMD_LOGIN" target="_blank" title="direct admin">
<span class="x">
<b>
direct admin
</b>
</span>
</a>
<a href="http://46.21.172.161/squirrelmail/src/login.php" target="_blank" title="squirrelmail">
<span class="x">
<b>
squirrelmail
</b>
</span>
</a>
<a href="http://www.runescape.com" target="_blank" title="runescape">
<span class="x">
<b>
runescape
</b>
</span>
</a>
<a href="http://www.google.com" target="_blank" title="google">
<span class="x">
<b>
google
</b>
</span>
</a>
<a href="http://www.x3mismusic.eu" target="_blank" title="x3mis music">
<span class="x">
<b>
x3mis music
</b>
</span>
</a>
<a href="http://www.game-vortex.eu" target="_blank" title="game-vortex">
<span class="x">
<b>
game-vortex
</b>
</span>
</a>
<a href="http://www.outlook.com" target="_blank" title="outlook">
<span class="x">
<b>
outlook
</b>
</span>
</a>
</div>
</body>
<script type="text/javascript">
function NNKeyCap(thisOne) {
if (thisOne.modifiers & Event.SHIFT_MASK) {
if (thisOne.which == 88) {
var x = document.querySelectorAll(".x");
x.forEach(function(element){
element.classList.add("disableMenu");
});
}
}
}
function IEKeyCap() {
if (window.event.shiftKey) {
if (window.event.keyCode == 88) {
var x = document.querySelector("#wrapper");
x.classList.add("disableMenu");
}
}
}
if (navigator.appName == 'Netscape') {
window.captureEvents(Event.KEYPRESS);
window.onKeyPress = NNKeyCap;
}
function myFunction() {
var x = document.querySelector("#wrapper");
x.classList.remove("disableMenu");
}
function myClickEvent(body)
{
var childDiv = body.querySelector('#wrapper');
var hasClass = childDiv.classList.contains('disableMenu');
if(hasClass)
{
document.location = 'http://www.google.com'; <!-- your background link here -->
}
}
</script>
</html>
here I removed the onkeyup="myFunction()" in body tag as it is removing the disableMenu class which is being added by IEKeyCap
and added myClickEvent which checks if #wrapper has class disableMenu
if it has disableMenu then it will be redirected to the link you assigned to document.location
Hope this helps you
<div id="nav_banner">
<br>
<a class="smoothScroll" href="#home">Home</a>
<a class="smoothScroll" href="#contactme">Email</a>
<br>
<div id="nav_banner2">
<a class="smoothScroll" href="https://twitter.com" target="_blank" title="Twitter">Twitter</a>
<a class="smoothScroll" href="https://facebook.com" target="_blank" title="fb">facebook</a>
</div>
</div>
I am trying to add a background image inside the nav_bannner section of the html page..
here is my css code to do that:
#nav_banner
{
width:100%;
position:fixed;
bottom:0px;
background:white;
left:0px;
right:0px;
height:100px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
font-size:30px;
word-spacing: 50px;
text-align: center;
font-family: Copperplate,Copperplate Gothic Light,fantasy;
background-image:url('images/shsf.png');
}
But when i load the page.. the image is not showing up... the nav banner simply has white background.
Can anyone tell me what is the issue with the code above?
First of all, check the path. The code works well for Chromium (Version 39.0.2171.65 Ubuntu 14.04).
Second, if you have a small image you can embed it directly to css by data-uri https://css-tricks.com/data-uris/