I'm trying to get a link to a page working correctly when an image is clicked. On this jsFiddle you'll see three circular images. When the mouse is hovered over any of them, a background shadow image is rendered. When you click on the 'law firms' image, a short HTML page with some text should be displayed. What happens is that the link to the law firm text is rendered not as the image itself, but as a '>' character - see screenshot below.
Can anyone guide me how to make the image act as the link, please? Also ensuring that the background image continues to be centred over the law firms image when the mouse is hovered over it.
CSS:
.center {text-align: center;}
#sfimages {padding:15px;}
#sfimages:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
background-position:center;
}
HTML:
<body>
<table style="width: 100%">
<tr>
<td class="center">
<div id="sfimages">
<a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG"> >
<object type="image/svg+xml"
data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
<img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
</object>
</a>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
<img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
</object>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
<img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
</object>
</div>
</td>
</tr>
</table>
Sorry for taking a while, its been a busy day for me and I just had enough time to come back around to your question. Here is what I recommend. It looks like the code you are working with is produced from inkscape? When it runs the source code is a nuts, especially inside the object area. But have no fear if you want links. Simply make the following slight adjustments, and you should be on your way with links!
The CSS:
.center {
text-align: center;
}
#sfimages {
padding:15px;
position:relative;
width:380px;
height:273px;
}
#sfimages:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
background-position:center;
}
#ext-site {
display:block;
width:380px;
height:273px;
position:absolute;
z-index:9999;
}
The HTML:
<table style="width: 100%">
<tr>
<td class="center">
<div id="sfimages">
<a id="ext-site" href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG"></a>
<object type="image/svg+xml"
data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
<img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
</object>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
<img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
</object>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
<img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
</object>
</div>
</td>
</tr>
</table>
This is classic trick, involving an asbolute positioned anchor link, inside of a relative display block element. As long as the anchor stretches to the size of it's parent's size, it acts as an invisible button on top of the entire section.
Check out my new Fiddle
There was spare character:
please check following code (in a comment there is a link to the full code):
<table style="width: 100%">
<tr>
<td class="center">
<div id="sfimages">
<a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG">
<object type="image/svg+xml"
data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
<img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
</object>
</a>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
<img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
</object>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
<img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
</object>
</div>
</td>
</tr>
</table>
Line 6:
<a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG"> >
Remove the extra closing bracket.
Related
I'm trying to implement this code to preload images, but it isn't working.
Add CSS:
div#preload { display: none; }
In the footer within the </body> tag:
<div id="preload">
<img src="http://gearenergy.com/wp-content/uploads/2018/04/Home-Banner-final.jpg" width="1140px" height="500px" alt="Home-Banner_01" />
<img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background.jpg" width="550px" height="400px" alt="PresentationBG_02" />
<img src="http://gearenergy.com/wp-content/uploads/2018/07/orange-color-overlay.png" width="600px" height="600px" alt="FinanceReportBG_03" />
<img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background-blue.jpg" width="550" height="400" alt="LatestNewsBG_04" />
</div>
Obviously I've replaced the HTML and repointed to the images, but it's still not working.
Personally I would use JavaScript in this case. But if you want only CSS you can preload all images in a div tag which is positioned in hidden part of window like follows:
#preload
{
position:absolute;
top:-9999px;
left:-9999px;
}
<div id="preload">
<img src="http://gearenergy.com/wp-content/uploads/2018/04/Home-Banner-final.jpg" width="1140px" height="500px" alt="Home-Banner_01" />
<img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background.jpg" width="550px" height="400px" alt="PresentationBG_02" />
<img src="http://gearenergy.com/wp-content/uploads/2018/07/orange-color-overlay.png" width="600px" height="600px" alt="FinanceReportBG_03" />
<img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background-blue.jpg" width="550" height="400" alt="LatestNewsBG_04" />
</div>
Having trouble figuring out how to write HTML code that will work on both mobile and desktop email clients. Right now its working well on desktop, but whenever I open it in mobile it renders oddly - see screenshot below.
I've got it into the Apple Mail signature and it looks perfect when I send it and open via desktop Apple or Gmail.
The main issue is that when it the email is opened on mobile, it has each of the columns (separated through tags) on a different line. When I flip my phone to horizontal, it automatically readjusts... Does this mean the float:left property isn't working on mobile? How would I adjust this? Do I need to specify width? Not sure
I've tried making the whole thing smaller which hasn't worked. I purposely chose to make it 600px width because I saw another signature that resized automatically to fit mobile that was 600px.
When I open in Google Chrome and use the toggle device, it reformats perfectly to fit on a mobile screen.
Thanks in advance for the help!
Example of what it looks like on mobile
Here's the code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Email Signature</title>
</head>
<body>
<div id="container">
<div class="column" style="float:left; margin:0px; font-size:0px;">
<img class="profile" src="http://hamptonyachts.com/uploads/Profile.png" alt="">
</div>
<div class="column" style="float:left; margin:0px; font-size:0px;">
<img class="name" src="http://hamptonyachts.com/uploads/HYG_Robert_Fiala.png" alt="" style="vertical-align:top">
<p class="contact" style="min-height: 60px; background-color: #06243f; font-family: Roboto; color: #FFFFFF; font-size: 15px; font-weight: 400; line-height: 18px; padding-left: 10px; padding-top: 10px; margin: 0px;">
MOBILE: 425.765.7850 <br> OFFICE: 206.623.5200 <br>
<span style=" font-size: 13px;">ROBERT#HAMPTONYACHTGROUP.COM</span></p>
</div>
<div class="column" style="float:left; margin:0px; font-size:0px;">
<div class="news">
<img class="news" src="http://hamptonyachts.com/uploads/Rendezvous.png" alt="">
</div>
<div class="social">
<img src="http://hamptonyachts.com/uploads/Facebook1.png" alt="" style="vertical-align:top">
<img src="http://hamptonyachts.com/uploads/Instagram1.png" alt="" style="vertical-align:top">
<img src="http://hamptonyachts.com/uploads/Web.png" alt="" style="vertical-align:top">
</div>
</div>
</div>
</body>
</html>
I don't suggest divs in email. They don't work with Outlook. Your divs were not configured in the correct manner, so they did not behave as you wanted. For instance, you didn't declare a width on any of your divs or images.
Your social media graphics don't line up in a table cell 226px wide, which is one of the reasons things were not lining up in your signature. I'm not spending time editing them for you, I just made them fit width-wise so that's why they will look wonky.
I tested this in Litmus and it works for Apple, IOS, Android, Gmail, Outlook and others. I turned the background of the table red to show what you still need to fix. You should fill in your ALT information as well.
Try this instead:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Email Signature</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#ff0000">
<tr valign="top">
<td rowspan="2" width="115">
<img class="profile" src="http://hamptonyachts.com/uploads/Profile.png" width="115" height="160" alt="Hampton">
</td>
<td width="259"><img class="name" src="http://hamptonyachts.com/uploads/HYG_Robert_Fiala.png" width="259" height="90" alt="" style="vertical-align:top">
</td>
<td width="226"><img src="http://hamptonyachts.com/uploads/Rendezvous.png" width="226" height="114" alt="">
</td>
</tr>
<tr valign="top">
<td style="font-size: 12px;">MOBILE: 425.765.7850 <br />
OFFICE: 206.623.5200 <br />
ROBERT#HAMPTONYACHTGROUP.COM</td>
<td><img src="http://hamptonyachts.com/uploads/Facebook1.png" width="90" height="46" alt="" style="display:inline-block;" />
<img src="http://hamptonyachts.com/uploads/Instagram1.png" width="43" height="46" alt="" style="display:inline-block;" />
<img src="http://hamptonyachts.com/uploads/Web.png" width="70" height="46" alt="" style="display:inline-block;" /></td>
</tr>
</table>
</body>
</html>
Good luck with the yacht sales.
Using this html code:
<div class="container-fluid" >
<div class="row">
<div class="col-md-3" >
<table id="Table" width="100%">
<tr>
<td align="left" valign="middle" >
<img src="MyImage" width="220" height="200">
</td>
</tr>
<tr>
<td width="251" height="400" align="left" valign="top" >
<p style="margin-top: 20px; margin-bottom: 0px;">
<img src="MyImage2" width="220" height="200">
</p>
</td>
</tr>
</table>
</div>
<div class="col-md-9 " >
<form id="form1" class="form-horizontal" runat="server" >
<div " align="left" >
Some other HTML stuff
</div>
</form>
</div>
</div>
</div>
It works fine, however, I need to add a left margin of 50px before MyImage2.
So I update my code this way.
<div class="container-fluid" >
<div class="row">
<div class="col-md-3" >
<table id="Table" width="100%">
<tr>
<td align="left" valign="middle" >
<img src="MyImage" width="220" height="200">
</td>
</tr>
<tr>
<td width="251" height="400" align="left" valign="top" style="margin-left: 50px;">
<!-----------------50 px margin added------------->
<p style="margin-top: 20px; margin-bottom: 0px;margin-left: 50px;">
<img src="MyImage2" width="220" height="200">
</p>
</td>
</tr>
</table>
</div>
<div class="col-md-9 " >
<form id="form1" class="form-horizontal" runat="server" >
<div " align="left" >
Some other HTML stuff
</div>
</form>
</div>
</div>
</div>
With this code I have a responsivity issue.
If I reduce the window size, the "other HTML stuff" displayed on the right frame overwrites the image2 of 50 pixels.
How can I have the right frame not to overwrite the right part of my image2?
I tried to increase the width of the td and / or table tage, it did not work for me. So hopefully someone can help me there.
EDIT:
you can check the issue on this link:
http://www.bootply.com/t1hF1cHuD2
reduce the window to have right frame to overwrite the left frame (which is what I want not to happen)
Try not to use inline styles as sometimes it can cause problems, I suggest making a section in the header and try putting margin-left:50px !important; and see if that works. Also you could use position:relative; and using top left right bottom properties to move it where you want.
The layout using columns with a width percentage (25%). So if you do not want to change the logic of the layout, the simplest solution is to add the same margin to the right content to always stay away from the image.
<div align="left" style="margin-left:50px;" >
Here the example. With the colors you can see what happens to your columns (and contents) in responsive: JS Fiddle link
I want to show this four images without any margin. How to do this?
Each A,B,C,D look like one image.
A
B
C
D
<div align="center">
<img src="a.png">
<br/>
<img src="b.png">
<br/>
<img src="c.png">
<br/>
<img src="d.png">
</div>
I tried css margin=0 and style padding =0 but it is not working.
Update---
<img id="ImgEmotion" src="a.png" width="40" border="0">
<img src="b.png" width="20" height="20" border="0">
If I use css, I know there are no margin.
If I use #no_margin, how can I apply to img tag? Also I need the 'id='ImgEmotion'.
CSS:
img
{
margin:0;
display:block
}
HTML:
<div align="center">
<img src="a.png">
<img src="b.png">
<img src="c.png">
<img src="d.png">
</div>
JSFIDDLE
I'd like to place an image under my iframe, but i've pieced together some code and it doesn't appear to be exactly right. The iframe contains text and has a transparent background. Can you help me out? thanks,
<td width="216" style="position: relative;">
<img src="http://southwestarkansasradio.com/images/onair995.jpg"></a><br>
<img src="http://southwestarkansasradio.com/images/playerbackground.jpg" style="z-index: -1"/>
<div style="absolute;left:0px;top:0px;font-size: 32px;display: none">
<iframe name="I1" width="316" height="216" src="http://southwestarkansasradio.com /NowPlaying.html" border="0" frameborder="0" allowTransparency="true">
Your browser does not support inline frames.</iframe>
</div>
</td>
<img src="http://southwestarkansasradio.com/images/onair995.jpg"></a><br>
<img src="http://southwestarkansasradio.com/images/playerbackground.jpg" style="z-index: -1"/>
<div style="position:absolute;left:0px;top:0px;font-size: 32px">
<iframe width="316" height="216" src="http://southwestarkansasradio.com/NowPlaying.html" border="0" frameborder="0" allowTransparency="true">
Your browser does not support inline frames.</iframe>
</div>
You have 'display:none' on the div tag that contains the iframe. I tested the above code and it works as you have explained is should.