Results 1 to 4 of 4

Thread: Space between elements sees no change

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default Space between elements sees no change

    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.

  2. #2
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    414
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    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....
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  3. #3
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    414
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    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

    Click image for larger version. 

Name:	atticsprite.jpg 
Views:	31 
Size:	20.7 KB 
ID:	6249

    you can change the margins etc put I did set some at 10px all around, hope this helps lol
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  4. #4
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

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

Similar Threads

  1. How to change lots of elements on a page on mouseover
    By FrankieL in forum Looking for such a script or service
    Replies: 5
    Last Post: 02-12-2012, 04:43 AM
  2. Replies: 1
    Last Post: 01-03-2011, 06:08 AM
  3. Collapsed space then black space appears in ultimate fade-in slideshow
    By cnymike in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 07-29-2010, 03:35 PM
  4. change elements
    By d-machine in forum JavaScript
    Replies: 3
    Last Post: 08-25-2009, 02:42 PM
  5. White space between elements
    By bokosr in forum HTML
    Replies: 9
    Last Post: 04-15-2008, 04:26 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •