1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Opacity affecting all sub divs

Discussion in 'CSS' started by jasonxxx102, Feb 17, 2014.

  1. #1
    So I basically have 2 divs and they are setup like this
    SEMrush
    <div id="header">
    <div id="navbar">
    </div>
    </div>
    Code (markup):
    This is the CSS for the header and navbar:

    #header
    
    {
    
    padding: 0px;
    
    opacity: 0.25;
    
    background-color: #dcddd8;
    
    height: 100px;
    width: auto;
    vertical-align: middle;
    
    
    }
    
    
    
    #navbar {
    
      width: auto;
      height: auto;
      border: 1px solid #b9121b;
      vertical-align: middle;
      background: #d74b4b;
      position: relative;
      top: 35px;
    
    }
    Code (markup):
    I want to know why all the content in my navbar is being affected by the opacity of the header. Can anyone help me fix this error. (I want the background of the header to be opaque but I want the navbar to retain its color)
     
    jasonxxx102, Feb 17, 2014 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,530
    Likes Received:
    1,934
    Best Answers:
    247
    Trophy Points:
    515
    #2
    That's what opacity does -- child elements are PART of the parent for the application of CSS. You make the parent transparent, it all is.

    If all you're doing is a background color, I'd suggest using RGBA instead... with a non-alpha fallback for older browsers.

    I'd also advise against fixing the height of the outer element, as well as using relative positioning to either do the parent element's padding or element itself's margin's job.

    Of course, if that's ACTUALLY a navigation bar, it should probably be a UL, not a DIV -- but saying what the right markup should be without some example content is effectively impossible -- hence why CONTENT should be your starting point, not markup and CSS.

    Also, div are automatically width and height auto -- not sure why you'd bother declaring those, much less that as a rule of thumb vertical align only effects inline-level elements relationships to each-other, not sure what that's doing in there either.

    I'm guessing a bit wildly given the lack of content, but I suspect this is closer to what you "need"

    #header {
    	/*
    		making a wild guess you'd have equal spacing on each side of the child
    		instead of fixing the height
    	*/
    	padding:35px 0;
    	background-color:#DCDDD8; /* for browsers that don't know rgba */
    	background-color:rgba(220, 221, 212, 0.25);
    }
     
    #navbar {
      border: 1px solid #B9121B;
      background: #D74B4B;
    }
    Code (markup):
     
    deathshadow, Feb 17, 2014 IP
  3. Istenais

    Istenais Active Member

    Messages:
    72
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #3
    OR just put .png format image with lower opacity in header background.
     
    Istenais, Feb 17, 2014 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,530
    Likes Received:
    1,934
    Best Answers:
    247
    Trophy Points:
    515
    #4
    Assuming you want to waste time on an extra handshake and the transfer time... This is 2014, not 1998.
     
    deathshadow, Feb 17, 2014 IP
  5. Istenais

    Istenais Active Member

    Messages:
    72
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #5
    You can do as you wish,I dont care...

    p.s. *this is 2014, not 1998* means do it as fast as possible, no matter how it will look?!
     
    Istenais, Feb 17, 2014 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,530
    Likes Received:
    1,934
    Best Answers:
    247
    Trophy Points:
    515
    #6
    If all we're talking is a solid color being made transparent, why would either method look different from each-other? In that case, use the faster one. (and if you REALLY need it in IE8-, use a filter).

    :/
     
    deathshadow, Feb 18, 2014 IP
  7. Hafiz Kashif Asif

    Hafiz Kashif Asif Active Member

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    56
    #7
    Helo, Here is Solution, Just Replace Your #header css with this:
    #header
    {
    padding: 0px;
    background-color:rgba(220,221,216,.25);
    
    height: 100px;
    width: auto;
    vertical-align: middle;
    }
    Code (markup):
    This is 100% Working Code, If you still face problem feel free to reply...
     
    Hafiz Kashif Asif, Mar 25, 2014 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,530
    Likes Received:
    1,934
    Best Answers:
    247
    Trophy Points:
    515
    #8
    deathshadow, Mar 25, 2014 IP
  9. Hafiz Kashif Asif

    Hafiz Kashif Asif Active Member

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    56
    #9
    @deathshadow You absolutely 100% Right. I admit it, I just missed that...
     
    Hafiz Kashif Asif, Mar 25, 2014 IP