SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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,

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi folks, I think I have found what I need, if I need to reopen the thread I will post my questions.

    Thanks,

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by tizak View Post
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    .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;
    }
    Code:
    <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>

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Try these styles:

    Code:
    .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;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Can you post a link? It's hard to work with code when we can't see you images.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    OK, thanks for sending your link via PM. The problem is the background position you have set on each icon. Instead of this:

    Code:
    .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:

    Code:
    .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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant Ralph, much appreciated.

    Dave


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •