Question about sprites

HTML & CSS
1

I’ve used sprites three time so far, however this new set of navigation that I designed, as you can see in the picture, the links do have gaps between each other. How do I account for those gaps in the css? margin or padding?

The other sprites I’ve done the links have been right up next to each other and I would do something like this to denote the anchors:

#nav a.home{width:75px;}
#nav a.design{width:75px;}
#nav a.development{width:207px;}
#nav a.webmarketing{width: 103px;}

And those widths I’d set for the anchors would basically just be right next to each other…i tried doing a margin and a padding in the code above but that really didnt work

2

I’m not clear on whether you want the gaps or not. Anyhow, it would be best to post your full HTML and CSS.

If you are using list items and want a space to the right of each, use something like

li {margin-right: 20px;}
3

I guess a margin-left could work, the padding left didnt work.

Is this the best way?

4

Sorry, yeah the pic I posted in the first post is how I want it too look

5

That’s still not very clear. Post your HTML and full CSS. Does the picture show the unhovered state at the top and hovered state at the bottom?

6

yes, ok let me work on getting my mark up on here

7

Just use a margins as Ralph said at the start.

Size each link to match the state of the hovered link and then space them out with margins.

It should be straight forward :slight_smile:

8