Social Buttons CSS problem

  • Okay, So I’ve created my header bar and now added some social buttons to the right of my header image. However the actual link to the object seems to be off to the left of the object, its driving me insane. I’ve tried various positioning tags, played out with the float etc

    I have to admit that I’m new to CSS so this may be an easy fix, but any advice would be great!

    Site – https://www.ukhiking.co.uk

    Code below.

    header.php

    <div id="social_facebook">
<a href="https://www.facebook.com/ukhiking/" target="_blank"><img alt="Facebook" src="phpBB3/styles/prosilver/theme/images/social/social_facebook.png"></a>
</div>
<div id="social_twitter">
<a href="https://www.twitter.com/ukhiking/" target="_blank"><img alt="Twitter" src="phpBB3/styles/prosilver/theme/images/social/social_twitter.png"></a>
</div>
<div id="social_google">
<a href="https://www.google.com/ukhiking" target="_blank"><img alt="Google +" src="phpBB3/styles/prosilver/theme/images/social/social_google.png"></a>
</div>
<div id="social_rss">
<a href="https://feeds.feedburner.com/ukhiking" target="_blank"><img alt="RSS Feed" src="phpBB3/styles/prosilver/theme/images/social/social_rss.png"></a>
</div>

    style.css

    #social_facebook {
   float: right;
   height: 24px;
   position: relative;
   right: 87px;
   top: 135px;
   z-index: 99999999999;
}

#social_twitter {
   float: right;
   height: 24px;
   position: relative;
   right: -4px;
   top: 135px;
   z-index: 99999999999;
}

#social_google {
   float: right;
   height: 24px;
   position: relative;
   right: -95px;
   top: 135px;
   z-index: 99999999999;
}

#social_rss {
   float: right;
   height: 24px;
   position: relative;
   right: -186px;
   top: 135px;
   z-index: 99999999999;

Viewing 4 replies - 1 through 4 (of 4 total)

  • You should wrap all those social buttons in a container so you just have to position the container first then the icons next.

    Thread Starter cross90

    (@cross90)

    Hey thanks for your reply, I’ve implemented a container seen below as ‘social_bar’ and now have all 4 objects under on tag as ‘social_buttons’. Works perfectly and is postioned near enough correctly. However with the 4 objects being held together the spacing of them is slightly out compared to a page which I’m trying to mirror https://forum.ukhiking.co.uk which is a PhpBB page.

    Is there anyway I can bring the objects ever to closed together to pages match.

    WordPress – https://www.ukhiking.co.uk
    PhpBB – https://forum.ukhiking.co.uk

    If you open both pages and flick between them you can see the social buttons move very slightly. I’m aiming to have this pixel perfect if possible.

    style.css

    #social_bar {
   margin: 0 auto;
   height: 24px;
   top: -64px;
   right: 25px;
   position: relative;
   z-index: 9999999999;
}

#social_buttons {
   float: right;
}

    header.php

    <div id="social_bar">
<div id="social_buttons">

<a href="https://www.facebook.com/ukhiking/" target="_blank"><img alt="Facebook" src="phpBB3/styles/prosilver/theme/images/social/social_facebook.png"></a>
<a href="https://www.twitter.com/ukhiking/" target="_blank"><img alt="Twitter" src="phpBB3/styles/prosilver/theme/images/social/social_twitter.png"></a>
<a href="https://www.google.com/ukhiking" target="_blank"><img alt="Google +" src="phpBB3/styles/prosilver/theme/images/social/social_google.png"></a>
<a href="https://feeds.feedburner.com/ukhiking" target="_blank"><img alt="RSS Feed" src="phpBB3/styles/prosilver/theme/images/social/social_rss.png"></a>

</div>
</div>

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you just float the images left?

    #social_buttons img {
 float: left;
}

    It’ll remove some of the spacing, but you can always add margin.

    Thread Starter cross90

    (@cross90)

    Hey thanks for the comment.

    Just gave it a go. Spacing between the 4 social buttons doesnt seem to have changed at all.

    Just had to change the amount of px in right to have to sit in the correct place.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Social Buttons CSS problem’ is closed to new replies.