Chris Overland wrote:
DHTML *seems* to allow for 'layers' where a menu can be placed over an image. I'm hopeful that there's a similar provision in CSS.
DHTML *seems* to allow for 'layers' where a menu can be placed over an image. I'm hopeful that there's a similar provision in CSS.
There is, but for what your are trying here you don't need it.
First, to make sure your page renders correctly, you need a valid doctype, so for the kind of code you are using on your page you should go with html transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This needs to be the first line of your html. Also, you can remove this line:
<img src="CB_BAR.JPG" width="1000">
And replace it with this:
<div id="menu-container">
This #menu-container div will do just that, contain your menu, so it needs to be closed after your menu. Insert "</div>" after the menu's final "</ul>".
The page is missing the head section, so create one with this code after "<html>" and before "<body>"
<head>
<title>Untitled</title>
<!-- the following link tag was in the body, but belongs in the head -->
<link rel="stylesheet" type="text/css" href="css/menu-menu.css" media="screen">
<style type="text/css">
#menu-container {
width:1000px;
height:45px; /* or whatever height you need */
background-image:url(CB_BAR.JPG);
position:relative;
}
ul.menu-menu {
padding-top:6px; /* this adds space above the menu so it isn't flush with the top of the background image. */
}
</style>
</head>
<title>Untitled</title>
<!-- the following link tag was in the body, but belongs in the head -->
<link rel="stylesheet" type="text/css" href="css/menu-menu.css" media="screen">
<style type="text/css">
#menu-container {
width:1000px;
height:45px; /* or whatever height you need */
background-image:url(CB_BAR.JPG);
position:relative;
}
ul.menu-menu {
padding-top:6px; /* this adds space above the menu so it isn't flush with the top of the background image. */
}
</style>
</head>
