display custom social buttons horizontally with an unordered list

[tizak]

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,

[tizak]

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

Thanks,

[ralph.m]

I have come across the use of unordered lists, is this the correct way to lineup custom, background image custom social buttons.

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.

[tizak]

Thanks Ralph

[tizak]

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>

[ralph.m]

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;
}

[tizak]

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.

[ralph.m]

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

[ralph.m]

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: 60px 0px;
}

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

you should have this:

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

.custom-digg-button a {
background: url('../images/digg.png') 100% 100% no-repeat;
background-position: 0px 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.

[tizak]

Brilliant Ralph, much appreciated.

Dave