How to make 2 different transparent layers?

vanbeugen · Jun 18, 2006

Below I have a html with one transparent layer. Now I would like to make more than one, but I'm puzzled by the name "div" of the transparent layer and don't know how to declare another one. Can anyone help?

This is the HTML for the one transparent layer:

<html>
<head><title>Untitled</title>
<style type="text/css">

</style>
</head>
<body>

<div>
<span class="tekst">How to make another transparent div in this html with another color and another text?</span>
</div>

</body>
</html>

BillyRayPreachersSon · Jun 18, 2006

You should not put DIV elements inside SPAN elements. DIV elements are known as "block level" elements, wihle SPAN elements are known as inline elements.

Any block-level elements should not be placed inside inline elements, but the reverse is true: inline elements can be placed inside block-level elements.

So, if you want another container inside your SPAN element, it will have to be another inline element... or, if you must have a DIV element, you should change your span to be another block-level element, such as a DIV.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

BillyRayPreachersSon · Jun 18, 2006

Incidentally, DIV and SPAN elements are transparent by default, unless you assign them a background colour.

If what you really want is an element with a background colour that is semi-opaque, then you should know that the effect CSS opacity is cumulative - i.e. you can never have a solid layer inside one with any opacity.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

vanbeugen · Jun 19, 2006

Hi Dan,

Thanks for your reaction. Maybe I should make myself more clear. What I want to make is this: one big image (not transparent), on top of it 4 blocks, each with a transparent background (so that the image under it can be seen) and four text-items (no transparency), in one block each so that the text-items can be used a navigation link.

With one block only I can make it work with the div I originally posted, but I don't know to do it with more than one "div". I tried the following code with "box1" and "box2" but than the texts become transparent as well.
Could you help me further?

This is the HTML with "box1" and "box2" added:
html>
<head><title>Untitled</title>
<style type="text/css">

</style>
</head>
<body>

<div>
<span class="tekst">How to make another transparent div in this html with another color and another text?</span>
</div>

<div class="box1"><span class="tekst">This is some text</span></div>
<div class="box2"><span class="text">This is some more text</span></div>

</body>
</html>

BillyRayPreachersSon · Jun 19, 2006

If you want transparent DIVs, then remove all that opacity stuff and any background colour - as I said, by default, they will have no background color.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to make 2 different transparent layers?

vanbeugen

IS-IT--Management

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

vanbeugen

IS-IT--Management

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor