DIV transparent backgrounds [Archive] - Lissa Explains it All: Web Design Forums

View Full Version : DIV transparent backgrounds

Tessalinn

06-14-2003, 09:18 PM

i was working on my site and thought of something for my new upcoming layout but i ran into a slight problem:

http://geocities.com/unitednsyncfanfiction/Layout/index2.html

You can see it there. The DIV area that holds my navigation links has a black background, but I want the background to be transparent so that you can still see the image behind it. Is it at all possible to do this without doing an image map?

Here's the code of the DIV section (if you can make any sense of it, lol):

<div style="position: absolute; top:93; left:168;" style="border style:px none"> 
SPACE STOPS:
 <a href="home.html" target=iframe>Home</a>
 <a href="disclaimer.html" target=iframe>Disclaimer</a>
 <a href="fiction.html" target=iframe> Fiction</a>
 <a href="http://www.blurty.com/users/MuzicLuverr1103" target=blank>Journal</a>
 <a href="hosted.html" target=iframe>Hosted</a>
 <a href=bios.html" target=iframe>Authors</a>
 <a href="http://pub16.bravenet.com/guestbook/show.php?usernum=1350185339&cpv=1" target=blank>Guestbook</a>
 <a href="sisters.html" target=iframe> Sisters</a>
 <a href="resources.html" target=iframe>Resources</a>
 <a href="awards.html" target=iframe> Awards</a>
</center></div>

If anyone can possibly help, lemme know, and THANK YOU in advance!!!

Alcy

06-14-2003, 10:43 PM

The code you've posted up there has a transparent background. DIVs automatically have no background, unless one has been set.

Your external stylesheet should be saved with the extension .css and only contain CSS - no <head>, <body>, or javascripts.
<LINK REL="stylesheet" TYPE="text/css" HREF="defaultcss.css">

On your page, the CSS should go inside the <head>:
<head>
<title>UNF vs. 04 - Space Cowboy :: JC Chasez ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<LINK REL="stylesheet" TYPE="text/css" HREF="defaultcss.CSS">
<STYLE type="text/css">

</style>
</head>

And, you forgot the dash here:
style="border-style: none"
Although that code isn't necessary because DIVs automatically have no border :)

mutism

07-01-2003, 09:43 AM

How about transparent scrollbars in Divs? I know how to do it in iframes but don't see how to do the same in divs...

thanks

MaGiCSuN

07-01-2003, 04:45 PM

put the following in your <div> tag:

class="divscroll" style="FILTER: chroma(color=#CC9966)" allowTransparency

then put the following in your stylesheet:

.divscroll { scrollbar-face-color: #CC9966; scrollbar-highlight-color : #CC9966;
scrollbar-3dlight-color : #CC9966; scrollbar-shadow-color : #CC9966;
scrollbar-darkshadow-color : #CC9966; scrollbar-track-color : #CC9966;
scrollbar-arrow-color : #FFFFFF; }

i used a class for the div, because i had seperate scrollbars for all the divs. the code above will only show the arrows, those are white. Make sure the chroma colour is set as the same as the scrollbar colors.

mutism

07-02-2003, 07:49 AM

Thanks, that's perfect!

Is it compatible with older browsers?

lefty

07-02-2003, 12:39 PM

Older browsers I'm not sure, but I'm more than certain it only works in IE.