Problems aligning nav rollovers with header using css

[tobeeornot]

That would appreciated. Thanks

http://i1200.photobucket.com/albums/bb328/tobeeornot/nav_rollover.jpg

[furrball1383]

i realise that you’ve used left and top, but instead of that, try specifying the position with pixel co-ordinates instead?
http://jsfiddle.net/fgHga/4/
i just switched the left and top and right and top out and added px positioning instead, now for centering the words

[chrisburton]

wait, why are you using this as an image? This can clearly be created with simple css.

[tobeeornot]

@furball, that is great but the links still don’t line up under the image above.

@Chris, this is literally my first project so if you could give me some tips on how to achieve the same effect with css, that would be great.

[chrisburton]

Sure. Learn about border-radius, that will help you achieve the rounded corners.

[furrball1383]

yes chris, the question is will he be able to grasp the rounded edges and stuff. tobeeornot, I guess I shall try and recreate what you need but you’ll probably have to wait a few hours because its 1:48 am for me and I need to hit the sack, shall tackle it tomorrow! From what you’ve already got, the links aren’t centering because you have added padding in ems which is messing with their positioning, add that to the fact that “custom order” is a longer word than all the others and will not fit within the confines of the graphic due to the font size chosen.

http://jsfiddle.net/fgHga/7/

As @ChristopherBurton was saying, you don’t really need to use a sprite and it would be best if you didn’t seeing as your words are of different lengths and you’re using two colors anyway and not any specialized graphic. you can simply specify the color of the background to match that of the graphic and as for the rounded edges take a look at this page, it specifies the commands you need to use to specify which corners are round and what their radius is. Doing this would mean

1, the colors would work
2,the text would be aligned to the center of its block element without padding and such
3, you would have round borders on the bottom as you wish

[chrisburton]

Quick markup: http://jsfiddle.net/33fjh/

[tobeeornot]

thanks guys. you have both been a big help.

i am going to have dinner and watch a movie bu will be back tomorrow.

@furball
someone on another forum suggested the following:

“Drop the padding on the anchors.
Give the anchors a width.
Put the margin on the list items for the spacing”

I am going to try that and see how it goes.

The CSS looks like the best method though.

[furrball1383]

@tobeeornot, just check out ChristopherBurton’s fiddle, its almost exactly what you want
just change the colors for the text and their font sizes, change the hover and off state colors for the background and change the width of the ul and voila you should have it all. I was too lazy and sleepy lol, and Chris is a faster coder than me :P so while I would’ve waited for the morning, his example should suit you just fine after you’ve tweaked it.

[Author]

Posts