PDA

View Full Version : transparent divs

insomniadreamer
04-10-2004, 06:26 PM
Sorry! I know this has been asked about a million times but i still can't manage to get it to work. I know that divs are already transparent if you don't add a background colour but i want a background colour, but so it looks kind of faded if you get what i mean (i generally don't make much sense).
Here's my code

<div id=layer1 style="position:absolute; top:125; left:300; width:50; height:20; z-index:1; padding:2px; border: #3366ff 2px solid; background-color:#3366ff;filter:alpha(opacity=50);">blah blah</div>

I would really appreciate it if someone could tell me where i went wrong!
Thanks in advance :)
bourdelson
04-10-2004, 06:32 PM
<div id="layer1" style="position: absolute; top: 125px; left: 300px; width: 50px; height: 20px; z-index: 1; padding: 2px; border: #3366ff 2px solid; background-color: #3366ff; filter: alpha(opacity=50);">blah blah</div>

I added a unit to your positions, that might help some. Other than that, I don't know where you went wrong with the filter, but maybe posting a link to your page will help. :)

I altered your code a bit, by putting some spaces where nessecary so that some words don't get spaced out by unwanted spaces (i hope you get what i mean LoL) ~ Magicsun
insomniadreamer
04-12-2004, 11:22 AM
thanks for your help but it still doesn't seem to be working!
here's my url (http://www.geocities.com/rishumb/untitled.html) :)
MaGiCSuN
04-12-2004, 01:42 PM
i cleaned up your coding a bit. You had stuff in it that you didn't needed at all.. etc :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>

<title>untitlted</title>
<style type="text/css">

A:link
{ text-decoration: none; color:#3366ff; }
A:visited
{ text-decoration: line-through; color:#3366ff; }
A:active
{ text-decoration: none; color:#3366ff; }
A:hover
{ font-weight: bold; color: #0000CC; cursor: ne-resize; }

h1 {font-family: 'trebuchet ms'; color: #3366ff; }

p {font-family: 'trebuchet ms'; color: #3366ff;}

body
{ background-color: #000000;
font-family: 'trebuchet ms';
color: #3366ff;
font-size: 8pt;

scrollbar-face-color : #ffffff;
scrollbar-highlight-color : #3366FF;
scrollbar-3dlight-color : #ffffff;
scrollbar-shadow-color : #3366ff;
scrollbar-darkshadow-color : #ffffff;
scrollbar-track-color : #ffffff;
scrollbar-arrow-color : #3366ff; }

input, textarea
{ background-color: #ffffff;
font-family: 'trebuchet ms';
color: #3366ff;
border-style: double;
border-color: #3366ff;
border-width: 2px; }
</style>
</head>

<body>
<div id=layer1 style="position: absolute; top:150; left:300; width:300; height:200; z-index:1; padding:2px; border: #3366ff 2px solid; background-color:#ffffff;"><center><font color=#3366ff>dum de dum</font></center></div>

<div id="layer2" style="position: absolute; top: 125px; left: 300px; width: 50px; height: 20px; z-index: 1; padding: 2px; border: #3366ff 2px solid; background-color: #3366ff; filter: alpha(opacity=50);">
blah blah</div>


</body>
</html>

try that. Although i'm not sure what you want to achive here though, so i couldn't fix it all for ya :)

Love,
Mirna
bourdelson
04-12-2004, 04:49 PM
Lol, thanks for cleaning up the code that I posted, Mirna. :)
Aprilrenee
04-12-2004, 05:39 PM
Correct me if I am wrong, but you don't need a background-color: isn't it just background:#000000; for coloring then an image is background-image: url (the path here); maybe thats the problem?
bourdelson
04-12-2004, 05:46 PM
http://www.lissaexplains.com/css.shtml
http://www.lissaexplains.com/html7.shtml

For background colors, it has to be background-color:#hexcode;, and there was no mention of a background image. :)
MaGiCSuN
04-12-2004, 06:05 PM
Lol, thanks for cleaning up the code that I posted, Mirna. :)

your welcome :) the forum is a pain when it comes to codes.. it always puts spaces on the wrong places :eek:
insomniadreamer
04-15-2004, 06:47 PM
yay!!!!! it worked! thank you all soooo much!! I am eternally grateful :bow:
bourdelson
04-16-2004, 02:27 PM
:D Glad you got it working for you.
ChocoC252
04-17-2004, 04:07 PM
when I use div layers, I just define the layer id in the <head> </head> tags.. <html>
<head>
<!-- Start -->
<noembed><xmp>
<body>
</xmp></noembed>
<!-- End -->

<title>What a Life to take.</title>
<style type="text/css">
<!--

body {
scrollbar-face-color: #A8001C;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #A8001C;
scrollbar-shadow-color: #FFFFFF;
scrollbar-arrow-color: #A8001C;
scrollbar-track-color: #A8001C;
scrollbar-track-border:1px dotted;
scrollbar-darkshadow-color: #A8001C; }

.entry { font-family: verdana;
font-size: 8pt;
letter-spacing: 2px;
color: A8001C;
background-color: FFFFFF;
padding: 5px;
clear: center;
border: 1px solid;
color: A8001C;
resize=no;
filter: alpha(opacity=80); }


a:link {text-decoration: none; font-weight: none; color: #A8001C}
a:visited {text-decoration: none; font-weight: none; color: #000000}
a:hover {text-decoration: line-through; cursor: crosshair; color: #A8001C}
a:active {text-decoration: line-through; font-weight: bold; color: #FF7B05}
-->
</style>
</head>
<body bgcolor="#000000">

<div id="entry" style="position:absolute; width:420px; height:275px; z-index:8; left: 178px; top: 91px; overflow: auto" class="entry">
Content here!!

</div>
</body>
</html>


(I just copied a small peice of an old layout I made.. so there is an ad blocker code, and a few other things that you dont need!
bourdelson
04-17-2004, 04:34 PM
That's fine that you do that - people have different ways of going about doing the same thing. It's all a matter of preference. :)

Though, I'm probably being a bit picky when I say this, but...

<div id="entry" style="position:absolute; width:420px; height:275px; z-index:8; left: 178px; top: 91px; overflow: auto" class="entry">

I don't think you need a class and an id in that tag. It would just be class="entry" since that's what you're calling for from your CSS.

Also, your <body bgcolor="#000000"> can be done in your body CSS. :)