Skip navigation
Currently Being Moderated

How to put spaces between a stack of social media icons?

Mar 25, 2013 11:05 AM

On the following test page

 

http://www.shyamasundaradasa.com/jyotish/temp/Untitled-1-delete.html

 

you will see that on the right hand side are 7 icons to various social media. If they were horizontal then there would be a small space between them but not so when vertical. It becomes a problem on a smart phone because they are small and touch each other.

 

I tried putting "<p>  </p>" (for some reason the text I put between <p> </p> doesn't show )  between them but it was too much space. I though about making a container div and then a separate div with padding for each but it seemed clumsy and I thought that there must be another way.

 

Is there an elegant solution to put some space between them?

 

VL Branko

 

Message was edited by: VL Branko

 
Replies
  • Currently Being Moderated
    Mar 25, 2013 11:12 AM   in reply to VL Branko

    Add a padding-bottom: 5px; (ore more depending on how much space you want) to your

     

    .stButton .chicklets {

        background-repeat: no-repeat;

       display: inline-block;

        font-family: Verdana,Helvetica,sans-serif;

        font-size: 11px;

        height: 16px;

        line-height: 16px;

        padding-left: 20px;

        padding-right: 3px;

        white-space: nowrap;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2013 11:15 AM   in reply to VL Branko

    .st_facebook, .st_twitter, .st_googleplus, .st_linkedin, .st_myspace, .st_email, .st_sharethis {

        display: block;

        margin-top: 4px;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2013 11:32 AM   in reply to VL Branko

    I would wrap them in an unordered list instead of <span> tags.

     

    <ul>

         <li> </li>

         <li> </li>

    </ul>

     

    Then style the list as required:

     

    #recommend ul {margin:0; padding:0}

     

    #recommend li {

    list-style:none;

    padding-bottom: 8px; /**adjust as required**/

    }

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2013 12:07 PM   in reply to VL Branko

    If you swap <li> tags for <span> tags, & style the lists with CSS as I suggested it works just fine.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2013 12:15 PM   in reply to VL Branko

    I changed the height in your CSS from 16 to 30

     

    .stButton .chicklets {

        background-repeat: no-repeat;

     

       display: inline-block;

        font-family: Verdana,Helvetica,sans-serif;

        font-size: 11px;

        height: 30px;

     

    tmp.jpg

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 26, 2013 1:51 AM   in reply to VL Branko

    Try this:

     

    #recommend span{

    padding-bottom: 5px;

    }


    This will target span tags inside #recommend div and add only padding-bottom, thereby offsetting each span item by 5px.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 26, 2013 6:01 AM   in reply to VL Branko

    You're welcome!

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 26, 2013 9:30 AM   in reply to VL Branko

    My only  reservation with your usage of <span> tags is that they impart no semantic meaning.  Whereas headings, paragraphs and lists do impart meaning to your content.  Just something to consider...

     

    Glad you got it sorted.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2013 2:06 AM   in reply to VL Branko

    VL Branko wrote:

     

    Nancy I don't get your meaning. Could you dilate on  the topic for our better understanding.

     

    Your social networking images are a 'list' of items to be displayed so technnically you should most probably use a <ul><li></li></ul> structure to display them.

     

    I don't really subscribe to that view in this particular case, one can get too weighed down with the right and wrongs.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2013 4:57 AM   in reply to osgood_

    It makes sense to use a list, and it's easy to do so as well. Why not use it? There are reasons to do so, and no reasons not to.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2013 6:55 AM   in reply to MurraySummers

    MurraySummers wrote:

     

    It makes sense to use a list, and it's easy to do so as well. Why not use it? There are reasons to do so, and no reasons not to.

     

    I'm not a great adovcate of semantics to the level some take it or validation as you know. Technically speaking if I have images set out as below they also would be classified as a list but why would I want to bloat the code with a lot more tags and css. More tags more css   = more work, more possible problems, no advantage in cases like this.

     

    <div style="width: 200px;">

    <img src="blah.jpg" width="200" height="200" alt="" />

    <img src="blah.jpg" width="200" height="200" alt="" />

    <img src="blah.jpg" width="200" height="200" alt="" />

    <img src="blah.jpg" width="200" height="200" alt="" />

    </div>

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2013 7:07 AM   in reply to osgood_

    It's for accessibility, as I understand it. When read by a screen reader, your way provides no information about the meaning of those images. Puttting them in a list would at least convey the fact that it's a list of images (which is what it really is). It's mainly a matter of style though. Your way is fine for you. No need to change if you don't want.

     

    I really don't see a downside - it's not more work, and it's not subject to problems. The CSS issue is moot as I see it. How hard is it to do a list-style-type:none;?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2013 8:46 AM   in reply to MurraySummers

    MurraySummers wrote:

     

    It's for accessibility, as I understand it. When read by a screen reader, your way provides no information about the meaning of those images. Puttting them in a list would at least convey the fact that it's a list of images (which is what it really is). It's mainly a matter of style though. Your way is fine for you. No need to change if you don't want.

     

    I really don't see a downside - it's not more work, and it's not subject to problems. The CSS issue is moot as I see it. How hard is it to do a list-style-type:none;?

     

    Accessibility is not really on my radar either, never has been and never will be. I don't blatantly go out of my way to avoid it but I also don't jump through hoops to catch those few people either.

     

    Personally I'd rather have less code and less css to deal with any time, there's usually enough of it without the added extras if accessibility was taken into account.

     

    At one time everyone was saying keep it lean and mean until that don't suit anymore, now its add as much css and html code as you like to keep everyone happy, from mobile to accesibility..........geeshh I give up. I don't follow trends I follow my own gut feelings.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points