Jump to content

Check out our Community Blogs

Register and join over 40,000 other developers!

Recent Status Updates

View All Updates

- - - - -

CSS Sprites and Positions


  • Please log in to reply
3 replies to this topic

#1 circuz_phreak


    CC Lurker

  • Just Joined
  • Pip
  • 5 posts

Posted 24 April 2011 - 09:35 AM

I am writing a website and using a template that uses several images. I've combined them and was hoping to use sprites instead but I keep noticing that positions aren't the same.

For example on a page with three nested divs that contain a menu and have a left, center (repeated), and right image providing a nice rounded menu. I would like to make the left and right image apart of my sprite (because they are non-repeating), but instead of the right image displaying on the right side of the page it appears exactly beside the left image. The menu looks fine with regular images, the only problem is when trying to switch to sprites.

<div id="left">
<div id="center">
<div id="right">
Menu item 1, menu item 2, menu item3, etc...

I don't know why this code produces different results, can someone explain it to me and offer a fix?

Ps. i'm having this problem with a lot of other images but i only posted a small snippet to introduce the issue.

Left (works):
/*#left {background: url(../images/topbar-l.png) 0 0 no-repeat;} ORIGINAL*/
#left { background: url(../images/sprite.png) 0 0 no-repeat; background-position: -580px -1405px;}

Right (doesn't work, appears on the left side of the screen):
/*#right {background: url(../images/topbar-r.png) 100% 0 no-repeat;} ORIGINAL*/
#right { background: url(../images/sprite.png) 100% 0 no-repeat; background-position: -580px -1482px; }
  • 0

#2 circuz_phreak


    CC Lurker

  • Just Joined
  • Pip
  • 5 posts

Posted 30 April 2011 - 06:24 PM

No that's not it. I tried updating it and I have the same issue. Do i have to specify an exact position maybe like left:100px to push it over? Does that pose problems for RTL issues (right to left) viewers?

  • 0

#3 knox


    CC Lurker

  • Just Joined
  • Pip
  • 1 posts

Posted 12 May 2011 - 10:24 AM

Sorry for my english.
You have to write it as zomex said,
or the shortahand way
#left { 
background:url(..img/imgname.jpg) -50px -100px  no-repeat;

//Dont really understand what your trying to do
<div id="wrapper" style="float:left; width:100%;">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div> 

you can float all divs left, with diffrent width's and padding to position them or
float left #left
float right #right
and margin:auto; #center

rember to wrap al the divs
  • 0

#4 yassinebelkaid


    CC Newcomer

  • Just Joined
  • PipPip
  • 19 posts

Posted 21 August 2011 - 04:52 PM

if it doesn't want to work, you can change divs with table, so that you can have more controll over it.
  • 0

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download