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

HTML & CSS
1

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

In your HTML, replace this:

<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

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

#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

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

You haven’t added the CSS to your stylesheet. :slight_smile:

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

<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">[COLOR="Red"]Facebook[/COLOR]</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">[COLOR="Red"]Twitter[/COLOR]</a>
5

Done. It looks perfect! Thanks!

6

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