How to mesh two pictures together - html

I did ask a similar question not too long ago, but I found some new information on the topic and I think that I can explain a bit better now.
I have two puzzle pieces, both are transparent .pngs (except the actual pieces):
Here's the code that I'm using to display my two pieces right now -
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://i.imgur.com/UPYw2i4.png">
</td>
<td>
<img src="http://i.imgur.com/7rkQ0hz.png">
</td>
</tr>
</table>
</div>
The images are beside each other, but not interlocking like they should. I know that this is supposed to happen, because who wants overlapping pictures. So my question is, how do I have them overlap?
The puzzle isn't meant to be built, it's meant to be pre-built and the pieces appear at different times using opacity, if that makes any sense.
Any direction would be awesome, as I'm new to this (having a blast learning though).

Here is an example of a "fancier" solution using the Jquery UI draggable widget:
http://plnkr.co/edit/BYDyqjBLUOXFcuPvqWvx?p=preview
html
<head>
<meta charset="utf-8" />
<title><!-- Title here --></title>
<link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="script.js"></script>
</head>
<body>
<img src="http://i.imgur.com/UPYw2i4.png" class="draggable">
<img src="http://i.imgur.com/7rkQ0hz.png" class="draggable">
</body>
</html>
JS
//js
$(function(){
$( ".draggable" ).draggable();
});
This allows you to grab and move each piece with the mouse. Had to use plnkr...because like you, i could not figure out for the life of me how to save a JSFiddle.

You cannot do this with a tableset. The columns won't overlap properly. Even if you could pull it off, you can't expect it to work across all browsers.
You could easily accomplish this with DIVs and CSS. There you have complete control over placement.

I was able to produce the desired result with some CSS Magic
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://i.imgur.com/UPYw2i4.png">
</td>
<td>
<img src="http://i.imgur.com/7rkQ0hz.png" class="merge">
</td>
</tr>
</table>
</div>
</body>
CSS
.merge
{
position:relative;
right:92px;
top:4px;
}

Related

How can I remove all white space surrounding HTML email?

I've got the following html and css to be used as a template for generating e-mail messages.
But when it comes to receiving the e-mail on my postal programme I have a few pixels of white margins every side.
Is it possible to remove it while using divs or is there another way to avoid these annoying white spaces?
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Lack of title</title>
<link href='https://fonts.googleapis.com/css?family=PT+Mono&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
body, html {
margin: 0!important;
padding: 0!important;
background-color: gray;
}
#nav {
height: 60px;
width: 100%;
background-color: #0078d7;
}
#content {
width: 1160px;
height: 800px;
background-color: #6f6767;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="nav">
{title}
</div>
<div id="content">
{content}
</div>
</body>
Different e-mail clients render HTML e-mails differently. But there are a few basic practices you should adhere to (see references below).
In looking at your code, there's a good chance your problem stems from the use of embedded styles. Here's what MailChimp has to say about that:
Because browser-based email applications, such as Gmail, strip out
<head> and <body> tags by default, always use inline CSS over embedded
CSS.
So, the padding: 0 and margin: 0 in your head section are possibly being ignored or overridden.
Designing HTML e-mails is not like designing HTML websites. There's a huge technology gap between e-mail clients and web browsers. It's as if browsers keep evolving, but e-mail clients are stuck in 1998.
In the world of HTML e-mail, embedded and external styles are bad, inline styles are good, javascript is bad, tables for layout are good. In this world, old-school coding methods are alive and well.
More information:
CSS in HTML Email
Best practices for styling HTML emails
Best Practices & Considerations when writing HTML Emails
Because of the way e-mail clients render HTML - and many of them render the same HTML differently, you're better off building your e-mail with tables. Tables seem to be recognised across all clients.
Also, always use inline styles as internal and external stylesheets can cause problems. This code seems to get rid of whitespace accross most clients:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Lack of title</title>
<link href='https://fonts.googleapis.com/css?family=PT+Mono&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
</style>
</head>
<body>
<div>
<table width="100%" bgcolor="#333333" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<table width="100%" height="60" bgcolor="#0078d7" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="60">
{nav}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="1160" height="800" bgcolor="#6f6767" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="1160" height="800">
{content}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>

New coder-- frstrated in recreating Photoshop image [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm trying to setup a new email signature for Apple mail using Adobe Photoshop--> Dreamweaver
Please find attached:
the way I WANT my signature to look (the gridded one)
the way my signature currently looks
I've been working on this for 6 hours. I can't get:
the social media buttons to align directly under the left border of the square part of the logo
the phone numbers and social media buttons to exist on the same plane on the bottom
Here is my code as it currently stands:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>BPM Email Signature</title>
</head>
<body>
<table width="600" border="0">
<tbody>
<tr>
<td>
</td><img src="http://s19.postimg.org/lj4nfr0cj/BPM_Email_Siganture_1_03.jpg" />
</td>
<td><img src="http://s19.postimg.org/ia40eige7/bpmcontact_info_17.jpg" width="150" /><td><table width="600" border="0"> <tbody <td> <img src="http://s19.postimg.org/hdyc7kry7/BPM_Email_Siganture_1_07.jpg""/> <img src="http://s19.postimg.org/ng5yy2ge7/BPM_Email_Siganture_1_09.jpg"/> <img src="http://s19.postimg.org/kncre1g1r/BPM_Email_Siganture_1_11.jpg"/> <img src="http://s19.postimg.org/fsj2frhq7/BPM_Email_Siganture_1_13.jpg"/> <img src="http://s19.postimg.org/jfytltpxb/BPM_Email_Siganture_1_15.jpg"/></td>
Something like this should do it;
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>BPM Email Signature</title>
</head>
<body>
<table width="600" border="0">
<tbody>
<tr>
<img src="http://s19.postimg.org/lj4nfr0cj/BPM_Email_Siganture_1_03.jpg" />
</td>
<td><img src="http://s19.postimg.org/ia40eige7/bpmcontact_info_17.jpg" style="width: 150px; margin-left:-5px; margin-right: 45px; margin-top: 15px;" /><td>
<table width="600" border="0">
<td>
<img src="http://s19.postimg.org/hdyc7kry7/BPM_Email_Siganture_1_07.jpg"/>
<img src="http://s19.postimg.org/ng5yy2ge7/BPM_Email_Siganture_1_09.jpg"/>
<img src="http://s19.postimg.org/kncre1g1r/BPM_Email_Siganture_1_11.jpg"/>
<img src="http://s19.postimg.org/fsj2frhq7/BPM_Email_Siganture_1_13.jpg"/>
<img src="http://s19.postimg.org/jfytltpxb/BPM_Email_Siganture_1_15.jpg"/>
</td>
</html>
Where you see the "###" in the...
<a href="###" target="blank">
replace with the appropriate link. :)

Google font acting up?

So this is my syntax (just a clip)
<link href='http://fonts.googleapis.com/css?family=Exo' rel='stylesheet' type='text/css'>
<div style="background-color:black;width:auto">
<div style="width:1000px; margin:0 auto;">
<table style="width:1000px;">
<td><p align="right"><h1 style="color:white;font-family:Exo"> When strategy meets chance, champions born</h1></p></td>
<tr>
</table>
</div>
</div>
So, nothing should go wrong right?
But here's a funny thing when I block it.
It shows the right text!
WHY?
(And as you can see, not all text is effected)
You set style about:
<link href="//fonts.googleapis.com/css?family=Exo:100italic,100,200italic,200,300italic,300,400italic,400,500italic,500,600italic,600,700italic,700,800italic,800,900italic,900" rel="stylesheet" type="text/css">

Export HTML table to XLS and retain formatting

I would like to export a HTML table to XLS and at the same time retain all formatting.
The following code seems to be working, except that the hilight is lost on export. How do I keep it in place?
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id='data'>
<table border='1'>
<tr>
<td>
<strong>Greeting</strong>
</td>
<td>
<strong>Message</strong>
</td>
</tr>
<tr>
<td>
Hello
</td>
<td>
World. <mark>I am hilighted!</mark>
</td>
</tr>
</table>
</div>
<script type='text/javascript'>
$(document).ready(function()
{
$("#btnExport").click(function(e)
{
var path = 'data:application/vnd.ms-excel,' + encodeURIComponent($('#data').html());
window.open(path);
e.preventDefault();
});
});
</script>
<input type='button' id='btnExport' value='Export as XLS'>
</body>
To the best of my knowledge, only inline CSS on the table elements will export properly.
So, if you had style="background-color: yellow" on a <td>, the export file would have a yellow cell, but I don't believe spans, marks or inline divs carry their CSS through at all.

not able to display in HTML while using FireFox

I am not able to show an image in Firefox when using the img tag. In IE it's working as expected. Why is this?
<html>
<head>
<title>my PAGE</title>
</head>
<body>
<table height="100%" width="100%">
<tr>
<td>
<img border="0" src="D:\Pictures\sam.JPG" alt="wiki" width="500" height="1"/>
</td>
</tr>
</table>
</body>
</html>
The right way of referencing an image on local disk would be
file:///D:/Pictures/sam.JPG
But you will never see the image anyway - you're setting its height="1"