Social Icon CSS Issue

[bbilal]

I have created some social icons using CSS, you can look the preview:

THE QUESTION IS: How to add more icons next to it? I tried using CSS but I couldn't do it! Someone please help?



HTML:

<div class="social-share-buttons">
<div class="clearbox">
<div class="tweet"><div class="tweetmeme_button" style="margin:0px; padding:0px"><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button"
data-url="<?php the_permalink(); ?>"
data-via="InTechBB #intechbb"
data-text="<?php the_title(); ?>"
data-related="BBilal:Founder of InTechBB"
data-count="vertical">Tweet</a></div></div>
<div class="facebook"><?php dd_fblike_generate('Like Box Count') ?></div>
</div></div>

CSS:

/* Social share buttons */
.social-share-buttons {float: right; margin-left: 16px; margin-top: 6px; }
.clearbox{clear:both}
.tweet{ margin-left: 60px; margin-top: 0; padding-bottom: 0; margin-bottom: -60px; }
.facebook {position: relative; float: left;}

[bbilal]

No one? Someone please help! I'm desperate about it!

[Beverleyh]

I'm not sure what you mean by 'How to add more icons next to it?'

Can you produce a screen cap mock-up of your desired outcome so we can understand more clearly?

[bbilal]

This is what I want actually.

[Beverleyh]

OK - is that a screen cap from an actual site or an image mock-up?

If its a screen cap from somebody elses site you should be able to check their HTML and CSS to see how they've done it.

Otherwise it just looks like a series of div floats: http://css.maxdesign.com.au/floatutorial/

[bbilal]

oh so among all these div floats which one am I suppose to use to add one more?

[bbilal]

Will it be like this

/* Social share buttons */
.social-share-buttons {float: right; margin-left: 16px; margin-top: 6px; }
.clearbox{clear:both}
.tweet{ margin-left: 60px; margin-top: 0; padding-bottom: 0; margin-bottom: -60px; }
.facebook {position: relative; float: left;}
.unnamed-socialicon {float:left;}

????

[jmarren]

Yeah so I'm not sure what you are trying to do, but this effect can be achieved several ways. So to create an icon you want to use a link on an image of the icon or use a background image

so these classes seem to be just containers that float:
.tweet{ margin-left: 60px; margin-top: 0; padding-bottom: 0; margin-bottom: -60px; }
.facebook {position: relative; float: left;}
.unnamed-socialicon {float:left;}

so inside each container you need to put the actual link or content that has the icon. here is some psuedo class

With just images

<div class="facebook">
<a href="#"><img src="your-facebook-src.gif"></a>
</div>

<div class="tweet">
<a href="#"><img src="your-twitter-src.gif"></a>
</div>


<div class="another-social">
<a href="#"><img src="your-another-social-src.gif"></a>
</div>

With background images
This is similar except the link is empty, there is a class on it and there u specify width height and background image that is your social button

<div class="facebook">
<a href="#" class="social-button-fb"></a>
</div>

<div class="tweet">
<a href="#" class="social-button-tweet"></a>
</div>


<div class="another-social">
<a href="#" class="social-button-whatever"></a>
</div>

I won't do all of them, but each social buttons needs something like this:

.social-button-facebook {
display:inline-block;
width:20px;
height:20px;
background:url(your-facebook-src.gif) no-repeat top left;
}

Hope this helps, but yes as Beverly H says right now all you seem to have are empty containers that float and don't do much else.