Welcome!

And don't forget to edit your signature & profile.

 

Icon

Statistics

  • Total posts 23318
  • Total topics 4048
  • Total members 5574
  • Our newest member
    ALF5583

TOP POSTERS

Opacity problem

All problems and developments related to (X)HTML-markup and stylesheets are discussed and resolved here.
   

Opacity problem

Postby niteshq » Thu Nov 05, 2009 2:13 pm

Hi,

Please check the below code:-
I am trying to change the opacity of the main container but it is reflecting on content also. Please suggest any solution that applies only on main container background. Thanks in advance.

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container_channel{
   margin:0 0 20px 0;
   padding:0px;
   font: normal 11px Verdana, Arial, Helvetica, sans-serif;
   color: #2e4e5d; /* Replace Color Palettes Title Text color */
   width: 288px;
}
.box_top {
   height: 25px;
   padding: 0 10px 0 10px;
   font: bold 13px Verdana, Arial, Helvetica, sans-serif;
   color: #2e4e5d; /* Replace Color Palettes Title Text color */
   border-bottom:1px solid #cdcdcd;
   margin:0 0 10px -10px;
}
.box_mid {
   background: #ff0000; /* Replace Color Palettes Background color */
   padding: 10px 0px 10px 10px;
   border:1px solid #cdcdcd;
   opacity:.50;
    filter: alpha(opacity=40); /* Change Pallete Wrapper Opacity */
    -moz-opacity: 0.4; /* Change Pallete Wrapper Opacity */
}
.box_mid ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
.box_mid li {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
.box_mid li a {
   color: #2f4f5e;
   text-decoration: none;
}
.box_mid li a:hover {
   color: #2f4f5e;
   text-decoration: underline;
}
.box_mid .thumb {
   border: 1px solid #90918f;
   padding: 2px;
   margin: 0 10px 0 0;
}
.box_mid .desc {
   width: 158px;
}
.box_mid .desc span {
   color: #999999;
}
.box_mid img {
   vertical-align: middle;
}
.width02{
   width: 625px;
   _width: 630px;
}
.profile_img {
   margin: 0 25px 0 0;
   width: 124px;
}
.profile_img img {
   border:1px solid #999999;
   padding: 2px;
   margin-bottom:10px;
}
</style>
</head>
<body>
<!-- container channel starts here -->
        <div class="container_channel">
          <div class="box_mid">
          <div>
          <div class="box_top">Nitesh Profile</div>
            <div class="desc fl">Nitesh<br />
              Joined: <span>April 06, 2009</span> <br />
              Last Sign In: <span>21 hours ago</span> <br />
              Videos Watched: <span>149</span> <br />
              View Video : <span>9</span> <br />
              Age: <span>29</span> <br />
              Country: <span>India</span></div>
            <div class="cl"></div>
            <p>lol omg so damn adorable..!!! i love the
              expression on da LITTLE zoozoo chooo chweeeeetttttt nd jus lissen 2 da popping sounds wen da zoozoo's turns bak 2 da list.</p>
          </div>
          </div>
        </div>
  <!-- container channel ends here -->
</body>
</html>
Avoid Me!! I break the rules...

| Web Designer | | Student |

http://www.initesh.net

http://www.cssdude.com
User avatar
niteshq
Smashing <table>
 
Posts: 37
Joined: Thu Feb 12, 2009 4:23 am
Location: New Delhi
   

   

Re: Opacity problem

Postby Andy » Thu Nov 05, 2009 2:40 pm

Use a semi-transparent PNG image:

Code: Select all
background: url(my_semitransparent_image.png);
Andy
Smashing <h5>
 
Posts: 1023
Joined: Tue Sep 30, 2008 6:42 pm
Location: Sweden
   

   

Re: Opacity problem

Postby niteshq » Thu Nov 05, 2009 4:25 pm

thanks @andy..

could u provide that png... if possible please attach the code also.
Avoid Me!! I break the rules...

| Web Designer | | Student |

http://www.initesh.net

http://www.cssdude.com
User avatar
niteshq
Smashing <table>
 
Posts: 37
Joined: Thu Feb 12, 2009 4:23 am
Location: New Delhi
   

   

Re: Opacity problem

Postby Andy » Thu Nov 05, 2009 4:55 pm

Lazy, are we?

Well, no matter. Here's the PNG.
Attachments
trans.png
trans.png (103 Bytes) Viewed 56 times
Andy
Smashing <h5>
 
Posts: 1023
Joined: Tue Sep 30, 2008 6:42 pm
Location: Sweden
   

   

Re: Opacity problem

Postby niteshq » Thu Nov 05, 2009 11:50 pm

he he he he :P ;)

thanks a lot andy for your kind help.
Avoid Me!! I break the rules...

| Web Designer | | Student |

http://www.initesh.net

http://www.cssdude.com
User avatar
niteshq
Smashing <table>
 
Posts: 37
Joined: Thu Feb 12, 2009 4:23 am
Location: New Delhi
   

   

Re: Opacity problem

Postby Andy » Fri Nov 06, 2009 5:04 am

:lol:
Andy
Smashing <h5>
 
Posts: 1023
Joined: Tue Sep 30, 2008 6:42 pm
Location: Sweden
   


Return to CSS and (X)HTML



Who is online

Users browsing this forum: No registered users and 1 guest