...

View Full Version : CSS transparent background not working?



JVRudnick
10-30-2007, 09:17 PM
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...

jlhaslip
10-30-2007, 09:24 PM
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.



<!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.

Aceramic
10-31-2007, 05:00 PM
Try this:


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

Adjust the opacity as needed. :)

JVRudnick
10-31-2007, 07:06 PM
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

JVRudnick
10-31-2007, 07:19 PM
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!

Aceramic
11-01-2007, 06:24 AM
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:


<!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.)

garydarling
11-01-2007, 07:45 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum