css navbar in a layer

[SanDiegoPaul]

I've got a customer that gave me all the graphics for thier website, all I've got to do is set it up. Sounds easy enough, huh?

Well the fun's just starting. I've got the pages set up and I'm trying to put a nav bar where they want it, but that's right on top of an image. No prob, I thought, just draw a layer there.

The Css navbar will not work within the layer (drawn ontop of the page in Dreamweaver). What am I missing? Here's the navbar - it's simple and works elsewhere:

/*navigation styling */
#navBar {
padding: 4px 0px 4px 20px;
margin: 0px;
border: none;
background-color: transparent;
color: #FFFFFF;
background-image: url(images/navBack.jpg);
background-repeat: repeat-x;
height: 30px;
}

#navBar ul {
margin: 0px;
padding: 0px;
list-style-type: none;

}
#navBar li {
display: inline;
list-style-type: none;
padding: 0px;
margin: 0px;
}

#navBar a {
background: transparent;
border: none;
margin: 0px;
color: #333333;
text-decoration: none;
padding: 0px 10px;
border-right: 1px solid #FFFFFF;
}

#navBar a:link, #navBar a:visited {
color: #333333;
text-decoration: none;
}

#navBar a:hover {
color: #FFFFFF;
background-color: #000000;
background-color: transparent;
}

#navBar a:active {
background-color: transparent;
color: #FFFFFF;
}
/*End NavBar styles */

How can I draw it onto an existing image and have it work?

[sldesigns]

how about a container div to hold the background image?

#navContainer {
background:#fff url(yourNavBackground.gif) no-repeat left top;

in the html:
<div id="navContainer">
<div id="navBar">
<ul>

etc

[SanDiegoPaul]

SLdesigns thanks mucho. That makes sense. Would that scheme allow me to layer text content right over their background image too?

[sldesigns]

Yes, you can assign a background to the body or an overall wrapper tag, and content in the page will be layered over that.

Keep in mind that background images of divs in the layout will be on top of the body background image, layering the background images on top of each other. The content (text and images in the html) will lie on top of the background images.

This sounds confusing, maybe this will help:
(on top to underneath)
- text, images within a div <div id="navContainer">
- background image assigned to #navContainer
- background image assigned to body or wrapper div

hope this is what you meant!