Space between elements sees no change

**theremotedr** · 01-11-2018, 11:19 AM

Morning,

Here is the site in question http://www.theatticbanwell.co.uk/index.html

I am trying to put space between the 4 round icons as i think they are to close together.
I have altered the padding to give them the space required.
Using chrome dev tools i can see that i need to look in ul,icons but no matter what i do i dont see any change.

Can you see a reason for that.
I am using the code below just to see i visual difference then i can change to setting i need,thats if the code is correct ?

Code:

margin:10px 10px 10px 10px;

Please can you advise,many thasnk.

**simonf** · 01-11-2018, 01:00 PM

Hi, firstly I would make a sprite for all these images, then call the img when/where you need it... i.e

CSS (Sample of my css file) from website http://www.silvertreeestates.co.za

Code:

.emailsprite{width:29px;height:29px;background-position:-925px -742px;margin-bottom:10px;margin-right:5px;position:relative;top:20px;}
.facebooksprite{width:29px;height:29px;background-position:-959px -742px;margin-bottom:10px;}
.faxsprite{width:29px;height:29px;background-position:-855px -795px;margin-bottom:10px;margin-right:5px;position:relative;top:20px;}
.googleplussprite{width:29px;height:29px;background-position:-889px -795px;margin-bottom:10px;}
.instagramsprite{width:29px;height:29px;background-position:-923px -795px;margin-bottom:10px;}
.linkedinsprite{width:29px;height:29px;background-position:-957px -795px;margin-bottom:10px;}

HTML (Sample of my index.html file)

Code:

</div><div class="social"><h2>Stay Connected</h2><ul>
<li><a href="https://www.facebook.com/SilvertreeEstates/timeline" target="_blank">&nbsp;<div class="divTableCell facebooksprite inverted"></div></a></li>
<li><a href="https://twitter.com/silvertreeRSA" target="_blank">&nbsp;<div class="divTableCell twittersprite inverted"></div></a></li>
<li><a href="https://www.instagram.com/silvertreeestateslf" target="_blank">&nbsp;<div class="divTableCell instagramsprite inverted"></div></a></li>
<li><a href="https://za.pinterest.com/silvertreeestat/boards/" target="_blank">&nbsp;<div class="divTableCell pinterestsprite inverted"></div></a></li>
<li><a href="https://plus.google.com/+SilverTreeEstatesRoodepoort" target="_blank">&nbsp;<div class="divTableCell googleplussprite inverted"></div></a></li>
<li><a href="https://www.linkedin.com/company/silver-tree-estates" target="_blank">&nbsp;<div class="divTableCell linkedinsprite inverted"></div></a></li>
<li><a href="mailto:office@silvertreeestates.co.za">&nbsp;<div class="divTableCell lmailsprite inverted"></div></a></li>

Otherwise still do in css like this

Code:

.emailimg{width:29px;height:29px;margin: 25px 50px 75px 100px;}

top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px

Then html would be

Code:

<img class="emailimg" src="img/email.png" alt="email">

If you want some advise on sprites let me know....

**simonf** · 01-11-2018, 01:44 PM

So I was bored, for the sprite

Add this to your css file

Code:

.soonsprite, .findsprite, .emailsprite, .fbsprite, .phonesprite, .ipphonesprite{display:inline-block;overflow:hidden;background-repeat:no-repeat;background-image:url(../../img/atticsprite.png);}
.soonsprite{width:360px;height:225px;background-position: 0 0;margin:10px 5px 10px 5px;;}
.findsprite{width:397px;height:101px;background-position:-6px -239px;margin:10px 5px 10px 5px;;}
.emailsprite{width:90px;height:87px;background-position:-445px -4px;margin:10px 10px 10px 10px;;}
.fbsprite{width:91px;height:87px;background-position:-444px -101px;margin:10px 10px 10px 10px;;}
.phonesprite{width:90px;height:90px;background-position:-445px -196px;margin:10px 10px 10px 10px;;}
.ipphonesprite{width:90px;height:90px;background-position:-445px -292px;margin:10px 10px 10px 10px;;}
.inverted:hover{filter:invert(100%) drop-shadow(2px 2px 2px #898989);-webkit-filter:invert(100%) drop-shadow(2px 2px 2px #898989)}

Html for these would be

Code:

<li><a href="https://www.facebook.com/TheAtticBanwell" target="_blank">&nbsp;<div class="divTableCell fbsprite inverted"></div></a></li>
<li><a href="mailto:theatticbanwell@gmail.com">&nbsp;<div class="divTableCell emailsprite inverted"></div></a></li>

etc etc etc