Thread: CSS menu using single page

I am completely remaking my wife's site and it's coming along well (I think).
However I have spent over 4 days trying to get a horizontal menu bar installed.

I've published the index page under a subdomain: HERE

I started with a menu where the words were on tabs and would move up when hovered. I've abandoned that.

I have now made a menu via CSS MenuMaker - it's number 014 - far right column third from the top. It generates the code. The colors here show black and blue on hover. My wife wants a dark purple (Red:128;Green:0;Blue:12 with white lettering which turns to a light purple (the color of the page-Red: 198;Green:140;Blue:255) with black lettering when hovering. I got the colors of the gifs changed in Paint.
It should run all the way across the screen and be placed as a divider directly below the header containing goofy...logo.

I am using the single page method with php. The white box on the right is actually on each page with the info re the product - all else is in the header.html with the code "include..." placed on each page.

I"m gray-haired now but I have hair. Another day or so of this and I may not have hair. Plus my wife knows how she wants it.

You will note on the page as linked above what I am getting is a vertical menu - sorta - with the coding appearing. I"ve done everything I can read about and think about but to no avail.

I'd appreciate it if anyone can do this. Just let me know your price and any other info you need from me.

Thanks
Jerry

Hi, look like two things you might have to do.
1 . have you downloaded the images for the menu from that site? If so you need to place a file publisher on your BV page & add both images.
2. you are missing the part in red on the css that will go in your html head area, & remove the images/ part marked in blue. If you just cut & paste the part below & replace the one you have in the head of the page at the moment, & it should work fine.
Note.
Remember to pull out your html box to let the menu expand horizontally.


<style type="text/css">
ul#menu{margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:40px;
text-transform:uppercase;
font-size:13px;
background:transparent url("black.jpg") repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;}
ul#menu li{display:block;
float:left;
margin:0;
pading:0;
border-right:1px solid #ffffff;}
ul#menu li a{display:block;
float:left;
color:#ffffff;
text-decoration:none;
padding:12px 20px 0 20px;
height:24px;
height:40px;}
ul#menu li a:hover{background:transparent url("blue.jpg") repeat-x top left;}
</style>

Here is the code:

<style type="text/css">
ul#menu{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:40px;
text-transform:uppercase;
font-size:13px;
background:transparent url("purple.gif") repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;
}
ul#menu:hover {
color: #000000;
}
ul#menu li{
display:block;
float:left;
margin:0;
pading:0;
border-right:1px solid #ffffff;
}
ul#menu li a{
display:block;
float:left;
color:#ffffff;
text-decoration:none;
padding:12px 20px 0 20px;
height:24px;
height:40px;
}
ul#menu li a:hover{
background:transparent url("purple1.gif") repeat-x top left;
color:#000000;
}
</style>

You need to copy / paste in the Between Head tag of your page HTML.

Here are the two images (upload them in your site using either FTP or the BV built in file uploader as Chris suggested):

http://www.dbtechnosystems.com/Tips/css_menu_images.zip

And here is the demo:


http://www.dbtechnosystems.com/Tips/css_menu.html

Ah! your not meant to notice that i missed this part of the question. lol

Thank you! Thank you! Thank you!
It works!
You guys are great. I really appreciate your help.
If I owe you just let me know. It's worth it. Now I'm sorta a hero to my wife (yeah, right)
Thanks again.