Please help with transparent navigation in CSS

[aejacks8]

Hi, I am trying to achieve the following look:

http://eden.rutgers.edu/~jcener/fun/layout.jpg


At this point, I have this

http://eden.rutgers.edu/~jcener/may282/


On the left side bar, I have the top most image (called video.jpg - Oscar Luna - guy in black shirt) in the code, but it doesn't appear in FF. Here is the code:

<div id="header">
<img src="header.jpg" alt="Los Cabos Header Image" />

</div> <!--end header-->

<div id="opnav">
<div id="topnav">
<ul>
<li><a href="">Reservations</a></li>
<li><a href="">Kashrut</a></li>
<li><a href="">Rates</a></li>

<li><a href="">Package Details</a></li>
<li><a href="">Amenities</a></li>
<li><a href="">Accommodations</a></li>
</ul>
</div> <!--end top nav-->
</div>

<div id="left">

<img src="video.jpg" />

<div class="sidebox"><img class="floatleft" src="girl.jpg" /><p><a href="">BOOK NOW ONLINE</a> OR CALL (877)452-8744</p></div>

<div class="sidebox"><img class="floatleft" src="food.jpg" /><p><a href="">GLATT KOSHER GOURMET MEALS</a></p></div><br />

<p class="tagline">"Bringing kosher travel to its highest dimension."</p><br /><br />

<p class="tagline">Presented by</p><br />

<img src="logo.gif" alt="Le Voyage Travel Logo" /><br /><br />


<p id="taglinesm">KOSHER VACATIONS</p>

</div>

And the CSS

/****** NAV *******/



#opnav {background: url(navbg.gif) no-repeat;

opacity: .5;}



#topnav {list-style: none;

padding: 0; margin: 0 0 20px 0;

display: block;

overflow: hidden;

margin-top: -39px;}



#topnav li {display: inline;}



#topnav li a {display: block;

float: right;

padding: 10px 20px;

color: #000000;

text-decoration: none;}



#topnav li a:hover {background: #7293ab;

color: #fff;}



/****END NAV******/



#left {float: left;

height: 714px;

width: 260px;

margin: -10px 20px 0 5px;

background: #000 url(design.jpg) no-repeat;

background-position: center;

border: 1px solid red;

color: #fff;

font-family: arial, sans-serif;

text-align: center;}



.tagline {font-size: .9em;

font-weight: bold;}



#taglinesm {font-size: .7em;

font-weight: bold;}


Thanks for reading/looking!

[jcdevelopment]

Well its not showing up in any browser i look at, which means 1 of 2 things.

1. You have not uploaded the image to your server. so the html cannot find it.

2. The image path is wrong. You have it in the wrong folder.

I would go back and take a look to see if maybe there is a mistake somewhere in that area. We cant see whats on your server so that makes it hard.

Good luck!

[aejacks8]

JCDev - You were right, there was something wrong with the file.

I still have a problem with a few things, mostly the transparency behind the menu. It makes the entire menu (text, hover, and bg hover) transparent as well. How can I fix this?

Updated XHTML:

/****** NAV *******/

#opnav {background-color: #fff; opacity: .5;}

#topnav {list-style: none;
padding: 0; margin: 0 0 20px 0;
display: block;
overflow: hidden;
margin-top: -39px;}

#topnav li {display: inline;}

#topnav li a {display: block;
float: right;
padding: 10px 20px;
color: #000000;
font-weight: bold;
text-decoration: none;}

#topnav li a:hover {background: #7293ab;
color: #fff;}


Thanks!

[vahsi000]

Try putting the links on top of the transparent layer instead of inside of it.

Try This:
<div id="topnav">
<ul>
<li><a href="">Reservations</a></li>
<li><a href="">Kashrut</a></li>
<li><a href="">Rates</a></li>

<li><a href="">Package Details</a></li>
<li><a href="">Amenities</a></li>
<li><a href="">Accommodations</a></li>
</ul>
</div> <!--end top nav-->
<div id="opnav">
</div>

[jcdevelopment]

so when you hover over the links you dont want them to be transparent anyomre?

EDIT** oops, waited too long..