CSS <li> background photo problem
at http://www.goodshow.tv I have a navigation problem. I have a class that puts an arrow image to match the right edge of the white border. The problem is that it bases the position on the left side of the text. Is there a more absolute way to position it?
a source to share
I'm not sure exactly what you mean, but if you take a background with <a> and .currentpage and put the following in a <li> you get something, perhaps closer to what you want. Please confirm what you want if it is not :-)
background: transparent url(http://www.goodshow.tv/images/nav_arrow.png) no-repeat scroll 95% 50%
I would probably do it on <li> 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 the background to the right edge and adjust the correct fill.
You might want to play with the size of the arrow or the line of your text for vertical alignment. In my opinion 55% looks better than 50% for vertical, and I suppose it might be a hack just adjusting that number.
a source to share
I would choose an option like Graphain. It looks like you have one list for your navs and another list for your arrows. You could combine them and make your life a little easier. :) The idea is that your elements li themseves are wide enough to show arrows. Then you'll set a background on one of these li to use the arrow and place it on the right side for the current page. Here's what you can change in style to do something like this ...
#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 will need to change the current page while on the element to the li element (and change 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 together.
a source to share