I wrote out a big post about what I was doing and what I want to do. But. Uh.

Here's a stripped version of my website: http://testing1010.webs.com/index.html
Not pretty. I know. Let's move past that.

contentBackground has a set opacity with a black background color to give the content some area for understandable text in content. I can't the opacity in the same div as the actual content because it would cause the content to have that opacity, as well. So I've basically done this:

<div class="contentBackground"></div>
<div class="content">
Stuff here
</div>

Both have absolute positioning and z-index to make this all work. I can't nest (either way) or the opacity still effects the content.

My problem is that I have to set the height on the contentBackground because it, obviously, does not fill out to the content div. This makes it static across all pages and either too long or too short. I really don't want to set them individually, but might if that's my only choice.

So.. please give me another choice?

How about removing opacity from .nav?

PS: Use an unordered list (<ul>) to present the "list" of links instead of paragraphs. Read http://boagworld.com/technology/semantic-code-what-why-how and http://csscreator.com/divitis

How would changing my .nav in anyway effect my .content or .contentBackground opacity?

I've sat and thought and fiddled and I think I've decided to go with a semi-transparent background image. Making my .content a child of the .contentBackground would make the opacity background as long like I want, but the opacity can not be overridden to make the text 0% opacity.

And although yet ANOTHER image background could be debated if it's worth it on another site, mine will have quite a few pictures in the content, so a 10x10 or something won't make a huge dif.