10 replies to this topic

[Pax]

Hey all, working on designing my new portfolio website in CSS, and trying to make it XHTML 1.1 compatible, so lotsa div's for me! Anyways, trying to get one div to be semi-transparent, but now everything I put in that div is transparent...and I want the text and pics to be 100% opacity, rather than the 50% that the div is set to. I've tried using a transparent png or gif to get the same result that I wanted, but those didnt work. The only other option I can think of is using absolute positioning, but that isnt all too cross-browser freindly.

#cntright{
	height:355px;
	width:130px;
	border: solid 1px;
	margin: 10px, 10px, 10px, 5px;
	background: #348a43;
	filter: alpha(Opacity=50);
	text-align:left;
	}

That is what the CSS for that portion looks like. If anyone can give me some help, it would really be appreciated. Basically, what im trying to do is have the background on the div below to appear through the upper one, but not dim the text or make the images within that div, or divs within the div, become transparent.

Thanks all

[HaloprO]

#cntright {
	height:355px;
	width:130px;
	border: solid 1px;
	margin: 10px, 10px, 10px, 5px;
	background: #348a43;
	filter: alpha(Opacity=50);
	text-align:left;
}

Do that, and add another <div> layer in #cntright and give it a new id, like "non-opaque"

#non-opaque {
		filter: alpha(Opacity=100);
}

[d7x]

look dont use opacity with css. half the browsers out there dont even support it. so half the ppl will be looking at a website without the transparency

[HaloprO]

All browser suppport it, you just have to know what you are doing

[coolaid]

im sure that won't validate as it's not real css.

[-Michael-]

The only browser I know of that supports it anyway is IE.

[Wybe]

Oh I figured IE would probably be the only one to *not* support it IE5 also?

[d7x]

Opera does not support CSS Opacity ive tried every way to use opacity with opera and it doesnt work... + it isnt vaild. One 2 browsers i know that support it is firefox and IE.

[Pax]

Is there any other way to get the desired effect without using opacity in css?



Thats the general idea of what the website should look like. I want the text area and the recent work section to be transparent.

Edited by Pax, 13 December 2005 - 11:25 AM.

[rc69]

If it's going to be fixed width, you can just use a background image.
A liquid template could also work, but the lines might not match up exactly when repeating.

Edited by rc69, 13 December 2005 - 05:16 PM.

[Pax]

Thanks, rc69, that should work great!