How can I use CSS to set as my <li> background if I'm using the Zend framework?

Question

Everything else 100% works, so I'm 100% positive the error lies in the file path I'm using for the image.

The image doesn't load.

Either

A) I need the file to appear in the Zend workspace, how do I do that.

or

B) My path is wrong.

Here's my file heirarchy:

And here's my CSS code:

#nav-menu li{
    float: left;
    margin: 0 0.15em;
} 

#nav-menu li a:HOVER{
    background-color: yellow;
}

#nav-menu li a{
    background: url(./img/buttonbackground.jpg) #fff bottom left repeat-x;
    height: 2em;
    line-height: 2em;
    float: left;
    width: 9em;
    display: block;
    border: 0.1em solid #dcdce9;
    color: #0d2474;
    text-decoration: none;
    text-align: center; 
} 

I assure you, the image IS physically there, in my disc, but the path is wrong I guess.

Answer 1

The leading . is making the image url relative to the url of the html file. Removing the . will make the path absolute to the host.

It's worth noting that the Zend Framework uses url rewriting to route all urls which don't map to a file to index.php.

Answer 2

A relative path must be relative to the css file, if the code you posted is in that CSS folder, you need:

background: url(../img/buttonbackground.jpg) #fff bottom left repeat-x;

Answer 3

I've had this too, but cannot remember what I did to fix it.

Try to find the the icon depicting a small triangle pointing down (top of the file browser). It's the right most icon with a tooltip labeled View Menu. Click it and pick Filters. Check if there is a filter that might be causing the file to be invisible. If this doesn't help try switching perspectives. Also try to right click the folder and pick Refresh.

You can also try to copy the file from the physical location by right click copy and paste it into the img folder through your Zend Studio/Eclipse to make sure you really placed it in there.

If I misunderstood the question and this is only about the file not showing in the webbrowser, disregard the above and remove the . (but not the /) from the filepath in the CSS file to make it relative to the WebRoot.