SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to display images inline...need a little help

    On this page, I have 3 social media icons. I want to display them where the "RSS" icon is currently, but I can not get them to move to where I want them to. Please advise. Thanks!

    http://theicedteaguy.com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    In your HTML, replace this:

    Code:
    <a target="_blank" title="Follow Us On Facebook" href="http://facebook.com"><img src="http://theicedteaguy.com/wp-content/themes/bleach/images/facebook_icon.png"></a>
    <a target="_blank" title="Follow Us On Twitter" href="http://twitter.com"><img src="http://theicedteaguy.com/wp-content/themes/bleach/images/twitter_icon.png"></a>
    with this

    Code:
    <a id="fb-link" target="_blank" title="Follow Us On Facebook" href="http://facebook.com"></a>
    
    <a id="tw-link" target="_blank" title="Follow Us On Twitter" href="http://twitter.com"></a>
    and add this to your CSS styles:

    Code:
    #tw-link {
    	background: url(http://theicedteaguy.com/wp-content/themes/bleach/images/twitter_icon.png) no-repeat 0 0;
    	display: block;
    	height: 36px;
    	position: absolute;
    	right: 56px;
    	top: 15px;
    	width: 37px;
    	text-indent: -9999px;
    }
    
    #fb-link {
    	background: url(http://theicedteaguy.com/wp-content/themes/bleach/images/facebook_icon.png) no-repeat 0 0;
    	display: block;
    	height: 36px;
    	position: absolute;
    	right: 98px;
    	top: 15px;
    	width: 37px;
    	text-indent: -9999px;
    }
    (Not necessarily the best use of code, but the easiest solution.)

    EDIT: be aware that the links to Facebook and Twitter go to the home pages of each site, rather than to your account page on each site, so grab the actual url of your accounts in each case, or following these links will be a waste of time for your visitors.

  3. #3
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did that, just now, and the RSS icon is still there, but the facebook and twitter icons are nowhere to be found. This is kind of tricky...that is all I could get to happen in my tinkering so far, also.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You haven't added the CSS to your stylesheet.

    BTW, I meant to add in the red bits to the HTML:

    Code:
    <a target="_blank" title="Follow Us On Facebook" href="http://facebook.com"><img src="http://theicedteaguy.com/wp-content/themes/bleach/images/facebook_icon.png">Facebook</a>
    <a target="_blank" title="Follow Us On Twitter" href="http://twitter.com"><img src="http://theicedteaguy.com/wp-content/themes/bleach/images/twitter_icon.png">Twitter</a>

  5. #5
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Done. It looks perfect! Thanks!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Make sure you change the URLs though. At the moment you are just linking to the Facebook home page and Twitter home page. Nobody can follow you by going there. It needs to be something like

    http://www.twitter.com/IcedTeaGuy

    (or whatever the account it). But maybe not set up yet? Anyway, be warned.


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
  •