Transparency Issue

katie_lostsoul

07-10-2007, 01:56 AM

Hello,

I have a div set to a transparency so the background image can show through. It's all great except I don't want the header to have this transparency applied to it. So I tried making another div called "trans" and put it under the header and applied the same transparency to it, however it stopped working.

Here's my code right now: (html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style_index.css" />

<script language="JavaScript">

//Top Nav Bar I v2.1- By Constantin Kuznetsov Jr. (script@esolutiononline.com)
//Modified by Dynamic Drive for NS6/Opera6 compatibility and code streamlining March 4th, 2002
//Visit http://www.dynamicdrive.com for this script

var keepstatic=0 //specify whether menu should stay static 0=non static (works only in IE4+)
var menucolor="#000000" //specify menu color
var submenuwidth=150 //specify sub menus' color

</script>
<title>Katie's Tomb Raider Screenshot Webpage -- The best Tomb Raider screenshots on the web!</title>
<script language="JavaScript">

</script>
<noscript><font color="#FFFFFF">You need JavaScript enabled to view this menu, please activate it now.</font></noscript>

</head>

<body>
<div align="center">
<p>
<script language="JavaScript" src="menu.js"></script>
<script language="JavaScript" src="menucontext.js"></script>
<script language="JavaScript">
showToolbar();
</script>
<script language="JavaScript">
function UpdateIt(){
if (ie&&keepstatic&&!opr6)
document.all["MainTable"].style.top = document.body.scrollTop;
setTimeout("UpdateIt()", 200);
}
UpdateIt();
</script>

<div id="wrap">

<div id="header"><br />
</div>

<img src="images/header.jpg" width="790" alt="" />



<div id="extras">
<h3> <br /><br />

More Info:</h3>
<p> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>

<h3>Links:</h3>
<p><a href="#">Link 1</a><br />
<a href="#">Link 2</a><br />
<a href="#">Link 3</a><br />
</p>
</div>



<div id="content"><br />

<h2>News/Updates:</h2>

<p>- July 9th: Text goes here, text goes here. asdfdsf asdfasdf </p>
<p>- July 3rd: Text goes here, text goes here.a dfadsfad</p>
<p>- July 12th: Text goes here, text goes here.</p>
<p>- July 23rd: Text goes here, text goes here. asdf asdfd</p>

<p> </p>

</div>

<div id="footer">
Copyright © 2007 (your name). Design by kty <a href="#">studio-plume.org</a>
</div>

</div>
<br />

</body>
</html>

And my CSS that I use for the transparency:

filter:alpha(opacity=80);

How can I have this so the header is not affected? Only the body? Thanks

koyama

07-10-2007, 03:06 AM

To which element have you applied that filter? I don't see that “trans” div that you are talking about?

Can we see your latest attempt? Seeing the CSS may be necessary too.

katie_lostsoul

07-10-2007, 03:17 AM

Sure, I've put it here: (none of the links etc work)

http://www.tombraiders.net/katie/test/index.html

I don't want the transparency being applied to the header, which it is right now.

koyama

07-10-2007, 03:53 AM

So I tried making another div called "trans" and put it under the header and applied the same transparency to it, however it stopped working.
It is important to note that filters only work on elements with hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html). I suspect it wasn't working because hasLayout was not triggered for the element you tried to apply the filter on. There are several ways to trigger hasLayout. For example it suffices to specify an explicit width or height. Alternatively, one can use zoom: 1.

As an example, let's look at your CSS for #wrap. The reason why the filter is working is because hasLayout is triggered by the explicit setting of the width.

#wrap {
background: #968F73;
filter:alpha(opacity=80);
color: #000000;
border: none;
margin: 0 auto;
width: 790px; /* triggers hasLayout which makes the filter work */
}

Also note that filters only work in IE. You may want to look into the opacity property from the CSS3 Color Module if you want the effect to show in Firefox too.

katie_lostsoul

07-10-2007, 02:00 PM

Ok......makes sense........how would I apply this to everything except the header though?:confused:

koyama

07-10-2007, 11:11 PM

Ok......makes sense........how would I apply this to everything except the header though?:confused:
Instead of this:

#wrap {
background: #968F73; /* body text background black originally*/
color: #000000; /* colour of text */
border: none;
margin: 0 auto;
width: 790px;
}

#extras, #content, #footer {
color: #000000; /* colour of text */
background: #968F73; /* body text background black originally*/
filter:alpha(opacity=80); /* IE5.5+ */
-moz-opacity:0.8; /* Gecko browsers including Netscape 6+ and Firefox */
-khtml-opacity: 0.8; /* Safari 1.1-1.3 */
opacity: 0.8; /* Netscape 7.2+, Firefox, Safari 2+, Opera 9 */
min-height:1px; /* to trigger hasLayout in IE7 */
}
/* to trigger hasLayout in IE5-6/Win (Hide from IE5/Mac) \*/
* html #content {height: 1px;}
/* End hide */

<div id="wrap">
<div id="header"></div>
<div id="extras"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

Try this:

#wrap {
margin: 0 auto;
width: 790px;
}
#inner-wrap {
color: black;
background: #968F73; /* olive */
filter: alpha(opacity=80);
-khtml-opacity: 0.8; /* Safari 1.1-1.3 */
opacity: 0.8; /* Netscape 7.2+, Firefox, Safari 2+, Opera 9 */
width: 790px; /* not necessary except for triggering hasLayout in IE6,IE7 */
}
#extras, #content, #footer {
}

<div id="wrap">
<div id="header"></div>
<div id="inner-wrap">
<div id="extras"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
Note that I have added an extra #inner-wrap to which the opacity is applied. I have simplified your code a bit too.

katie_lostsoul

07-11-2007, 04:20 PM

Perfect! All I had to do was re-arrange some of the div's to make everything fit again and it works. Thank you SO much. I really appreciate your help! :thumbsup:

katie_lostsoul

07-11-2007, 04:48 PM

Sorry, one more quick question...is it possible to have a rule that if there's an image within the body part that the transparency won't apply to it? Can you do that with variables?

koyama

07-11-2007, 05:27 PM

Sorry, one more quick question...is it possible to have a rule that if there's an image within the body part that the transparency won't apply to it? Can you do that with variables?
I'm afraid that you cannot get that effect using the opacity property or the proprietary filter property. The opacity is applied to the element as a whole including its children.

What you really want is a semi-transparent background-color as can be specified within the CSS3 Color Module. Example:

#wrap {
background-color: rgba(255, 0, 0, 0.5);
}

Unfortunately, there is poor support for this. However, you can try it in at least Safari 2+ and Firefox 3 (alpha release).

For now you can use a semi-transparent PNG background image. But then, again, IE6 will not display it correctly.

katie_lostsoul

07-11-2007, 05:35 PM

Ok I think I"ll leave it for now then. The images obviously appear slightly dull because of this, but that's ok. If I hate them that much I'll just switch it back to not having any transparency.

Too bad it wasn't Director...I could have coded this in two seconds! Can't wait for the CSS course.

Thank you again! You've been a HUGE help :)