Problems With CSS Sprites

slippy
avatar
rank Enthusiast

Enthusiast


Posts: 144
Joined: 2005-01-24

Posted: Thu, 2008-05-15 14:11

I'm just trying to apply the CSS Sprite method to my navigation but I'm having a few problems getting it all aligned properly. The bulk of the code is there is just the tweaking I need a bit of help with.

I've uploaded a sample here: http://tinyurl.com/43n9gh

The first button seems ok but the buttons then start getting in a bit of a mess.

Any suggestions?

Thanks

gary.turner
gary.turner's picture
rank Moderator

Moderator


Posts: 5645
Joined: 2004-06-25
Location: Dallas

When positioning the

Posted: Thu, 2008-05-15 15:52

When positioning the background image, the first value is the horizontal offset. Reverse your order.

cheers,

gary

A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.

My site is slo-o-owly being reconstructed; visit anyway.

slippy
slippy's picture
rank Enthusiast

Enthusiast


Posts: 144
Joined: 2005-01-24

Gary, I thought background

Posted: Thu, 2008-05-15 16:32

Gary,

I thought background postions was (x y)? So position from the left edge of the container (x) followed by the position from the top of the container (y)?

I've reversed the values. Things have changed a little but still some way off. Can you elaborate a little more?

Thanks

slippy
slippy's picture
rank Enthusiast

Enthusiast


Posts: 144
Joined: 2005-01-24

Aha! Cracked it! You were

Posted: Thu, 2008-05-15 16:55

Aha! Cracked it!

You were right about the coordinates and getting x and y the wrong way around but also some errors in the ul and li styling at the top were causing a few issues. Chaning it from:

#nav-main {
width: 300px;
outline: 1px solid green;
}

ul#nav {
float: left;
margin-right: 20px;
background: url(images/nav-sprites.png);
outline: 1px solid red;
}
ul#nav li {}

to:

#side {
float: left;
margin-right: 20px;
width: 300px;
}
ul#nav {
background: url(images/nav-sprites.png);
}
ul#nav li {
float: left;
list-style: none;
}

And then a few tweaks to the measurements and margins got it all aligning as it should.

Thanks for the help. Sometimes it's just that first spot that gets the ball rolling Smiling

Cheers

slip