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 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS transparent background not working?

    Hello all...

    I'm having some troubles "adapting' a CSS style sheet for use with a (new for me) right hand side sidebar.

    I've put up the simple page that shows my predicament, in the hopes that someone will point out to me how to "control" the bgcolor of a div better than I can at this point. I'm using background-color:transparent; to try to tell the to NOT show the normal , but isn't working.

    Plus as an added error (!) I also seem to be unable to put a plain text link "on top" of that sidebar.

    Here's the page (source code shows my simple HTML/CSS too...

    http://www.kkt-testserver.com/CSS1/test1.asp

    I've done much reading lately on the "float" command, but I thought that a simple notation that the bg color is to be transparent FORCES it to be so....

    ?

    Jim

    PS source for the .asp page is attached as a plain .txt file...
    Attached Files Attached Files

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    to begin, wrap the footer inside a div and style it with a "clear:both",

    The sidebar background is transparent, so the cpoulour of the div behind it is shown through it. That's what transpanrency does.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <!-- saved from url=(0044)http://www.kkt-testserver.com/CSS1/test1.asp -->
    <HTML><HEAD><TITLE>title goes here</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><LINK 
    href="page_layout.css" type=text/css rel=stylesheet>
    <STYLE type=text/css>HTML {
        PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; TEXT-ALIGN: center
    }
    BODY {
        PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; TEXT-ALIGN: center
    }
    A {
        TEXT-DECORATION: none
    }
    IMG {
        BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
    }
    #container {
        BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: black 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; BORDER-LEFT: black 1px solid; WIDTH: 768px; PADDING-TOP: 0px; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #d0c5b6; TEXT-ALIGN: left
    }
    #header {
        MARGIN-TOP: 0px; BACKGROUND-IMAGE: url(images2/topBar22.jpg); HEIGHT: 191px
    }
    #content {
        PADDING-RIGHT: 0em; DISPLAY: inline-block; BACKGROUND: url(images2/bottombar22.jpg); PADDING-BOTTOM: 1em; MARGIN-LEFT: 0px; PADDING-TOP: 2em
    }
    #content {
        DISPLAY: block;
        height: 100%;
    }
    #sidebar {
        FLOAT: right; WIDTH: 150px; BACKGROUND-COLOR: transparent; margin-top: 50px;
    }
    #footer {
            clear:both;
            text-align: center;
    }
    </STYLE>
    
    <META content="MSHTML 6.00.6000.16544" name=GENERATOR></HEAD>
    <BODY bgColor=#a4a7a0><!-- for gray background no matter what window sizes -->
    <DIV id=container><!-- TopBar Buttons here ============================================================================ -->
    <DIV id=header>
    <IMG height=1 src="" width=400 align=left border=0> buttons to go
    here...<BR>
    <IMG height=1 src="" width=400 align=left border=0> I know how to
    "lay" these on top of a background image... </DIV><!-- close  header --><!-- Menu Buttons here =============================================================================== -->
    <IMG
    height=38 alt="" src="title goes here_files/midBar22.jpg" width=768 border=0> <!-- close  menu buttons --><!-- Nav side here ==================================================================================== -->
    <DIV id="sidebar">But the background for this 'sidebar' div is colored, and it
    should be transparent - and the width of same seems to control that?? </DIV><!-- close sidebar --><!-- Content side here================================================================================= -->
    <DIV id=content><IFRAME align=left src="title goes here_files/index22.htm" 
    width=603 height=329></IFRAME></DIV><!-- close content div here -->
    <div id="footer" ><FONT
    face=Verdana color=white size=1><B>Copyright ©. All Rights Reserved.
    </B></FONT></div>
    </DIV><!-- END of div contain =============================================================================== -->
    </BODY></HTML>
    Note the changes for the height of the content div, the footer is now wrapped by the outer container, the width of the sidebar is better, with some margin-top on it.
    Still a whack of errors in the page relating to the use of Font tags, etc.
    I see you are using an old (Doctype HTML 4).
    Check it through the w3c validator and consider switching to a Doctype that is current so the page is a little bit future-proof.
    Last edited by jlhaslip; 10-30-2007 at 09:41 PM.

  • #3
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Try this:

    Code:
    #sidebar {
    background-color:#000000;
    float: right;
    width: 150px;
    margin-top: 50px;
    filter:alpha(opacity:70);
    opacity:0.7;
    }
    Adjust the opacity as needed.

  • #4
    New Coder
    Join Date
    Jul 2002
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that does not work at all....give it a try and you'll see that all that happens, Aceramic, is that i get a small drkbrown box with the type transparent above it. that is, I replaced the CSS on the SIDEBAR with what you gave me, and then saved and refreshed...

    ?

    Jim

  • #5
    New Coder
    Join Date
    Jul 2002
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts
    copied your file, and uploaded same. SAME problem still exsists...the SIDEBAR area is now totally transparent but why can I not see the lime green background color of the CONTENT div beneath same...as the SIDEBAR floats above that div...

    take a look at -- http://www.kkt-testserver.com/CSS1/test2.asp

    ?

    Jim

    btw, these are all IE problems...no surprise there I suppose...aint got to FF yet -- but will!

  • #6
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Well, the first thing I notice is that you are referencing an external CSS file, and have inline CSS at the same time. I've never tried this myself, but I can't imagine that it would be good. (Anyone else have any input on that?)

    Second, you are using the HTML 4.01 - Strict doctype. For convenience, I switched it to XHTML 1.0 - Transitional in the code I included below.
    Third, I notice that you have the <meta> tag twice, with different content in each. Why is that?

    Finally, I edited your code considerably:

    Code:
    <!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=iso-8859-1">
    <META content="MSHTML 6.00.6000.16544" name=GENERATOR>
    <title>title goes here</title>
    <link href="page_layout.css" type="text/css" rel="stylesheet">
    <style type="text/css">
    
    * {
        padding:0;
        margin:0;
    }
    
    html {
        text-align:center;
    }
    
    body {
        text-align:center;
        background-color:#A4A7A0;
    }
    
    a {
        text-decoration:none;
    }
    
    img {
        border:none;
    }
    
    #container {
        border:black 1px solid;
        width:768px;
        background-color:#d0c5b6;
        text-align:left;
    }
    
    #header {
        background-image:url(images2/topBar22.jpg);
        height:191px;
    }
    
    #content {
        display:inline-block;
        background-image:url(images2/bottombar22.jpg);
        padding-bottom:1em;
        padding-top:2em;
    }
    
    #content {
        display:block;
        height:100%;
    }
    
    #sidebar {
        float:right;
        width:150px;
        filter:alpha(opacity:0);
        opacity:0.0;
        margin-top:50px;
    }
    
    #footer {
        clear:both;
        text-align:center;
    }
    
    </style>
    
    </head>
    
    <body><!-- for gray background no matter what window sizes -->
    <div id="container"><!-- TopBar Buttons here ============================================================================ -->
        <div id="header">
        <img height="1" src="" width="400" align="left" border="0" />buttons to go here...
        <br />
        <img height="1" src="" width="400" align="left" border="0" />I know how to "lay" these on top of a background image...
        </div><!-- close  header -->
        
        <!-- Menu Buttons here =============================================================================== -->
        <img height="38" alt="" src="midBar22.jpg" width="768" border="0">
        <!-- close  menu buttons -->
        
        <!-- Nav side here ==================================================================================== -->
            <div id="sidebar">But the background for this 'sidebar' div is colored, and it should be transparent - and the width of same seems to control that??
            </div>
        <!-- close sidebar -->
        
        <!-- Content side here================================================================================= -->
                <div id="content"><iframe align="left" src="index22.htm" width="603" height="329"></iframe></div>
        <!-- close content div here -->
    
                    <div id="footer" ><font face="Verdana" color="#FFFFFF" size="+1"><strong>Copyright ©. All Rights Reserved.</strong></font></div>
                    
    </div>
    <!-- END of div contain =============================================================================== -->
    
    </body>
    
    </html>
    No, it's not perfect (and as usual, posting it screwed up the formatting), because I don't want to spend my entire night on it, but try it out, see what happens. :) (Feel free to post your CSS file, and I'll look at it, too.)

  • #7
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by JVRudnick View Post
    Hello all...

    I'm using background-color:transparent; to try to tell the to NOT show the normal , but isn't working.
    I'm unsure what you mean by 'normal'.

    The background:transparent style does nothing when nested inside a parent tag that has background colors or images. It is transparent by default and simply shows the background of the parent element.

    Can you explain what you want it to look like?

    Gary


  •  

    Posting Permissions

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