Text in semi-transparent div is also semi transparent

[afish674]

Hi, I'm trying to make a nav bar which is semi transparent, however I only want the bar itself to be transparent and not the content within it. I have an outer div which makes the bar span the whole page width, regardless of screen size. Within this I have a content div which is centred and contains my nav UL for my links. Code as follows:

#top_nav{height:30px;background-color:#fff;opacity:0.5;filter:alpha(opacity=50);}#top_nav_cont{width:960px;margin-left:auto;margin-right:auto;font-family:NobileBold, Arial, Helvetica, sans-serif;}#top_nav_cont ul{height:30px;padding-top:6px;opacity:1;filter:alpha(opacity=100);}

As you can see I've tried to cancel the transparency by over-riding it in the UL but this didn't work. Also tried doing it in the nav-cont div to no avail. How do I make the text inside non-transparent? Thanks for your help.

[dsonesuk]

Give the outer container div position: relative;, add a inner container div, and give it position: absolute; top:0; bottom:0; right:0; left: 0; with the transparency and background-color you require, note you may have to experiment with the z-index: to set it behind the menu. Now because it is separate from the menu text it won't affect the transparency of the text at all.

[afish674]

I think I tried what you said but couldn't get it to work. I changed the code to:

#top_nav{position:relative;height:30px;background-color:#fff;opacity:0.5;filter:alpha(opacity=50);z-index:-100;}#top_nav_cont{position:absolute;top:0;right:0;bottom:0;left:0;width:960px;margin-left:auto;margin-right:auto;font-family:NobileBold, Arial, Helvetica, sans-serif;opacity:1;filter:alpha(opacity=100);z-index:300;}#top_nav_cont ul{height:30px;padding-top:6px;}

The top_nav_cont is already an inner container div for the top one. This code stops the links from working too. My HTML:

<div id="top_nav"><div id="top_nav_cont">  <ul>    <li><a href="#">Home</a></li>    <li><a href="#">About Us</a></li>    <li><a href="#">Contact Us</a></li>    <li><a href="#">Useful Links</a></li>    <li><a href="#">Shop</a></li>     </ul></div></div>

[dsonesuk]

the element that is going to use position: absolute; etc and transparency is going to be a separate child element on its own without ANY child elements (ul, li) or text within it! because it is using position: absolute; it occupies no space, so the ul li menu element will sit on top of it.The left, right etc tell it to fill the entire area of its position relative parent element.

[ShadowMage]

In other words, take the ul out of the top_nav_cont or create a separate div to act as the background. Set the opacity, background, and z-index on top_nav_cont (or the new div) instead of top_nav.

[afish674]

I did have a fiddle around with this but still no success. After browsing the net I found there is actually a more up to date, easier way of doing it using a colour filter property:

#top_nav{height:30px;background-color:#fff;background-color:rgba(255,255,255,0.5);}

You just adjust the RGB values to the colour you want! Thanks anyway

[dsonesuk]

Just to let you know

background-color:rgba(255,255,255,0.5);

won't work in older IE versions less than IE9

[ShadowMage]

Yep! The only problem is older browsers don't support rgba colors (IE 8 and down). If this isn't an issue, you're in luck.

[afish674]

Just to let you know

background-color:rgba(255,255,255,0.5);

won't work in older IE versions less than IE9

Indeed, but the declaring of the background colour as white beforehand should just mean that it'll be white instead for those users. Which isn't a big deal.