4 replies to this topic

[circuz_phreak]

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...
</div>
</div>
</div>

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; }

[zomex]

Hello,

I think the issue may be because you've declared background positioning twice:

#right { background: url(../images/sprite.png) [COLOR="red"]100% 0[/COLOR] no-repeat; background-position: [COLOR="red"]-580px -1482px[/COLOR]; }

try using this format instead:

#right { background-image: url(../images/sprite.png); background-repeat: no-repeat; background-position: -580px -1482px; }

Jack

[circuz_phreak]

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?

Thanks.

[knox]

Sorry for my english.
You have to write it as zomex said,
or the shortahand way

#left { 

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

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

[yassinebelkaid]

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