Centering the page menu bar with a background image (and "width: "?)

Fux · #1 Dec 14, 2010, 02:57 AM

Hi -
I'm having some trouble with the menu bar on http://www.urgeschmack.de/

I am using %page-center to get the bar centered. But then the background image won't be shown over the full width but instead just as far as the buttons reach.

That's why I added

Code:

div#menu1 {
	border: none;
	width: 960px;
}

But that kind of disables the center-alignment.
To still get my buttons kind of centered, I am using this:

Code:

div#menu1 ul.rMenu li a:link, 
div#menu1 ul.rMenu li a:hover, 
div#menu1 ul.rMenu li a:visited, 
div#menu1 ul.rMenu li a:active
    {
    padding: 4px 37px;    
    }

But, as you can see if you hover above the last button ("Über Felix"), that solution is flawed as well.

I tried a lot but I just don't get it to work.

Could you help me with this?