The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

CSS Sprite Help Floting Icons

View previous topic View next topic Go down

Solved CSS Sprite Help Floting Icons

Post by ioncube on September 5th 2011, 4:26 am

Here is my progress
Css part:

Code:

.flt-wdt{position:fixed; margin-right:10px; right:0; top:40%;}
.flt-wdt ul{list-style:none;}
.flt-wdt li{background: url(spr1.png) no-repeat;margin:0px;padding-top:0px;list-style:none;}
.flt-wdt li a{height:32px;display:block;}
.flt-wdt :hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1.2) rotate(6deg);
}

#flticon-001{  background-position: 0 0; width: 32px; height: 32px; }
#flticon-002{  background-position: 0 -42px; width: 32px; height: 32px; }
#flticon-003{  background-position: 0 -84px; width: 32px; height: 32px; } 
#flticon-004{  background-position: 0 -126px; width: 32px; height: 32px; }

Html part:
Code:

<!DOCTYPE html>

<html>



<head>
   <title>Float Icon</title>
   <link href='floaticn.css' rel='stylesheet' type='text/css'/>

</head>


<body>
<ul class="flt-wdt">
  <li id="flticon-001"><a href="http://www.facebook.com/pages/DefenceDog/183379545033991" target="_blank" title="Follow Me on Facebook"></a></li>
  <li id="flticon-002"><a href="http://twitter.com/defencedog" target="_blank" title="Follow Me on Twitter"></a></li>
  <li id="flticon-003"><a href="http://feedburner.google.com/fb/a/mailverify?uri=Defencedog&amp;loc=en_US" target="_blank" title="Subscribe by Email"></li>
  <li id="flticon-004"><a href="http://feeds.feedburner.com/Defencedog" target="_blank" title="Subscribe to RSS"></li>
</ul>



</body>

</html>

image used:


Problem:

The last icon that is the RSS icon is heavily misplaced...hover your mouse over it & won't show the URL its supposed to bwi



Last edited by ioncube on September 7th 2011, 3:07 pm; edited 1 time in total

ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

Solved Re: CSS Sprite Help Floting Icons

Post by ioncube on September 6th 2011, 9:32 am

I have done a lot of homework now help for me is justified...

ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

Solved Re: CSS Sprite Help Floting Icons

Post by shadowz au on September 6th 2011, 10:54 am

Fix it..

U forgot to add </a>

Code:
<a href="http://feeds.feedburner.com/Defencedog" target="_blank" title="Subscribe to RSS"></a>

shadowz au
Forumember

Male Posts : 280
Reputation : 30
Language : Australia
Location : Sydney

http://tommyzserver.forummotion.com

Back to top Go down

Solved Re: CSS Sprite Help Floting Icons

Post by ioncube on September 6th 2011, 11:09 am

^^Thnx for help; but it doesnt solve the problem; you hover your mouse over rss icn & instead of saying 'Subscribe to rss' it shows 'subscribe to email'??

ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

Solved Re: CSS Sprite Help Floting Icons

Post by shadowz au on September 6th 2011, 11:18 am

Put </a> again.. for email

shadowz au
Forumember

Male Posts : 280
Reputation : 30
Language : Australia
Location : Sydney

http://tommyzserver.forummotion.com

Back to top Go down

Solved Re: CSS Sprite Help Floting Icons

Post by ioncube on September 6th 2011, 12:41 pm

@shadowz au wrote:Put </a> again.. for email
I think I have serious Optometry issues Neutral

thnx that solves it well

however do tell me is there an other 'optimisation' you may suggest for my css part

ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

Solved Re: CSS Sprite Help Floting Icons

Post by shadowz au on September 6th 2011, 1:09 pm

No problem Smile
nice forum

shadowz au
Forumember

Male Posts : 280
Reputation : 30
Language : Australia
Location : Sydney

http://tommyzserver.forummotion.com

Back to top Go down

Solved Re: CSS Sprite Help Floting Icons

Post by ioncube on September 6th 2011, 5:19 pm

@shadowz au wrote:No problem Smile
nice forum
Thnx

ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum