Mautic emailing - problem with spaces between images - html

I'm hoping someone will help me. I'm programming an email in Mautic and It's almost done but the main problem I have is that: between two images or image and text is a space and I don't know how to remove it. You can see the whole email code here. I would appreciate any advice how to fix this and have a good looking emailing.
/* Take care of image borders and formatting */
img {
max-width: 600px;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
table {
border-collapse: collapse !important;
}
#outlook a {
padding:0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width:100%;
}
.backgroundTable {
margin:0 auto;
padding:0;
width:100% !important;
}
table td {
border-collapse: collapse;
}
.ExternalClass * {
line-height: 115%;
}
/* General styling */
td {
font-family: Arial, sans-serif;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%;
height: 100%;
color: #000000;
font-weight: 400;
font-size: 18px;
}
h1, h2, h3, h4 {
text-align: center;
}
a {
color: #e86047;
text-decoration: none;
}
.force-full-width {
width: 100% !important;
}
.body-padding {
padding: 0 75px;
}
</style>
<style type="text/css" media="screen">
#media screen {
#import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,900);
/* Thanks Outlook 2013! */
body {
font-family: 'Source Sans Pro', 'Helvetica Neue', 'Arial', 'sans-serif' !important;
}
.w280 {
width: 280px !important;
}
}
</style>
<style type="text/css" media="only screen and (max-width: 480px)">
/* Mobile styles */
#media only screen and (max-width: 480px) {
table[class*="w320"] {
width: 320px !important;
}
td[class*="w320"] {
width: 280px !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
img[class*="w320"] {
width: 250px !important;
height: 67px !important;
}
td[class*="mobile-spacing"] {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
*[class*="mobile-hide"] {
display: none !important;
}
*[class*="mobile-br"] {
font-size: 12px !important;
}
td[class*="mobile-w20"] {
width: 20px !important;
}
img[class*="mobile-w20"] {
width: 20px !important;
}
td[class*="mobile-center"] {
text-align: center !important;
}
table[class*="w100p"] {
width: 100% !important;
}
td[class*="activate-now"] {
padding-right: 0 !important;
padding-top: 20px !important;
}
[class="mobile-block"] {
width: 100% !important;
display: block !important;
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" class=" responsejs " style="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{subject}
</title>
</head>
<body offset="0" class="body ui-sortable" style="padding: 0px; margin: 0px; display: block; background: rgb(238, 235, 235); text-size-adjust: none; -webkit-font-smoothing: antialiased; width: 100%; height: 100%; color: #000000; font-weight: 400; font-size: 18px; cursor: auto; overflow: visible;" bgcolor="#eeebeb">
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0 auto;border-collapse: collapse !important;width: 600px;" class="w320" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable">
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; padding-bottom: 0px; padding-top: 10px;" data-param-padding-bottom="0" data-param-padding-top="10">
<img src="https://marketingheroes.cz/mautic/media/images/9b5eae91041367cd39287b92bdb3d3e9.png" alt="An image" class="fr-view" style="" width="600" height="38.8594" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0px auto; width: 600px; border-collapse: collapse !important; background-color: rgb(0, 124, 220);" class="w320" cellpadding="0" cellspacing="0" width="600" bgcolor="#007cdc">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable">
<div data-slot="image" data-param-caption-color="129ac7" data-param-align="1" data-param-text-align="1" style="text-align: center; position: relative; left: 0px; top: 0px; padding-top: 0px; padding-bottom: 0px;" class="" data-param-padding-top="0" data-param-padding-bottom="0">
<img src="https://marketingheroes.cz/mautic/media/images/388aa6e28fba0481dad8773fc042558a.png" alt="An image" class="fr-view" style="width: 518px; height: 291.375px;" width="518" height="291.375" />
<div style="clear:both">
</div>
</div>
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; text-align: center;" data-param-align="1" data-param-text-align="1">
<img src="https://marketingheroes.cz/mautic/media/images/242f21a049c560ab1395166265f0c254.png" alt="An image" class="fr-view" style="width: 480px; height: 52px; display: inline-block; vertical-align: bottom; margin-right: 5px; margin-left: 5px; max-width: calc(100% - 10px);" width="480" height="52" />
<div style="clear:both">
</div>
</div>
<div data-slot="text" data-param-padding-top="" style="padding-top: 10px; position: relative; left: 0px; top: 0px; padding-bottom: 0px;" class="" data-param-padding-bottom="">
<h1>
...přiletí kdykoliv budete v nesnázích se svým marketingem na sociálních sítích!
</h1>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0px auto; width: 600px; border-collapse: collapse !important; background-color: rgb(255, 255, 255);" class="w320" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable">
<div data-slot="image" data-param-background-color="ffffff" class="" style="position: relative; left: 0px; top: 0px; padding-top: 0px; text-align: center; padding-bottom: 0px;" data-param-padding-top="0" data-param-text-align="1" data-param-align="1" data-param-padding-bottom="0">
<img src="https://marketingheroes.cz/mautic/media/images/678d01285b77fb587bdb653e5ebcd9d2.png" alt="An image" class="fr-view" style="width: 630px; height: 144.359px;" width="630" height="144.359" />
<div style="clear:both">
</div>
</div>
<div data-slot="text" data-param-padding-top="25" style="padding-top: 25px; padding-bottom: 2px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<h2>1. Neumíte si spravovat sociální sítě a výkonnostní reklamu?
</h2>
<h3>Nevadí! Ukážeme vám, co teď na sociálních sítích “letí” a nenecháme Vám to uletět...
</h3>
<h4>
<b>Domluvte si online konzultaci ZDARMA >>>
</b>
</h4>
</div>
<div data-slot="image" data-param-align="1" data-param-text-align="1" style="text-align: center; padding-bottom: 0px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<img src="https://marketingheroes.cz/mautic/media/images/491683509f0d67fda7fb2c1c13294381.gif" alt="An image" class="fr-view" style="" width="500" height="270" />
<div style="clear:both">
</div>
</div>
<div data-slot="text" data-param-padding-top="25" style="padding-top: 25px; padding-bottom: 2px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<h2>2. Sociální sítě vám již spravuje agentura, ale chcete to levněji nebo s lepším obsahem a výsledky?
</h2>
<h3>Korona Vánoce 2020 jsou za rohem a VY chcete být vidět! Vystřelte s námi ke hvězdám nebo upadněte v zapomnění...
</h3>
<h4>Chceme se připravit na Vánoce 2020
</h4>
</div>
<div data-slot="image" data-param-align="1" data-param-text-align="1" style="text-align: center; padding-bottom: 0px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<img src="https://marketingheroes.cz/mautic/media/images/8b62f9bfeb9fe97ba57cc9c7f4207294.gif" alt="An image" class="fr-view" style="" width="500" height="270" />
<div style="clear:both">
</div>
</div>
<div data-slot="text" data-param-padding-top="25" style="padding-top: 25px; padding-bottom: 2px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<h2>3. Máte skvÄ›lĂ˝ produkt, ale neumĂ­te ho “prodat” na sociálnĂ­ch sĂ­tĂ­ch?Â
</h2>
<h3>Ukažme ten vzácný poklad, který schováváte ve skladu světu…
<br />“A brzy budete hodně někde!” - Jolanda
</h3>
<h4>Chceme zaujmout a udržet si #nové zákazníky
</h4>
</div>
<div data-slot="image" data-param-align="1" data-param-text-align="1" style="text-align: center; padding-bottom: 0px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<img src="https://marketingheroes.cz/mautic/media/images/f0d774b5c8e6e5266520a3a9da2b5106.gif" alt="An image" class="fr-view" style="" width="500" height="270" />
<div style="clear:both">
</div>
</div>
<div data-slot="text" class="" style="position: relative; left: 0px; top: 0px;">
<h2>PojÄŹme se do toho spoleÄŤnÄ› zakousnout!
</h2>
</div>
<div data-slot="text" class="" style="position: relative; left: 0px; top: 0px;">
<div style="text-align: center;">„Bez strategie jsou sociální sítě bezedná studna na peníze… S tou správnou se stanou vaším zlatým dolem!“
</div>
</div>
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; padding-bottom: 0px; padding-top: 25px;" data-param-padding-bottom="0" data-param-padding-top="25">
<img src="https://marketingheroes.cz/mautic/media/images/aea055b371bb7e76cc1c7a54ef5e9236.png" alt="An image" class="fr-view" style="width: 625px; height: 141.875px;" width="625" height="141.875" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0 auto;border-collapse: collapse !important;width: 600px;" class="w320" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable" style="padding-top: 0px; padding-bottom: 0px;">
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; padding-top: 0px; padding-bottom: 0px;" data-param-padding-top="0" data-param-padding-bottom="0">
<img src="https://marketingheroes.cz/mautic/media/images/b3dc602ff2dc0093a218d69e6302d700.png" alt="An image" class="fr-view" style="" width="600" height="39.0625" />
<div style="clear:both">
</div>
</div>
<div data-slot="image" data-param-padding-bottom="0" style="padding-bottom: 0px; padding-top: 25px;" data-param-padding-top="25">
<img src="https://marketingheroes.cz/mautic/media/images/7c9dcd22c754b6c9352d5350fa34dfe4.png" alt="An image" class="fr-view" style="" width="600" height="38.8594" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0px auto; width: 600px; border-collapse: collapse !important; background-color: rgb(0, 124, 220);" class="w320" cellpadding="0" cellspacing="0" width="600" bgcolor="#007cdc">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable">
<div data-slot="text" class="" style="position: relative; left: 0px; top: 0px; padding-top: 0px; padding-bottom: 0px;" data-param-padding-top="0" data-param-padding-bottom="0">
<h2>
<b>SkonÄŤete s tou nudou
<br />a začněte to s marketingovým HRDINOU!
</b>
</h2>
</div>
<div data-slot="button" class="" data-param-float="1" align="center" style="position: relative; left: 0px; top: 0px;" data-param-background-color="2ecb71" data-param-link-text="Podívejte se, co děláme jinak?" data-param-button-size="0">
<a href="#" class="button" target="_blank" style="border-color: rgb(46, 203, 113); border-width: 10px 20px; border-style: solid; text-decoration: none; border-radius: 3px; background-color: rgb(46, 203, 113); display: inline-block; font-size: 14px; color: rgb(255, 255, 255); padding: 0px;" background="#2ecb71">Podívejte se, co děláme jinak?
</a>
<div style="clear:both">
</div>
</div>
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; text-align: center; padding-top: 0px; padding-bottom: 0px;" data-param-align="1" data-param-text-align="1" data-param-background-color="007cdc" data-param-padding-top="0" data-param-padding-bottom="0">
<img src="https://marketingheroes.cz/mautic/media/images/31a746de9d24870a515b695106eca718.png" alt="An image" class="fr-view" style="width: 633px; height: 600px;" width="633" height="600" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
<div data-section-wrapper="one-column">
<center>
<table data-section="1" cellspacing="0" cellpadding="0" width="600" class="w320" bgcolor="#ffffff" style="background-color: rgb(255, 255, 255); border-collapse: collapse !important;">
<tbody>
<tr>
<td style="font-family: Arial, sans-serif;border-collapse: collapse;">
<table cellspacing="0" cellpadding="0" class="force-full-width" style="border-collapse: collapse !important;width: 100% !important;">
<tbody>
<tr>
<td data-slot-container="1" style="text-align: center;font-family: Arial, sans-serif;border-collapse: collapse;" class="ui-sortable">
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; padding-top: 0px; padding-bottom: 0px;" data-param-background-color="ffffff" data-param-padding-top="0" data-param-padding-bottom="0">
<img src="https://marketingheroes.cz/mautic/media/images/b5bd5c6bd42ece031ebeab79b8d8a7b6.png" alt="An image" class="fr-view" style="width: 627px; height: 144.375px;" width="627" height="144.375" />
<div style="clear:both">
</div>
</div>
<div data-slot="text">
<br />
<br />
<img width="62" height="56" img="" src="https://www.marketingheroes.cz/mautic/themes/sunday/img/gplus.gif" style="max-width: 600px;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" />
<img width="68" height="56" src="https://www.marketingheroes.cz/mautic/themes/sunday/img/facebook.gif" style="max-width: 600px;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" />
<img width="61" height="56" src="https://www.marketingheroes.cz/mautic/themes/sunday/img/twitter.gif" style="max-width: 600px;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" />
<br />
<br />
</div>
<div data-slot="text" class="" style="position: relative; left: 0px; top: 0px;">
<h3>Chcete vědět více... Neváhejte napsat na > chceme#marketingheroes.cz nebo si nás najděte na:
<br />NovĂ© sady 988/2, 602 00 BrnoÂ
</h3>
</div>
<div data-slot="text" class="" style="position: relative; left: 0px; top: 0px; padding-bottom: 0px;" data-param-padding-bottom="0">
<a href="{webview_url}">View in browser
</a> |
<a href="{unsubscribe_url}">Unsubscribe
</a>
</div>
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; padding-bottom: 0px; padding-top: 25px;" data-param-padding-bottom="0" data-param-padding-top="25">
<img src="https://marketingheroes.cz/mautic/media/images/f0767d753e853646327c8a1331953ce9.png" alt="An image" class="fr-view" style="" width="600" height="141.875" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</div>
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0 auto;border-collapse: collapse !important;width: 600px;" class="w320" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable">
<div data-slot="image" data-param-padding-top="0" data-param-padding-bottom="0" style="padding-top: 0px; padding-bottom: 0px; position: relative; left: 0px; top: 0px;" class="">
<img src="https://marketingheroes.cz/mautic/media/images/650aca3949de51ca4c276c92b8beef9e.png" alt="An image" class="fr-view" style="" width="600" height="39.0625" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
</body>
</html>


I just add margin-bottom:-5px; to set correctly this white sepration you had and it is fixed properly and worked for all devices.
/* Take care of image borders and formatting */
img {
max-width: 600px;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
table {
border-collapse: collapse !important;
}
#outlook a {
padding:0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width:100%;
}
.backgroundTable {
margin:0 auto;
padding:0;
width:100% !important;
}
table td {
border-collapse: collapse;
}
.ExternalClass * {
line-height: 115%;
}
/* General styling */
td {
font-family: Arial, sans-serif;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%;
height: 100%;
color: #000000;
font-weight: 400;
font-size: 18px;
}
h1, h2, h3, h4 {
text-align: center;
}
a {
color: #e86047;
text-decoration: none;
}
.force-full-width {
width: 100% !important;
}
.body-padding {
padding: 0 75px;
}
</style>
<style type="text/css" media="screen">
#media screen {
#import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,900);
/* Thanks Outlook 2013! */
body {
font-family: 'Source Sans Pro', 'Helvetica Neue', 'Arial', 'sans-serif' !important;
}
.w280 {
width: 280px !important;
}
}
</style>
<style type="text/css" media="only screen and (max-width: 480px)">
/* Mobile styles */
#media only screen and (max-width: 480px) {
table[class*="w320"] {
width: 320px !important;
}
td[class*="w320"] {
width: 280px !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
img[class*="w320"] {
width: 250px !important;
height: 67px !important;
}
td[class*="mobile-spacing"] {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
*[class*="mobile-hide"] {
display: none !important;
}
*[class*="mobile-br"] {
font-size: 12px !important;
}
td[class*="mobile-w20"] {
width: 20px !important;
}
img[class*="mobile-w20"] {
width: 20px !important;
}
td[class*="mobile-center"] {
text-align: center !important;
}
table[class*="w100p"] {
width: 100% !important;
}
td[class*="activate-now"] {
padding-right: 0 !important;
padding-top: 20px !important;
}
[class="mobile-block"] {
width: 100% !important;
display: block !important;
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" class=" responsejs " style="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{subject}
</title>
</head>
<body offset="0" class="body ui-sortable" style="padding: 0px; margin: 0px; display: block; background: rgb(238, 235, 235); text-size-adjust: none; -webkit-font-smoothing: antialiased; width: 100%; height: 100%; color: #000000; font-weight: 400; font-size: 18px; cursor: auto; overflow: visible;" bgcolor="#eeebeb">
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0 auto;border-collapse: collapse !important;width: 600px;" class="w320" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable">
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; padding-bottom: 0px; padding-top: 10px; margin-bottom:-5px;" data-param-padding-bottom="0" data-param-padding-top="10">
<img src="https://marketingheroes.cz/mautic/media/images/9b5eae91041367cd39287b92bdb3d3e9.png" alt="An image" class="fr-view" style="" width="600" height="38.8594" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0px auto; width: 600px; border-collapse: collapse !important; background-color: rgb(0, 124, 220);" class="w320" cellpadding="0" cellspacing="0" width="600" bgcolor="#007cdc">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable">
<div data-slot="image" data-param-caption-color="129ac7" data-param-align="1" data-param-text-align="1" style="text-align: center; position: relative; left: 0px; top: 0px; padding-top: 0px; padding-bottom: 0px;" class="" data-param-padding-top="0" data-param-padding-bottom="0">
<img src="https://marketingheroes.cz/mautic/media/images/388aa6e28fba0481dad8773fc042558a.png" alt="An image" class="fr-view" style="width: 518px; height: 291.375px;" width="518" height="291.375" />
<div style="clear:both">
</div>
</div>
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; text-align: center;" data-param-align="1" data-param-text-align="1">
<img src="https://marketingheroes.cz/mautic/media/images/242f21a049c560ab1395166265f0c254.png" alt="An image" class="fr-view" style="width: 480px; height: 52px; display: inline-block; vertical-align: bottom; margin-right: 5px; margin-left: 5px; max-width: calc(100% - 10px);" width="480" height="52" />
<div style="clear:both">
</div>
</div>
<div data-slot="text" data-param-padding-top="" style="padding-top: 10px; position: relative; left: 0px; top: 0px; padding-bottom: 0px;" class="" data-param-padding-bottom="">
<h1>
...přiletí kdykoliv budete v nesnázích se svým marketingem na sociálních sítích!
</h1>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0px auto; width: 600px; border-collapse: collapse !important; background-color: rgb(255, 255, 255);" class="w320" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable">
<div data-slot="image" data-param-background-color="ffffff" class="" style="position: relative; left: 0px; top: 0px; padding-top: 0px; text-align: center; padding-bottom: 0px;" data-param-padding-top="0" data-param-text-align="1" data-param-align="1" data-param-padding-bottom="0">
<img src="https://marketingheroes.cz/mautic/media/images/678d01285b77fb587bdb653e5ebcd9d2.png" alt="An image" class="fr-view" style="width: 630px; height: 144.359px;" width="630" height="144.359" />
<div style="clear:both">
</div>
</div>
<div data-slot="text" data-param-padding-top="25" style="padding-top: 25px; padding-bottom: 2px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<h2>1. Neumíte si spravovat sociální sítě a výkonnostní reklamu?
</h2>
<h3>Nevadí! Ukážeme vám, co teď na sociálních sítích “letí” a nenecháme Vám to uletět...
</h3>
<h4>
<b>Domluvte si online konzultaci ZDARMA >>>
</b>
</h4>
</div>
<div data-slot="image" data-param-align="1" data-param-text-align="1" style="text-align: center; padding-bottom: 0px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<img src="https://marketingheroes.cz/mautic/media/images/491683509f0d67fda7fb2c1c13294381.gif" alt="An image" class="fr-view" style="" width="500" height="270" />
<div style="clear:both">
</div>
</div>
<div data-slot="text" data-param-padding-top="25" style="padding-top: 25px; padding-bottom: 2px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<h2>2. Sociální sítě vám již spravuje agentura, ale chcete to levněji nebo s lepším obsahem a výsledky?
</h2>
<h3>Korona Vánoce 2020 jsou za rohem a VY chcete být vidět! Vystřelte s námi ke hvězdám nebo upadněte v zapomnění...
</h3>
<h4>Chceme se připravit na Vánoce 2020
</h4>
</div>
<div data-slot="image" data-param-align="1" data-param-text-align="1" style="text-align: center; padding-bottom: 0px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<img src="https://marketingheroes.cz/mautic/media/images/8b62f9bfeb9fe97ba57cc9c7f4207294.gif" alt="An image" class="fr-view" style="" width="500" height="270" />
<div style="clear:both">
</div>
</div>
<div data-slot="text" data-param-padding-top="25" style="padding-top: 25px; padding-bottom: 2px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<h2>3. Máte skvÄ›lĂ˝ produkt, ale neumĂ­te ho “prodat” na sociálnĂ­ch sĂ­tĂ­ch?Â
</h2>
<h3>Ukažme ten vzácný poklad, který schováváte ve skladu světu…
<br />“A brzy budete hodně někde!” - Jolanda
</h3>
<h4>Chceme zaujmout a udržet si #nové zákazníky
</h4>
</div>
<div data-slot="image" data-param-align="1" data-param-text-align="1" style="text-align: center; padding-bottom: 0px; position: relative; left: 0px; top: 0px;" data-param-padding-bottom="" class="">
<img src="https://marketingheroes.cz/mautic/media/images/f0d774b5c8e6e5266520a3a9da2b5106.gif" alt="An image" class="fr-view" style="" width="500" height="270" />
<div style="clear:both">
</div>
</div>
<div data-slot="text" class="" style="position: relative; left: 0px; top: 0px;">
<h2>PojÄŹme se do toho spoleÄŤnÄ› zakousnout!
</h2>
</div>
<div data-slot="text" class="" style="position: relative; left: 0px; top: 0px;">
<div style="text-align: center;">„Bez strategie jsou sociální sítě bezedná studna na peníze… S tou správnou se stanou vaším zlatým dolem!“
</div>
</div>
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; padding-bottom: 0px; padding-top: 25px; margin-bottom:-5px;" data-param-padding-bottom="0" data-param-padding-top="25">
<img src="https://marketingheroes.cz/mautic/media/images/aea055b371bb7e76cc1c7a54ef5e9236.png" alt="An image" class="fr-view" style="width: 625px; height: 141.875px;" width="625" height="141.875" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0 auto;border-collapse: collapse !important;width: 600px;" class="w320" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable" style="padding-top: 0px; padding-bottom: 0px;">
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; padding-top: 0px; padding-bottom: 0px;" data-param-padding-top="0" data-param-padding-bottom="0">
<img src="https://marketingheroes.cz/mautic/media/images/b3dc602ff2dc0093a218d69e6302d700.png" alt="An image" class="fr-view" style="" width="600" height="39.0625" />
<div style="clear:both">
</div>
</div>
<div data-slot="image" data-param-padding-bottom="0" style="padding-bottom: 0px; padding-top: 25px;margin-bottom:-5px;" data-param-padding-top="25">
<img src="https://marketingheroes.cz/mautic/media/images/7c9dcd22c754b6c9352d5350fa34dfe4.png" alt="An image" class="fr-view" style="" width="600" height="38.8594" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0px auto; width: 600px; border-collapse: collapse !important; background-color: rgb(0, 124, 220);" class="w320" cellpadding="0" cellspacing="0" width="600" bgcolor="#007cdc">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable">
<div data-slot="text" class="" style="position: relative; left: 0px; top: 0px; padding-top: 0px; padding-bottom: 0px;" data-param-padding-top="0" data-param-padding-bottom="0">
<h2>
<b>SkonÄŤete s tou nudou
<br />a začněte to s marketingovým HRDINOU!
</b>
</h2>
</div>
<div data-slot="button" class="" data-param-float="1" align="center" style="position: relative; left: 0px; top: 0px;" data-param-background-color="2ecb71" data-param-link-text="Podívejte se, co děláme jinak?" data-param-button-size="0">
<a href="#" class="button" target="_blank" style="border-color: rgb(46, 203, 113); border-width: 10px 20px; border-style: solid; text-decoration: none; border-radius: 3px; background-color: rgb(46, 203, 113); display: inline-block; font-size: 14px; color: rgb(255, 255, 255); padding: 0px;" background="#2ecb71">Podívejte se, co děláme jinak?
</a>
<div style="clear:both">
</div>
</div>
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; text-align: center; padding-top: 0px; padding-bottom: 0px;" data-param-align="1" data-param-text-align="1" data-param-background-color="007cdc" data-param-padding-top="0" data-param-padding-bottom="0">
<img src="https://marketingheroes.cz/mautic/media/images/31a746de9d24870a515b695106eca718.png" alt="An image" class="fr-view" style="width: 633px; height: 600px;" width="633" height="600" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
<div data-section-wrapper="one-column">
<center>
<table data-section="1" cellspacing="0" cellpadding="0" width="600" class="w320" bgcolor="#ffffff" style="background-color: rgb(255, 255, 255); border-collapse: collapse !important;">
<tbody>
<tr>
<td style="font-family: Arial, sans-serif;border-collapse: collapse;">
<table cellspacing="0" cellpadding="0" class="force-full-width" style="border-collapse: collapse !important;width: 100% !important;">
<tbody>
<tr>
<td data-slot-container="1" style="text-align: center;font-family: Arial, sans-serif;border-collapse: collapse;" class="ui-sortable">
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; padding-top: 0px; padding-bottom: 0px;" data-param-background-color="ffffff" data-param-padding-top="0" data-param-padding-bottom="0">
<img src="https://marketingheroes.cz/mautic/media/images/b5bd5c6bd42ece031ebeab79b8d8a7b6.png" alt="An image" class="fr-view" style="width: 627px; height: 144.375px;" width="627" height="144.375" />
<div style="clear:both">
</div>
</div>
<div data-slot="text">
<br />
<br />
<img width="62" height="56" img="" src="https://www.marketingheroes.cz/mautic/themes/sunday/img/gplus.gif" style="max-width: 600px;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" />
<img width="68" height="56" src="https://www.marketingheroes.cz/mautic/themes/sunday/img/facebook.gif" style="max-width: 600px;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" />
<img width="61" height="56" src="https://www.marketingheroes.cz/mautic/themes/sunday/img/twitter.gif" style="max-width: 600px;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" />
<br />
<br />
</div>
<div data-slot="text" class="" style="position: relative; left: 0px; top: 0px;">
<h3>Chcete vědět více... Neváhejte napsat na > chceme#marketingheroes.cz nebo si nás najděte na:
<br />NovĂ© sady 988/2, 602 00 BrnoÂ
</h3>
</div>
<div data-slot="text" class="" style="position: relative; left: 0px; top: 0px; padding-bottom: 0px;" data-param-padding-bottom="0">
<a href="{webview_url}">View in browser
</a> |
<a href="{unsubscribe_url}">Unsubscribe
</a>
</div>
<div data-slot="image" class="" style="position: relative; left: 0px; top: 0px; padding-bottom: 0px; padding-top: 25px; margin-bottom:-5px;" data-param-padding-bottom="0" data-param-padding-top="25">
<img src="https://marketingheroes.cz/mautic/media/images/f0767d753e853646327c8a1331953ce9.png" alt="An image" class="fr-view" style="" width="600" height="141.875" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</div>
<div data-section-wrapper="one-column">
<div data-section-wrapper="1">
<center>
<table data-section="1" style="margin: 0 auto;border-collapse: collapse !important;width: 600px;" class="w320" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td data-slot-container="1" valign="top" class="mobile-block ui-sortable">
<div data-slot="image" data-param-padding-top="0" data-param-padding-bottom="0" style="padding-top: 0px; padding-bottom: 0px; position: relative; left: 0px; top: 0px;" class="">
<img src="https://marketingheroes.cz/mautic/media/images/650aca3949de51ca4c276c92b8beef9e.png" alt="An image" class="fr-view" style="" width="600" height="39.0625" />
<div style="clear:both">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
</body>
</html>

Related

Stuck in css image gallery coding

I have been trying to figure out what causes this issue but couldn't. This image gallery is responsive but when I hover my mouse pointer on the thumbnails the image is shown on the left side main gallery but the thumbnail set disappears. Tried everything I know. I think my mind got fed up and gave up :-(. Any help in fixing it will be much appreciated. Thanks much in advance.
<style>
#gallery_container {
position: relative;
margin-bottom: 16px;
}
#gallery_mobile_container {
position: relative;
}
.gallery_main {
position: absolute;
visibility: hidden;
opacity: 0;
top: 0px;
left: 0px;
transition: visibility 0s, opacity 0.5s;
text-align: left; /*changing image appears on the left*/
background-color: #ffffff;
}
.gallery_large_img_table .gallery_main {
visibility: visible;
opacity: 1;
position: relative;
}
.gallery_thumbnail:hover > .gallery_main {
visibility: visible;
opacity: 1;
}
.gallery_thumbnail {
padding:2px;
cursor: pointer;
text-align: center;
}
.gallery_thumbnail_img {
transition: opacity 0.5s;
max-width: 100%;
max-height: 230px;
}
.gallery_thumbnail_img:hover {
opacity: 0.5;
}
</style>
<style>
#gallery_container .gallery_large_img_table {
width: 100%;
}
#gallery_container .gallery_main {
width: 100%;
height: 100%;
}
#gallery_container .gallery_main img {
max-width: 100%;
max-height: 100%;
}
</style>
<div style="display: table-cell; width: 90%; height: auto; text-align: center; vertical-align: top; padding: 7px; border: 1px solid #202020; border-radius: 12px;">
<div id="desc" name="desc">
<div id="gallery_container">
<table class="hide_product_photo">
<tbody>
<tr>
<td style="width: 80%; vertical-align: top;"> <!--width: 80% of the total Gallery is taken by main image-->
<!---css code here--->
<table class="gallery_large_img_table">
<tbody>
<tr>
<td>
<div class="gallery_main">
<img src="https://i.imgur.com/6h1GdR5.jpg"> <!--non-grid standalone image-->
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 20%; vertical-align: top;"> <!--width: 20% of the total Gallery is taken by thumbnails-->
<table>
<tbody>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/ZDUmji7.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/ZDUmji7.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/ByPVSkn.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/ByPVSkn.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/dXQjDR7.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/dXQjDR7.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/5SR520h.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/5SR520h.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/3uJiUDq.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/3uJiUDq.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/2dWjFD0.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/2dWjFD0.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/LUCcLCL.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/LUCcLCL.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/q0Y4Cdb.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/q0Y4Cdb.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/8VJF5pE.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/8VJF5pE.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/8VJF5pE.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/8VJF5pE.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/8VJF5pE.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/8VJF5pE.jpg">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

If I got the question right: Actually the thumbnail will not disappear, it will hide under the hovered image because you set hovered image width and height to 100% and it will cover all of the space is available to showing itself!
on this section: (inside the second <style> tag)
#gallery_container .gallery_large_img_table {
width: 100%;
}
#gallery_container .gallery_main {
width: 100%;
height: 100%;
}
#gallery_container .gallery_main img {
max-width: 100%;
max-height: 100%;
}
there are no rooms for other thumbnail images!
so if you change these two attribute to something fewer than 100% you can see them as well but be sure to change the main image width and height too.
you can replace the above section with these styles to solve your issue:
#gallery_container .gallery_large_img_table {
width: 80%;
}
#gallery_container .gallery_main {
width: 80%;
height: 80%;
}
#gallery_container .gallery_main img {
max-width: 80%;
max-height: 80%;
}

HTML square crop thumbnail grid

I'm trying to create a responsive grid of thumbnails using portrait and landscape images in HTML/CSS for Blogger. I haven't found any pre-made solutions that account for images in different orientations. I previously used the following code, but it's very cumbersome to use and uses tables:
<table style="margin-left:-3px;" border="0">
<tr><td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: -14px -20px 0px 0px;">
<a href="http://1.bp.blogspot.com/-PPFiMVxvw5Y/UWtx6pU68YI/AAAAAAAAAHg/j8bXN4KHUBU/s1600/4-108.jpg" imageanchor="1" title="Daylight">
<img style="position: absolute; top:-50px; border="0" src="http://1.bp.blogspot.com/-PPFiMVxvw5Y/UWtx6pU68YI/AAAAAAAAAHg/j8bXN4KHUBU/s150/4-108.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: -14px -20px 0px 0px;">
<a href="http://1.bp.blogspot.com/-pchlGmQn8xU/UWtyEKIbKFI/AAAAAAAAAIQ/IUH8v3Pk9AE/s1600/4-71.jpg" imageanchor="1" title="Daylight">
<img style="position: absolute; top:-50px; border="0" src="http://1.bp.blogspot.com/-pchlGmQn8xU/UWtyEKIbKFI/AAAAAAAAAIQ/IUH8v3Pk9AE/s150/4-71.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://3.bp.blogspot.com/-k5oXNNfTR2o/UWtx7DHQMSI/AAAAAAAAAHo/IcfBH1B2Nr0/s1600/4-141.jpg" imageanchor="1" title="Hostage Calm">
<img style="position: absolute; left:-35px; border="0" src="http://3.bp.blogspot.com/-k5oXNNfTR2o/UWtx7DHQMSI/AAAAAAAAAHo/IcfBH1B2Nr0/s150/4-141.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://2.bp.blogspot.com/-h-NZD0TSM4A/UWtx8VVYIII/AAAAAAAAAHw/Lf5_ohJl-BQ/s1600/4-153.jpg" imageanchor="1" title="Hostage Calm">
<img style="position: absolute; left:-35px; border="0" src="http://2.bp.blogspot.com/-h-NZD0TSM4A/UWtx8VVYIII/AAAAAAAAAHw/Lf5_ohJl-BQ/s150/4-153.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://1.bp.blogspot.com/-pns3r8rdUVA/UWwszQPxmlI/AAAAAAAAAJU/c_MCm6pAQcM/s1600/4-131.jpg" imageanchor="1" title="Mixtapes">
<img style="position: absolute; left:-35px; border="0" src="http://1.bp.blogspot.com/-pns3r8rdUVA/UWwszQPxmlI/AAAAAAAAAJU/c_MCm6pAQcM/s150/4-131.jpg" />
</a></div>
</td></tr>
<tr><td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://1.bp.blogspot.com/-g6od5jPw2To/UWws0cT-CCI/AAAAAAAAAJg/Zbt9oWC8MFg/s1600/4-132.jpg" imageanchor="1" title="Mixtapes">
<img style="position: absolute; left:-35px; border="0" src="http://1.bp.blogspot.com/-g6od5jPw2To/UWws0cT-CCI/AAAAAAAAAJg/Zbt9oWC8MFg/s150/4-132.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: -14px -20px 0px 0px;">
<a href="http://4.bp.blogspot.com/-I4U9DF5jpUA/UWws0beG4jI/AAAAAAAAAJc/47wjlevC34k/s1600/4-42.jpg" imageanchor="1" title="You Blew It!">
<img style="position: absolute; top:-50px; border="0" src="http://4.bp.blogspot.com/-I4U9DF5jpUA/UWws0beG4jI/AAAAAAAAAJc/47wjlevC34k/s150/4-42.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://4.bp.blogspot.com/-rXjeRPm-XaU/UWws1EOjb9I/AAAAAAAAAJs/EEyk5RXHjsE/s1600/4-44.jpg" imageanchor="1" title="You Blew It!">
<img style="position: absolute; left:-35px; border="0" src="http://4.bp.blogspot.com/-rXjeRPm-XaU/UWws1EOjb9I/AAAAAAAAAJs/EEyk5RXHjsE/s150/4-44.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://4.bp.blogspot.com/-BXnqebnoEdg/UWws2twugaI/AAAAAAAAAJ0/URAOyty5PdQ/s1600/4-46.jpg" imageanchor="1" title="You Blew It!">
<img style="position: absolute; left:-35px; border="0" src="http://4.bp.blogspot.com/-BXnqebnoEdg/UWws2twugaI/AAAAAAAAAJ0/URAOyty5PdQ/s150/4-46.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://1.bp.blogspot.com/-ZktVzEjRh6A/UWws2j8d26I/AAAAAAAAAJ4/msp0x00Qli0/s1600/4-58.jpg" imageanchor="1" title="You Blew It!">
<img style="position: absolute; left:-35px; border="0" src="http://1.bp.blogspot.com/-ZktVzEjRh6A/UWws2j8d26I/AAAAAAAAAJ4/msp0x00Qli0/s150/4-58.jpg" />
</a></div>
</td></tr>
<tr><td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: -14px -20px 0px 0px;">
<a href="http://3.bp.blogspot.com/-Hljl68Y-3Bs/UWx446aZ83I/AAAAAAAAAKs/NrmAXgZ4SyY/s1600/4-5.jpg" imageanchor="1" title="Ages">
<img style="position: absolute; top:-50px; border="0" src="http://3.bp.blogspot.com/-Hljl68Y-3Bs/UWx446aZ83I/AAAAAAAAAKs/NrmAXgZ4SyY/s150/4-5.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://4.bp.blogspot.com/-JUkUq0Mjcy0/UWx47mM7-DI/AAAAAAAAAK0/MyMht6reYeU/s1600/4-7.jpg" imageanchor="1" title="Ages">
<img style="position: absolute; left:-35px; border="0" src="http://4.bp.blogspot.com/-JUkUq0Mjcy0/UWx47mM7-DI/AAAAAAAAAK0/MyMht6reYeU/s150/4-7.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://2.bp.blogspot.com/-QhSig2DBDbo/UWx4iRPDEWI/AAAAAAAAAKM/gm8gz2lUBG8/s1600/4-137.jpg" imageanchor="1" title="Candy Hearts">
<img style="position: absolute; left:-35px; border="0" src="http://2.bp.blogspot.com/-QhSig2DBDbo/UWx4iRPDEWI/AAAAAAAAAKM/gm8gz2lUBG8/s150/4-137.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: -14px -20px 0px 0px;">
<a href="http://4.bp.blogspot.com/-jeYg22ByEiY/UWx4iUQpwxI/AAAAAAAAAKQ/7c9fiShT5y8/s1600/4-136.jpg" imageanchor="1" title="Candy Hearts">
<img style="position: absolute; top:-50px; border="0" src="http://4.bp.blogspot.com/-jeYg22ByEiY/UWx4iUQpwxI/AAAAAAAAAKQ/7c9fiShT5y8/s150/4-136.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://2.bp.blogspot.com/-ZY5qFY12QUI/UWx4oR14wKI/AAAAAAAAAKc/SW3BWT67pvA/s1600/4-38.jpg" imageanchor="1" title="Light Years">
<img style="position: absolute; left:-35px; border="0" src="http://2.bp.blogspot.com/-ZY5qFY12QUI/UWx4oR14wKI/AAAAAAAAAKc/SW3BWT67pvA/s150/4-38.jpg" />
</a></div>
</td></tr>
<tr><td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: 0px 12px 0px 0px;">
<a href="http://4.bp.blogspot.com/-RmmoPSuQips/UWx4vz9q2_I/AAAAAAAAAKk/PjaPD0VG8yc/s1600/4-44.jpg" imageanchor="1" title="Light Years">
<img style="position: absolute; top:-50px; border="0" src="http://4.bp.blogspot.com/-RmmoPSuQips/UWx4vz9q2_I/AAAAAAAAAKk/PjaPD0VG8yc/s150/4-44.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 0px 0px;">
<a href="http://3.bp.blogspot.com/-UOzGYBBVICE/UWtyBGWxZaI/AAAAAAAAAIA/LkpQ7_niHvo/s1600/4-37.jpg" imageanchor="1" title="Turnover">
<img style="position: absolute; left:-35px; border="0" src="http://3.bp.blogspot.com/-UOzGYBBVICE/UWtyBGWxZaI/AAAAAAAAAIA/LkpQ7_niHvo/s150/4-37.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: 0px 12px 0px 0px;">
<a href="3.bp.blogspot.com/-XZ843zdMTdU/UWtyAzXH8zI/AAAAAAAAAH8/6UwT0Gp3Ohg/s1600/4-21.jpg" imageanchor="1" title="Turnover">
<img style="position: absolute; top:-50px; border="0" src="3.bp.blogspot.com/-XZ843zdMTdU/UWtyAzXH8zI/AAAAAAAAAH8/6UwT0Gp3Ohg/s150/4-21.jpg" />
</a></div>
</td></tr>
</table>
Any help would be greatly appreciated!

For this I would recommend looking into Bootstrap; more precisely the Bootstrap grid system.
It looks like you have a lot of code right there. Bootstrap makes it easy and concise.
A solution with Bootstrap:
<div class="row">
<div class="col-md-4">your image</div>
<div class="col-md-4">your image</div>
<div class="col-md-4">your image</div>
</div>
<div class="row">
<div class="col-md-4">your image</div>
<div class="col-md-4">your image</div>
<div class="col-md-4">your image</div>
</div>
<div class="row">
<div class="col-md-4">your image</div>
<div class="col-md-4">your image</div>
<div class="col-md-4">your image</div>
</div>
Here you have 3 rows and in every row 3 column. Then, you can do the necessary to add your images.

#media only screen and (min-width:321px){ table,tr,td, thead, tbody,th {display:block;clear:both;width:100%;height:auto}
}

Static Header when scrolling

I coded a homepage and now I am trying to build a header, which is static like not scrolling with, when content is being scrolled. It should stay at the top while the content goes beneath/under it. I found this solution here, however, it's not working for me as I don' know where to put this code in, because everything I tried didn't work.
Click here for jsfiddle!.
My HTML is:
<!-- #PAGE -->
<div id="page1">
<!-- #HEADER -->
<div id="header1">
<div class="content-wrapper">
<div class="ft-div-left">
<center>
<img src="FW_Logo_Website.png">
</center>
</div>
<div class="ft-div-right">
<center>
</br>
<a href="logout.php" style="text-decoration:none;">
<button class="button-logout" name="Ausloggen">Logout</button>
</a>
</center>
</div>
<div class="ft-div-middle"> </div>
</div>
</div>
<!-- HEADER ENDE -->
<!-- #CONTENT -->
<div id="content">
<div class="wrapper">
<div class="left_box">
<center>
<img alt="" src="images/camera.png" width="100" height="100" />
<h1 class="headline" style="font-family:'Montserrat',sans-serif;">RAW DATA</h1>
<p class="explanation">Alle unretuschierten Fotos.</p>
<table>
<tbody>
<tr>
<td><img alt="" src="images/megabyte.png" width="20" height="20" /></td>
<td> 24.5 MB</td>
</tr>
<tr>
<td><img alt="" src="images/image.png" width="20" height="20" /></td>
<td> 758</td>
</tr>
<tr>
<td><img alt="" src="images/resolution.png" width="20" height="20" /></td>
<td> 3459 x 3294</td>
</tr>
</tbody>
</table>
</br>
<button class="button" name="DownloadRaw" onClick="getRawData()">Download</button>
</center>
</div>
<div class="right_box">
<center>
<img alt="" src="images/brush.png" width="100" height="100" />
<h1 class="headline" style="font-family:'Montserrat',sans-serif;">RETUSCHIERT</h1>
<p class="explanation">Alle retuschierten Fotos.</p>
<table>
<tbody>
<tr>
<td><img alt="" src="images/megabyte.png" width="20" height="20" /></td>
<td> 24.5 MB</td>
</tr>
<tr>
<td><img alt="" src="images/image.png" width="20" height="20" /></td>
<td> 758</td>
</tr>
<tr>
<td><img alt="" src="images/resolution.png" width="20" height="20" /></td>
<td> 3459 x 3294</td>
</tr>
</tbody>
</table>
</br>
<button class="button" name="DownloadRet" onClick="getRetouchedData()">Download</button>
</center>
</div>
<div class="clearer"></div>
</div>
</div>
<!-- #FOOTER -->
<div id="footer1" style="position: fixed; bottom: 0;">
<div class="content-wrapper">
<div class="ft-div-left"> </div>
<div class="ft-div-right">
<p></p>
</div>
<div class="ft-div-middle">
<center>
<p>
<center>
<span class="icon-facebook4" id="facebook" style="color: white;"></span>
<span class="icon-network" id="website" style="color: white;"></span>
<span class="icon-stumbleupon3" id="issuu" style="color: white;"></span>
<span class ="icon-twitter3"></span>
</br>
<br>
<br>
<span style="font-family:'Open Sans',sans-serif; font-size:11px; color:grey;">© 2014. Frederik Wilhelm. All Rights Reserved.</span>
</center>
</p>
</center>
</div>
</div>
</div>
<!-- FOOTER ENDE -->
</div>
My CSS is:
body {
font-family: 'Open Sans', sans-serif;
background-color: #FFF;
position: center;
margin: 0;
padding: 0;
/*height: 350px; */
}
#page1 {
/*font-family: 'Open Sans', sans-serif;*/
background-color: #FFF;
position: center;
}
#header1 {
padding: 5em;
height: 100px;
background-color: #FFF;
background: url(images/myLogo.png) no-repeat scroll transparent;
background-position: center;
/*border-bottom: 3px solid #000;*/
-webkit-box-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6);
-moz-box-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6);
box-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6);
}
#content {
padding: 10px;
padding-bottom: 7em; /* Höhe des Footers */
}
#footer1 {
position: absolute;
bottom: 0;
background: #333;
height: 7em; /* Höhe des Footers*/
width: 100%;
-webkit-box-shadow: 2px -2px 2px rgba(100, 100, 100, 0.6);
-moz-box-shadow: 2px -2px 2px rgba(100, 100, 100, 0.6);
box-shadow: 2px -2px 2px rgba(100, 100, 100, 0.6);
}
/***** 2 INHALTSBOXEN *****/
.wrapper {
width: 630px;
margin: 0 auto;
}
.left_box {
float: left;
padding: 10px;
width: 290px;
height: 350px;
text-align: center;
border: 2px solid white;
margin-top: 10px;
}
.right_box {
float: right;
padding: 10px;
width: 290px;
height: 100%;
text-align: center;
border: 2px solid white;
margin-top: 10px;
}
.clearer {
clear: both;
padding: 1px;
width: 100%;
height: 0.5px;
}
.content-wrapper {
margin: 0 auto;
max-width: 1216px;/*padding: 10px;*/
}
.ft-div-left {
float: left;
}
.ft-div-right {
float: right;
}
.ft-div-middle {
text-align: center;
}
li {
display: block;
float: left;
}
table {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
font-family: 'Open Sans', sans-serif;
font-weight: 200;
font-size: 13px;
}

Just set it to a fix positioned element.
#header1{
position: fixed;
top: 0;
left: 0;
z-index: 999;
}

Add
position:fixed;
into the header1 part of your css.
you could also do it in the call as
<div id="header1" style="position:fixed">

Can't seem to get the position correct

So I just want to say sorry for messy code, I have tried vigorously with this. Basically I want there to be 3 images side by side which I will later make clickable, and a gray background behind them. Then I want to be able to include text below the images. Any help?
HTML
Premium Store
<table id="table1" >
<tr id="imgs">
<div id="tablet">
<table border="0";>
<td><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png"/></td>
<td><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png"/></td>
<td><img src="http://icons.iconarchive.com/icons/visualpharm/<icons8-metro-> </icons8-metro->style/128/Business-Shop-icon.png"/></td>
</div>
</tr>
<td>
Contact a representative!
</td>
<td>
Deliver to your house!
</td>
<td>
Locate a store!
</td>
</table>
CSS
#backgroundH
{
width: 100%;
height: 50px;
background-color: #dddddd;
position: absolute;
}
#header
{
top: -50px;
color: black;
font-family: "Courier New";
text-align: center;
}
body
{
background-color: #cccccc;
}
#table1
{
width: 500px;
height: 200px;
background-color: #d9d9d9;
position: fixed;
margin-left: -250px;
margin-top: -100px;
top:50%;
left:50%;
}
td
{
width: 10px;
height: 450px;
position: relative;
margin-left: -5px;
margin-top: -225px;
top: 35%;
left: 3%;
}
Also please include what I did wrong! I am having a hard time understanding positioning, in-specific how to add a neat setup. (If somebody could skype with me I have some questions.. :P skype-ikorey1)
Thank you all for the help and reading. I really do appreciate all the feedback.

<html lang="en">
<head>
<style type="text/css">
.img-with-text { float: left; text-align: center}
</style>
</head>
<body>
<div class="container">
<div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" border="0" alt="" width="200" height="230" style="border: 2px solid black;" />
<p>Anup<br />9096969903<br />Email Carl Call </p>
</div>
<div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png" border="0" alt="" width="200" height="230" style="border: 2px solid black;" />
<p>Anup<br />9096969903<br />Email Sjon Gentry</p>
</div>
<div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" border="0" alt="" width="200" height="230" style="border: 2px solid black;" />
<p>Anup<br />9096969903<br />Email John Mabery </p>
</div>
</div>
<!-- End of your code -->
<p style="clear: both">Something more here </p>

There is a special way of making that type of arrangement (image with caption).
And this would be my way of doing what you need:
HTML
<div id="container">
<figure>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png"/>
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
<figure>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png"/>
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
<figure>
<img src="http://icons.iconarchive.com/icons/visualpharm/<icons8-metro-> </icons8-metro->style/128/Business-Shop-icon.png"/>
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
</div>
CSS
#container{
background:#ccc;
}
#container figure{
float:left
}

How about this..
<table id="table1">
<tr id="imgs">
<td>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" />
<p class="content">
Contact a representative!
</p>
</td>
<td>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png" />
<p class="content">
Deliver to your house!
</p>
</td>
<td>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Shop-icon.png" />
<p class="content">
Locate a store!
</p>
</td>
</tr>
</table>
and css
body {
background-color: #cccccc;
}
#table1 {
width: 500px;
height: 200px;
background-color: #d9d9d9;
position: fixed;
margin-left: -250px;
margin-top: -100px;
top: 50%;
left: 50%;
}
tr {
width: 10px;
height: 450px;
position: relative;
margin-left: -5px;
margin-top: -225px;
top: 35%;
left: 3%;
}
td.content {
position: absolute;
}
and for position details are explained clearly in w3schools
which will helps us alot.

Div position out of order and inheriting width for some reason

so I'm making a basic webpage to learn HTML & CSS and is part of an assingment I'm doing for school.
Basically my problem is this:
I have a footer div that is appering above another div in my page AND is displaying at the same width as that div. Here is my Code:
<div id="header">
<img src="img/manchester-united-logo.png">
<h1>Manchester United </h1>
</div>
<div id="slider">
<ul class="bxslider">
<li><img src="img/striker.jpg" title="Forwards" /></li>
<li><img src="img/mids.jpg" title="Midfielders" /></li>
<li><img src="img/defenders.jpg" title="Defenders" /></li>
</ul>
</div>
<div id="windows">
<table id="boxTable">
<tr>
<td class="box"><img src="img/David Moyes.jpg" title="The Manager"></td>
<td class="spacer"></td>
<td class="box"><img src="img/history.jpg" title="History"></td>
<td class="spacer"></td>
<td class="box"><img src="img/statCentre.jpg" title="Fixtures & Results"></td>
<td class="spacer"></td>
<td class="box"><img src="img/stadium.jpeg" title="Old Trafford"></td>
</tr>
<tr>
<td class="box"><div class="button"><p><p><a href="URL.htm">The Manager</p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p>History</p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p>Fixtures & Results</p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p>Old Trafford</p></div></td>
</tr>
</div>
<div id="footer">
THE FOOTER WHICH IS ANNOYING!!
</div>
</body>
& CSS
* {
margin: 0;
padding: 0;
}
body{
background-color: #F4F4F4;
width: 100%;
height: 100%;
min-width: 1280px;
}
#header{
height: 12%;
width: 1000px;
margin: 0 auto;
}
.button {
clear:both;
width: 140px;
height: 18px;
moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: #fff;
border-radius: 3px;
border: 1px solid #999;
padding: 5px;
text-align:center;
margin: 0 auto;
font-family: 'Roboto Slab', serif;
}
.button a {
color: #222222;
text-decoration: none;
}
.button:hover {
opacity: 0.6;
}
#header img {
height: 110px;
float: left;
}
#header h1{
padding: 25px 0 0 150px;
font-family: 'Roboto Slab', serif;
font-size: 2.5em;
font-weight: 300;
}
#slider{
height: 45%;
clear:both;
background-image:url('img/pattern.png');
padding-top: 30px;
}
#windows{
width: 1000px;
margin: 0 auto;
padding-top: 20px;
overflow:hidden;
}
.box img{
width:220px;
height:130px;
cursor: pointer;
}
.spacer{
width:50px;
}
#footer{
background-image:url('img/pattern.png');
}
I Figure my problem has something to do with my floating another div..

You haven't closed your table with </table> ;-)
You are also missing a </a> in your links
<div id="header">
<img src="img/manchester-united-logo.png">
<h1>Manchester United </h1>
</div>
<div id="slider">
<ul class="bxslider">
<li><img src="img/striker.jpg" title="Forwards" /></li>
<li><img src="img/mids.jpg" title="Midfielders" /></li>
<li><img src="img/defenders.jpg" title="Defenders" /></li>
</ul>
</div>
<div id="windows">
<table id="boxTable">
<tr>
<td class="box"><img src="img/David Moyes.jpg" title="The Manager"></td>
<td class="spacer"></td>
<td class="box"><img src="img/history.jpg" title="History"></td>
<td class="spacer"></td>
<td class="box"><img src="img/statCentre.jpg" title="Fixtures & Results"></td>
<td class="spacer"></td>
<td class="box"><img src="img/stadium.jpeg" title="Old Trafford"></td>
</tr>
<tr>
<td class="box"><div class="button"><p><p>The Manager<!-- missing /a here --></p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p>History</p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p>Fixtures & Results</p></div></td>
<td class="spacer"></td>
<td class="box"><div class="button"><p>Old Trafford</p></div></td>
</tr>
</table> <!-- <----------You need to close the table here -->
</div>
<div id="footer">
THE FOOTER WHICH IS ANNOYING!!
</div>
</body>