Div within a div

Associate
Joined
10 Feb 2009
Posts
1,893
Location
Leicester
So following from my previous thread, I just want a really SIMPLE website, So have been reading up on code etc however I'm trying to put an image inside of a div but the Image has turned transparent with the div it is in which I don't want it to do, I want to appear normal, can anyone help me with this?

Like I say I'm no web design expert haha so I apologies if this code is bad or whatever.

Here is the steam button transparent

http://i.cubeupload.com/dQjI9v.png

And I want it to appear normal as stated:

TlAIGD.png




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=iso-8859-1" />
        <title></title>
        
        <style type="text/css">
                        a:link {color:#000000;text-decoration:none;}
                body {
                        text-align: center;
                        background-image:url('http://i.cubeupload.com/QxW9Zp.jpg');
                        margin:50px 0px; padding:0px; 
                }
                
                #pagewrap {
                        margin: 0 auto;
                        border:2px  solid;
                        opacity: 0.8;
                        border-color: #ffffff;  
                        width:462px; 
                        height:400px; 
                        overflow:auto; 
                        text-align: center;
                        background-color:#ffffff;
                        color:BLACK;
              }
                #steamgroup {
                        margin: 0 auto; 
                        width:400px; 
                        height:200px; 
                        overflow:auto; 
                        text-align: center;
              }
        </style>

</head>

                   <body id="homepage">

                     <div id="banner" style="margin: 0 auto;width:462px;height:116px;border: 2px solid white;">
                     <img src="http://i.cubeupload.com/5P5ML6.png" alt="clan banner">
              </div>

         <br/>

  <div id="pagewrap">

              <div id="steampage">
                        
                      <p><B><a href="http://steamcommunity.com/groups/motiongamingclan"><img src="http://i.cubeupload.com/TlAIGD.png"></a></p></B>
            
              </div>
              </div>
                <br />

                   <div id="banner" style="margin: 0 auto;width:462px;height:116px;border: 2px solid white;">

                <a href="http://www.gtxgaming.co.uk">
                <img src="http://www.gtxgaming.co.uk/images/advertbanner31.jpg" border="0" width="462" height="116"></a>

              </div>
        
</body>
</html>
 
Associate
OP
Joined
10 Feb 2009
Posts
1,893
Location
Leicester
your declaring the opacity on the #pagewrap which means anything inside that will be have it set at 0.8 if u want that to be transparent then just add...

img {
opacity:1;
}

to the css then all images will be opaque

Sorry, where abouts do I enter this? under #pagewrap? cause it stays the same
 
Back
Top Bottom