How to make the menu bar transparant, higher and shove it up?
 

Hi all,

I am working on a website and I have to little knowlegde of CSS, it's a puzzle to me. Hopefully you can help me out.
I want my menu to be higher up and I made a partially transparant gif so it covers the header some, but not all.
I also want it higher in size. And if possible I would like the mouseover shown as a square button sliding over the menu bar.
Is there a way that I can realize this? I made a gif called gradient_bar.png and used this code, but it doesn't work:


div#menu1 {
background-image: url(/wp-content/themes/atahualpa/images/gradient_bar.png') !important;
background-repeat:no-repeat;
height:47px;
border: 0;
}

div#menu1 ul.rMenu {
}

ul.rMenu li a:link,
ul.rMenu li a:hover,
ul.rMenu li a:active,
ul.rMenu li a:visited,
ul.rMenu li {
}

I put this in the CSS inserts box.
The website is here (and it's far from finished):
http://www.claudiacreates.nl/menu-1/

It should become like this: http://www.claudiacreates.nl/wp-cont...ngendael-2.jpg

Thanks upfront.

This is a matter of playing with CSS positioning elements and perhaps padding for the menu list items on the top and bottom to give it more height. This isn't complex but would take a half hour or more to figure out and write up instructions. The best bet is to check out w3schools.com for CSS positioning properties and then use Firebug to virtually play with the CSS. That is what I do.

Thank you Larry, will do :)