Space between elements sees no change

[theremotedr]

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 ?


margin:10px 10px 10px 10px;

Please can you advise,many thasnk.

[simonf]

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


.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)

</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


.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
<img class="emailimg" src="img/email.png" alt="email">

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

[simonf]

So I was bored, for the sprite

Add this to your css file


.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


<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

6249

you can change the margins etc put I did set some at 10px all around, hope this helps lol

[theremotedr]

Thanks for the advice ,i used your first posts code and added the html / css like shown.