homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

horizontal position with css sprites
aligns vertical

5+ Year Member

Msg#: 4444862 posted 10:56 pm on Apr 24, 2012 (gmt 0)

Hi guys, I'm new to usign sprites, I'm trying to achieve a horizontal share bar with a sprite.
Now the image itself is 192px width by 32px height but when i use this css and html it shows vertically.

#ceramic-blogger_png{height:32px;width:32px;background-position:0 0;}
#ceramic-facebook_png{height:32px;width:32px;background-position:-32px 0;}
#ceramic-google_png{height:32px;width:32px;background-position:-64px 0;}
#ceramic-rss_png{height:32px;width:32px;background-position:-96px 0;}
#ceramic-twitter_png{height:32px;width:32px;background-position:-128px 0;}
#ceramic-yahoo_png{height:32px;width:32px;background-position:-160px 0;}

<a class="sprites" id="ceramic-blogger_png" href="#"></a>

<a class="sprites" id="ceramic-facebook_png"></a>

<a class="sprites" id="ceramic-google_png"></a>

what am i missing?

any help much appreciated.

Edit: added float:left and its fine.
Are there any browser issues to look out for?



Msg#: 4444862 posted 2:04 am on Apr 25, 2012 (gmt 0)

Yes, floats could potentially mess up the layout of your web page if not cleared. So add
overflow: hidden to the containing element of these links, or insert an empty element with clear:both after a#ceramic-google_png. The latter is considered a bad practice by some developers, but use whichever makes better sense to you.

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4444862 posted 4:47 pm on Apr 25, 2012 (gmt 0)

It's only "bad practice" because the point is to separate content from presentation in your page code, and a clearing element is an otherwise empty element used to alter presentation - therefore, it's superfluous so if there's a way to avoid adding it, you should. :-) To clarify the previous points,

1. You use overflow:hidden on the **parent** container to shirnk wrap/contain all floated children,
2 add a clearing element AFTER all floated elements to clear them and prevent following elements from floating around the floated element,
3. or float the parent container too - this will cause it to "shrink wrap" and contain all floated children.

With the third solution, you may have to clear it or use #1 or #2 on THAT container's parent. :-)

when i use this css and html it shows vertically.

What does? The anchors themselves or the backgrounds inside the anchors?

If it's the anchors themselves, more info is needed. If it's an LI you're floating, LI's are inline elements by default and you've got block elements inside them. You need to set the display of the LI's too. If you do this, make sure you set the width of the li's to 32px like your anchors, and also set a width the the parent UL.

If you're using them raw as shown (which you shouldn't,) make sure the parent container has a width set to it that's wide enough to accept the width of all the icons with padding and margins.

If it's the backgrounds giving you trouble: You have the basic elements for sprit-ing, and the float has nothing to do with it. :-) You've set the display of the anchors to block, background image/position/repeat is fine, the only thing I'd add is to simplify the .sprite shorthand and since they're all the same width and height, move that into the base .sprite code:

background: transparent url(images/sharesprite.png) no-repeat;


I'll get to why I added the bolded parts in a minute. The rest of your selectors follow without the width and height:

#ceramic-blogger_png{background-position:0 0;}
#ceramic-facebook_png{background-position:-32px 0;}
#ceramic-google_png{height:32px;width:32px;background-position:-64px 0;}
#ceramic-rss_png{background-position:-96px 0;}
#ceramic-twitter_png{background-position:-128px 0;}
#ceramic-yahoo_png{background-position:-160px 0;}

So what you have is a 32 px X 32 px "window" you're moving the background around in. By your positions, I'm presuming your icons are laid out in a strip, so I don't see anything that's incorrect - this should work. You likely have some other CSS following this chunk that is overriding these selectors - like

a { display:inline; }

That would kill it for sure. :-) Examine it in the FireFox Firebug extension, there's no reason this on it's own won't work. Another is that ID's need to be unique, make SURE there are no other elements on the page with these same ID's.

What you may need to do is add specificity to your selectors to avoid other selectors from overriding what you have here.

a#ceramic-blogger_png{background-position:0 0;}

or be REALLY specific

#header #nav ul li a#ceramic-blogger_png{background-position:0 0;}

Something along those lines - there's many ways it can go wrong, Firebug will tell you what's up.

I would change your links with REAL content, and the bolded CSS above would allow you to do so:

<a class="sprites" id="ceramic-blogger_png" href="#">Blogger</a>

<a class="sprites" id="ceramic-facebook_png">Facebook</a>

<a class="sprites" id="ceramic-google_png">Google Plus</a>

Why? Screen readers will now have content to read, and the in-link text may establish relevance to search engines. Empty elements means you've got nothing to say. :-)


5+ Year Member

Msg#: 4444862 posted 9:56 pm on Apr 26, 2012 (gmt 0)

thanks for the insight guys, rocknbil as always you the man!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved