Display custom social buttons horizontally with an unordered list

I have been trying, without much success, to horizontally line up custom social buttons inside a div. I have a parent div, that in its present reincarnation has a fixed height, width, with the container elements floated left. I have tried putting the background image social buttons themselves within div’s, and or in span’s, using display:block; then display:inline; for the rest of the div’s/span’s and then trying different combinations of display:inline-block; display:inline, looking at source for a couple of sites, I have come across the use of unordered lists, is this the correct way to lineup custom, background image custom social buttons. If so, can I be relayed to a tutorial so I can get this functioning on my site.

Thanks,

Hi folks, I think I have found what I need, if I need to reopen the thread I will post my questions.

Thanks,

It’s a good idea to use a UL for this, but that won’t make the icons line up by itself. If you use display: inline-block or display: inline on the LIs, you can set them to vertical-align: middle to make them line up nicely.

Thanks Ralph

Ok folks, I am still stuck, after many iterations I cannot get the second, (twitter) button to show at all, as you can see, I am positioning through classes, on the li declaration I have tried display:inline, display:block; before the onhover function on the first, (facebook icon), was working properly, presently it is not. Any help would be much appreciated.


.share {
	position: relative;
	width: 230px;
	height: 42px;
	background-image: url('../images/sharebg.jpg');
	background-repeat: no-repeat;
	border-bottom:2px orange solid;
	z-index: 1000;
}
.share ul {
	margin: 0; 
	padding: 0;
    	list-style-type: none;
    	width:230px;
    	height:42px;
}
.share li {
	float: left;
	display:block;
}
.custom-facebook-button a {
background: url('../images/facebook.png') 100% 100% no-repeat;
position:absolute;
width: 40px;
height: 40px;
background-position:0px 0px; 
z-index:1002
}
.custom-facebook-button a:hover {
background: url('../images/facebookh.png') 100% 100% no-repeat;
background-position:0px 0px;
}
.custom-tweet-button a {
	background: url('../images/tweet.png') 100% 100% no-repeat;
	position:absolute;
	background-position:50px 0px; 
	width: 40px;
	height:40px;
	z-index:1003
}
.custom-tweet-button a:hover {
background: url('../images/tweeth.png') 100% 100% no-repeat;
background-position:50px 0px;
}


<div class="share" />
		<ul class="share">
		<li><div class="custom-facebook-button"><a href="http://www.facebook.com/share.php?u=#" target="_blank" rel="nofollow"></a></div></li>
		<li><div class="custom-tweet-button">
  <a href="http://twitter.com/share?url=#" target="_blank" rel="nofollow"></a></div></li>
		</ul>
		</div>

Try these styles:

.share {
	position: relative;
	width: 230px;
	height: 42px;
	background-image: url('../images/sharebg.jpg');
	background-repeat: no-repeat;
	border-bottom:2px orange solid;
	z-index: 1000;
}
.share ul {
	margin: 0; 
	padding: 0;
    list-style-type: none;
    width:230px;
    height:42px;
}
.share li {
	display:inline-block;
	width: 40px; height: 40px;
}

.share li a {
	display: block; 
	width: 40px;
	height: 40px;
}

.custom-facebook-button a {
	background: url('../images/facebook.png') 100% 100% no-repeat;
	background-position:0px 0px;
}

.custom-facebook-button a:hover {
	background: url('../images/facebookh.png') 100% 100% no-repeat;
	background-position:0px 0px;
}

.custom-tweet-button a {
	background: url('../images/tweet.png') 100% 100% no-repeat;
	background-position:50px 0px;
}

.custom-tweet-button a:hover {
	background: url('../images/tweeth.png') 100% 100% no-repeat;
	background-position:50px 0px;
}

Hi Ralph, thanks for getting back, I am still having trouble having the second, (or third), background images to show, even though the hyperlink area shows active “onhover” at the horizontal position.

Can you post a link? It’s hard to work with code when we can’t see you images.

OK, thanks for sending your link via PM. The problem is the background position you have set on each icon. Instead of this:

.custom-tweet-button a {
background: url('../images/tweet.png') 100% 100% no-repeat;
background-position: [COLOR="#FF0000"]60[/COLOR]px 0px;
}

.custom-digg-button a {
background: url('../images/digg.png') 100% 100% no-repeat;
background-position: [COLOR="#FF0000"]160[/COLOR]px 0px;
}

you should have this:

.custom-tweet-button a {
background: url('../images/tweet.png') 100% 100% no-repeat;
background-position: [COLOR="#FF0000"]0[/COLOR]px 0px;
}

.custom-digg-button a {
background: url('../images/digg.png') 100% 100% no-repeat;
background-position: [COLOR="#FF0000"]0[/COLOR]px 0px;
}

Each of those images is only 40 x 40 px (with no hover state) so you don’t want them moved to the right by 60 and 160 px, as you had.

Brilliant Ralph, much appreciated.

Dave