css problem

Dizfunkshunal · Posted: Mon Nov 14, 2011 4:33 am Post subject: css problem

www.dizwebdesign.com/i...eme=hunter

left blocks, I have a container around the block code with special background properties color with transparent instead of using a transparent image. but for some reason all the content inside this container is showing transparent.

Any one got any ideas why or how to show the background at 50% transparent with out it affecting the content? I have not used this before so it is a new trick I guess lol. Thanks in advance for any help provided.

InspectorClueNo · Heavy poster Offline Joined: Mar 26, 2008 Posts: 211

that's an easy one

opacity is inherited so each element (img, text, ecc ecc) should have opacity back to 1.

or set a child div with opacity 1 and background transparent ?

Dizfunkshunal · Posted: Mon Nov 14, 2011 6:02 am Post subject: Re: css problem

Thanks I will try it and post results. Thanks

greenday2k · Posted: Mon Nov 14, 2011 5:22 pm Post subject: Re: css problem

use: rgba(0-255,0-255,0-255,0 - 0.99)

background-color:#000; (fallback color for old browsers);
background-color:rgba(0,0,0,0.8); // black background with 80% of opacity.

rgba controls the color and allows an alpha channel, opacity makes the whole element and its content "transparent".

Dizfunkshunal · Posted: Mon Nov 14, 2011 6:04 pm Post subject: Re: css problem

I gave up on trying to do it with css for now i just using a 6px by 6px png 50% transparent. I will figure out how to do it with css eventaully but every way i have tried so far makes all content transparent to.

Code::

<div id="transback">
<div id="blockhead">
<div id="blockcontent">
</div>
</div>
</div>

That is the structure i had. the transback was the container i made the transparent background on but the 2 containers for blocks inherited it. there is some way to do it. I will ind it eventually.

greenday2k · Posted: Mon Nov 14, 2011 7:19 pm Post subject: Re: css problem

.transback {background-color:rgba(0,0,0,0.5);}

Dizfunkshunal · Posted: Mon Nov 14, 2011 10:51 pm Post subject: Re: css problem

I will give it a shot. Thanks

Dizfunkshunal · Posted: Tue Nov 15, 2011 5:23 am Post subject: Re: css problem

greenday2k wrote:

.transback {background-color:rgba(0,0,0,0.5);}

This does not work in IE Sad

Genocide · Newbie Offline Joined: Oct 17, 2009 Posts: 8 Location: UK

.transback {
filter:alpha(opacity=50);
opacity:0.50;
}

Dizfunkshunal · Posted: Thu Nov 17, 2011 7:40 am Post subject: Re: css problem

Thanks Gen, i have tried that as well that makes everything transparent content and all.

NanoCaiordo · Posted: Thu Nov 17, 2011 8:55 am Post subject: Re: css problem

How did you go with InspectorClueNo's idea.

NanoCaiordo · Posted: Thu Nov 17, 2011 9:06 am Post subject: Re: css problem

Basically InspectorClueNo'd idea should work with the following classes:

.transback {opacity:0.5}
.blockhead, .blockcontent {opacity:1}

Dizfunkshunal · Posted: Thu Nov 17, 2011 5:54 pm Post subject: Re: css problem

I misunderstood what INspectorClue I will try it again. damn PEBCAC errors Smile

edit: nope still does not work all content insdie the transbg container still show up 50% transparent.

Just incase im doing some thing wrong heres the code

html

Code::

<div class="blockcontainer">
  <div class="blockhead" onclick="blockslide('{rightblock.S_BID}');" style="cursor:pointer;" title="{S_TOGGLE}">
    {rightblock.S_TITLE}
  </div>
  <div class="blockcontent" id="pe{rightblock.S_BID}" {rightblock.S_VISIBLE}>
      {rightblock.S_CONTENT}
  </div>
  </div>

css

Code::

.blockcontainer {
    background-color: #000000;
    opacity:0.5;
    alpha(opacity=50);
    -moz-opacity:0.5;
}
/* table inside the the td that holds the block title */
.blockhead {
    color: #FFF;
    font-size: 10px;
    font-weight: bold;
    height: 14px;
    width: 168px;
    padding: 3px;
    vertical-align: middle;
    border-bottom: 1px solid #000;
    opacity:1.0;
    alpha(opacity=100);
    -moz-opacity:1.0;
}
/* table that holds the content in blocks */
.blockcontent {
  width: 168px;
  padding: 3px;
  opacity:1.0;
    alpha(opacity=100);
    -moz-opacity:1.0;
}

Live View: www.dizwebdesign.com/i...eme=hunter

greenday2k · Posted: Thu Nov 17, 2011 8:22 pm Post subject: Re: css problem

add !important

opacity:1.0 !important;
alpha(opacity=100) !important;
--moz-opacity:1.0 !important;

Dizfunkshunal · Posted: Fri Nov 18, 2011 7:58 pm Post subject: Re: css problem

still no go all content is still transparent along with back ground, I dont think there is a way to do it in css.