CSS <li> background image position issue

Question

at http://www.goodshow.tv I've got a problem with the nav. I have a class that puts an arrow image, which should line up with the right edge of the white border. Problem is, it bases the position on the left side of the text. Is there a more absolute way to position it?

Answer 1

I'm not sure exactly what you mean but if you take the background off the <a> and .currentpage and put the following on the <li> you get something maybe closer to what you want. Please restate what you want if it's not :-)

background: transparent url(http://www.goodshow.tv/images/nav_arrow.png) no-repeat scroll 95% 50%

I'd probably do this on the <li> instead though:

background: transparent url(http://www.goodshow.tv/images/nav_arrow.png) no-repeat scroll 100% 50%
padding:8px 20px 7px 0;

i.e. fix background to right edge and adjust the right padding.

You may want to play with the size of your arrow or the line-height of your text for vertical alignment. To my eyes 55% looks better than 50% for vertical and I figure it might be a hack just adjusting this number.

Answer 2

I'd go with an option like Graphain recommended. It looks like you have one list for your nav items, and another list for your arrows. You could combine these and make your life a bit easier. :) The idea is that your li elements themseves are wide enough to show the arrows. Then you'd set the background on one of these li's to use the arrow and position it on the right side for the current page. Here's what could be changed style-wise to do something like that...

#nav { width:240px; } /* should go all the way to that vertical area where there arrows are) */
#nav li.currentpage { background:url(images/nav_arrow.png) no-repeat right center; } /* add the error */
#nav ul li { margin-right:30px; } /* will add a bit of spacing after each lit between the text and the arrow */

Also you'd have to change your currentpage from being on the a element to being on the li element (and change the a.currentpage to use something more like

#nav ul li.currentpage a {} /* your current a.currentpage style */

After that you should be able to remove the arrow div all together.