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 6 of 6

Thread: Opacity problem

  1. #1
    Regular Coder Zangeel's Avatar
    Join Date
    Oct 2007
    Location
    public_html/
    Posts
    638
    Thanks
    17
    Thanked 79 Times in 79 Posts

    Exclamation Opacity problem

    Hey guys, I'm designing a site, that has a background image, I added a div on the top of the page for navigation links, I made it translucent, but I need a way to have whatever I put IN the div not show up transparent so they're noticeable.

    So it's something like this

    Code:
    <style type="text/css">
    div.topbar {background-color:#fff; opacity:0.4; width:100% height:25px;}
    </style>
    and inside this div I have another div for my navigation, but I don't want the same transparency to apply.

    Is there a work around for this?
    PHP Code:
    $aString is_string((string)array()) ? true false// true :D 
    [/CENTER]

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by Zangeel View Post
    Hey guys, I'm designing a site, that has a background image, I added a div on the top of the page for navigation links, I made it translucent, but I need a way to have whatever I put IN the div not show up transparent so they're noticeable.

    So it's something like this

    Code:
    <style type="text/css">
    div.topbar {background-color:#fff; opacity:0.4; width:100% height:25px;}
    </style>
    and inside this div I have another div for my navigation, but I don't want the same transparency to apply.

    Is there a work around for this?

    Give opacity:1 to inner div....



  • #3
    Regular Coder Zangeel's Avatar
    Join Date
    Oct 2007
    Location
    public_html/
    Posts
    638
    Thanks
    17
    Thanked 79 Times in 79 Posts
    Thanks for the reply, I tried this but to no avail, it still makes the inner div as transparent as the outer.

    Try it locally and you'll see what I mean

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<title>Untitled 2</title>
    </head>
    
    <body>
    <style>
    body {background:url('http://mayang.com/textures/Architectural/images/Brick/long_thin_bricks_033120.JPG') repeat;}
    .trans {width:400px; height:500px; opacity:0.5; background-color:#000;}
    .inner {opacity:1; width:200px; height:200px; background-color:#ff0000;}
    </style>
    <div class="trans"><div class="inner">hmmmmmmmmmmmmmmmmmmmmmmmmm</div></div>
    
    </body>
    </html>
    PHP Code:
    $aString is_string((string)array()) ? true false// true :D 
    [/CENTER]

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by Zangeel View Post
    Thanks for the reply, I tried this but to no avail, it still makes the inner div as transparent as the outer.

    Try it locally and you'll see what I mean

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    
    <head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <title>Untitled 2</title>
    </head>
    
    
    <body>
    <style>
    body {background:url('http://mayang.com/textures/Architectural/images/Brick/long_thin_bricks_033120.JPG') repeat;}
    .trans {width:400px; height:500px; opacity:0.5; background-color:#000;}
    .inner {opacity:1; width:200px; height:200px; background-color:#ff0000;}
    </style>
    <div class="trans"><div class="inner">hmmmmmmmmmmmmmmmmmmmmmmmmm</div></div>
    
    </body>
    </html>


    Dear,


    <style> tag must always be in <head> tags only...

    correct and check

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    0
    Thanked 3 Times in 3 Posts
    I was actually JUST about to post that! :P

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    the <style> tag does not have to be put in the head section. in fact it works fine embedding them throughout your script if you want to target a specific area. im assuming he was going to move them at the end

    for this type of issue you have two options

    a) use rgb colors (browser support medium)
    b) use a transparent overlay (which I believe you chosen)

    however I suggest this approach:

    Code:
    .container {
     width: 500px;
     height: 400px;
     position: relative;
    }
    
    div.layer {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
    }
    
    div.opac.layer {
     opacity: .9;
     filter: alpha(opacity=90);
    }
    Code:
    <div class="container">
     <div class="opac layer"></div>
     <div class="content">
        <!-- Content Here -->
     </div>
    </div>

    Layers are frequently used again and again, so I would suggest making a class for it now.


  •  

    Posting Permissions

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