Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Transparency Issue

    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)

    Code:
    <!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">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    // -->
    </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="" />
    
    <!-- RIGHT SIDE STUFF -->
    
    <div id="extras">
    <h3>&nbsp;<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>
    
    
    
    <!-- CONTENT HERE -->
    
    
    <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>&nbsp;</p>
    
    </div>
    
    
    
    
    
    
    
    <div id="footer">
    Copyright &copy; 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:

    Code:
    filter:alpha(opacity=80);
    How can I have this so the header is not affected? Only the body? Thanks

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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.

  • #3
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by katie_lostsoul View Post
    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. 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.
    Code:
    #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.

  • #5
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Ok......makes sense........how would I apply this to everything except the header though?

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by katie_lostsoul View Post
    Ok......makes sense........how would I apply this to everything except the header though?
    Instead of this:
    Code:
    #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 */
    Code:
    <div id="wrap">
    	<div id="header"></div>
    	<div id="extras"></div>
    	<div id="content"></div>
    	<div id="footer"></div>
    </div>
    Try this:
    Code:
    #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 {
    }
    Code:
    <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.

  • #7
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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!

  • #8
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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?

  • #9
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by katie_lostsoul View Post
    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:
    Code:
    #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.

  • #10
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •