Page 1 of 1

CSS overlay DIV problem

Posted: Tue Jan 31, 2006 8:44 am
by Moocat
I'm trying to make a "news" box that will dynamically grow when more content is inside it. Pretty simple right? Well it was up to until I ran into the new requirement of "make the background partially transparent". I struggled a bit and found a way to do this, through the use of:

Code: Select all

opacity: .50;
filter: alpha(opacity=50);
Unfortunately however, opacity has the discerning effect of making everything within the element (mainly concerned with text) partially opaque as well. What I've been trying to do, is to lay down a background div with my opaque background color and then to lay down another div containing my news content on top of this.

This in itself works, however since one of the divs must have an 'absolute' position on the other div (in order to get them to overlap), the window will not expand with content (only the background div). I tried setting the background div to absolute and the content to relative but without success as well. Hopefully someone with some expert experience could show me a new trick :) Here is my current general layout of the specified problem area:

Code: Select all

<div id="rightnav">
	<!-- News area -->
	<div id="news">
		<!-- Opacity 1 is applied here to make sure the title stays fully opaque -->
		<div style="background-color:#104E8B; border-bottom:1px solid #2F2F4F; background:url('stuff/bar1x30.gif'); color:#0000FF;"><b>News Story Title <img src="stuff/minus.gif" height="13"></b></div>
		<!-- Opacity is applied here, this is the background, when it's setup like this the background color doesn't show up at all -->
		<div id="newscontent" style="position:absolute;top:0px;">
			<br>
			<br>
			<br>
		</div>
		<!-- Parent window extends, however, no background is applied at all (perfectly transparent) -->
		<div id="otherstuff" style="top:0px; background:transparent;">
			Content Goes here<br>
			More stuff goes here
		</div>
	</div>
	<div id="news">
		<!-- Opacity 1 is applied here to make sure the title stays fully opaque -->
		<div style="background-color:#104E8B; border-bottom:1px solid #2F2F4F; background:url('stuff/bar1x30.gif'); color:#0000FF;"><b>Greys land on Earth</b></div>
		<!-- This window determines size of parent window, but it's not the one I want (I want otherstuff to extend it as above) opacity is applied correctly however (text is full, background is 0.5) -->
		<div id="newscontent">
			<br>
			<br>
		</div>
		<!-- Opacity is applied here, this is the background, will not extend the border of "news" -->
		<div id="otherstuff" style="position:absolute;top:0px;margin-top:15px;">
			Other <a href="#">important</a> stuff.
			<br>
			<br>
		</div>
	</div>
	<div id="news">
		<div style="background-color:#104E8B; border-bottom:1px solid #2F2F4F; background:url('stuff/bar1x30.gif'); color:#0000FF;"><b>Cows strike central earth city</b></div>
		<!-- Parent window extends properly, but text is opaque as well :( -->
		<div id="newscontent" style="top:0px; width:100%">
			Other <a href="#">important</a> stuff.
			<br>
			<br>
		</div>
	</div>
This code shows the three types I have recieved thus far, each having a bit correct, but none are completing all the effects I'm looking for. Thanks for any help you can give :)

Posted: Sun Feb 19, 2006 5:10 pm
by MinDFreeZ
is it possible you could either provide a link to the page or at least the CSS and doctype u plan to use for this site... maybe the images or a little example online... (using the webdeveloper extension for firefox u can edit CSS onsite - so I was trying to look at ur page and play with it)

Posted: Mon Feb 20, 2006 4:24 am
by matthijs
First some other thing: you cannot have multiple instances of the same id. You should use a class for that (div class="news").

And, as MinDfreez said, please give us some link to a page or a picture of what you want. That'll make it easier for us to help.