Could You Please Help Me?

Discussion in 'CSS' started by Fracisc, Jan 21, 2013.

  1. #1
    I cannot manage to align the share icons with the text and the rss feed button. Take a look here: http://www.genuineadmirer.com/

    Your help is needed!

    Thank you!
     
    Solved! View solution.
    Fracisc, Jan 21, 2013 IP
  2. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #2
    This looks good in both Firefox 16 and IE9. You might want to put the style in the CSS and you might want to move the RSS up a pixel or 2.
    
            <span style='vertical-align: middle;'>Show us some love!</span>
            <span class='st_facebook_hcount' displayText='Facebook' ></span>
            <span class='st_twitter_hcount' displayText='Tweet'></span>
            <span class='st_pinterest_hcount' displayText='Pinterest'></span>
            <span class='st_digg_hcount' displayText='Digg'></span>
            <span class='st_email_hcount' displayText='Email'></span>
            <span class='st_googleplus_hcount' displayText='G+'></span>
            <span class='rss' style='position: relative; top: 8px;'><a href='http://feeds.feedburner.com/GenuineAdmirer' title='Subscribe to my feed' rel='alternate' type='application/rss+xml'><img src='http://www.feedburner.com/fb/images/pub/feed-icon32x32.png' height='24px;' alt='' /></a></span>
    
    Code (markup):
     
    Rukbat, Jan 22, 2013 IP
  3. Fracisc

    Fracisc Well-Known Member

    Messages:
    3,670
    Likes Received:
    10
    Best Answers:
    1
    Trophy Points:
    195
    #3
    Thank you for your help, Rukbat!

    I tested in chrome and opera and the buttons are okay now but the text "show us some love" is not aligned with the buttons.
     
    Fracisc, Jan 22, 2013 IP
  4. #4
    Here you go, this worked on my local.

    IN HTML put "Show Us Some Love" in paragraph:
    <p class="love"> Show us some love! </p>
     
    AND PUT ALL SPANS (SOCIALS BUTTONS) IN ONE DIV LIKE THIS:
     
    <div class="wrap">
    <span class="st_facebook_hcount" displaytext="Facebook" st_processed="yes"><span style="text-decoration:none;color:#000000;display:inline-block;cursor:pointer;" class="stButton"><span><span class="stMainServices st-facebook-counter" style="background-image: url(http://w.sharethis.com/images/facebook_counter.png);">&nbsp;<img src="http://w.sharethis.com/images/check-big.png" style="position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; max-width: 19px; max-height: 19px; display: none;"></span><span class="stArrow"><span class="stButton_gradient stHBubble" style="display: inline-block;"><span class="stBubble_hcount">5</span></span></span></span></span></span>
    <span class="st_twitter_hcount" displaytext="Tweet" st_processed="yes"><span style="text-decoration:none;color:#000000;display:inline-block;cursor:pointer;" class="stButton"><span><span class="stMainServices st-twitter-counter" style="background-image: url(http://w.sharethis.com/images/twitter_counter.png);">&nbsp;<img src="http://w.sharethis.com/images/check-big.png" style="position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; max-width: 19px; max-height: 19px; display: none;"></span><span class="stArrow"><span class="stButton_gradient stHBubble" style="display: inline-block;"><span class="stBubble_hcount">1</span></span></span></span></span></span>
    <span class="st_pinterest_hcount" displaytext="Pinterest" st_processed="yes"><span style="text-decoration:none;color:#000000;display:inline-block;cursor:pointer;" class="stButton"><span><span class="stMainServices st-pinterest-counter" style="background-image: url(http://w.sharethis.com/images/pinterest_counter.png);">&nbsp;<img src="http://w.sharethis.com/images/check-big.png" style="position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; max-width: 19px; max-height: 19px; display: none;"></span><span class="stArrow"><span class="stButton_gradient stHBubble" style="display: inline-block;"><span class="stBubble_hcount">1</span></span></span></span></span></span>
    <span class="st_digg_hcount" displaytext="Digg" st_processed="yes"><span style="text-decoration:none;color:#000000;display:inline-block;cursor:pointer;" class="stButton"><span><span class="stButton_gradient"><span class="chicklets digg">Digg</span><img src="http://w.sharethis.com/images/check-big.png" style="position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; max-width: 19px; max-height: 19px; display: none;"></span><span class="stArrow"><span class="stButton_gradient stHBubble" style="display: inline-block;"><span class="stBubble_hcount">1</span></span></span></span></span></span>
    <span class="st_email_hcount" displaytext="Email" st_processed="yes"><span style="text-decoration:none;color:#000000;display:inline-block;cursor:pointer;" class="stButton"><span><span class="stMainServices st-email-counter" style="background-image: url(http://w.sharethis.com/images/email_counter.png);">&nbsp;<img src="http://w.sharethis.com/images/check-big.png" style="position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; max-width: 19px; max-height: 19px; display: none;"></span><span class="stArrow"><span class="stButton_gradient stHBubble" style="display: inline-block;"><span class="stBubble_hcount">0</span></span></span></span></span></span>
    <span class="st_googleplus_hcount" displaytext="G+" st_processed="yes"><span style="text-decoration:none;color:#000000;display:inline-block;cursor:pointer;" class="stButton"><span><span class="stButton_gradient"><span class="chicklets googleplus">G+</span><img src="http://w.sharethis.com/images/check-big.png" style="position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; max-width: 19px; max-height: 19px; display: none;"></span><span class="stArrow"><span class="stButton_gradient stHBubble" style="display: inline-block;"><span class="stBubble_hcount">1</span></span></span></span></span></span>
    <span class="rss" style="position: relative; bottom: 2px;"><a href="http://feeds.feedburner.com/GenuineAdmirer" title="Subscribe to my feed" rel="alternate, nofollow" target="_blank" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" height="24px;" alt="" style="border:0;vertical-align:bottom;"></a></span>
    </div>
     
    AFTER THIS CHANGE CSS:
     
    .intro-text {
    width: 860px;
    margin: 0px auto;
    color: #eee;
    font-size: 28px;
    font-weight: 300;
    text-align: center;
    text-shadow: 1px 1px 0px #000;
    height: 70px;
    }
     
    .love{
    float: left;
    margin-top: 10px;
    }
     
    .wrap {
    width: 600px;
    float: right;
    margin-top: 5px;
    }
    Code (markup):
    And also get rid of that terrible text-shadow, remove it from .intro-text
     
    nixonm, Jan 22, 2013 IP
    Fracisc likes this.
  5. Fracisc

    Fracisc Well-Known Member

    Messages:
    3,670
    Likes Received:
    10
    Best Answers:
    1
    Trophy Points:
    195
    #5
    Thank you! That did the trick! :)
     
    Fracisc, Jan 22, 2013 IP
  6. nixonm

    nixonm Active Member

    Messages:
    40
    Likes Received:
    4
    Best Answers:
    3
    Trophy Points:
    78
    #6
    You're welcome :)
     
    nixonm, Jan 22, 2013 IP
    Fracisc likes this.