bough
Registered User
1,718 posts
Hey guy's, I was wondering if there was a possible way to create a transparent z-index box to type over, i'm going to be using it for my news portion of the site and just wanted to know if there was a way to create one? Thanks - Matt
Inger
Senior Advisor
14,646 posts
Online Now
Not sure what you mean here, Matt. A div without its own background will be transparent, that is, whatever is below will show through that div. If the div, or body, or wrapper just has a background colour, there is no need to fuss with the z-index. Also, if the div below has just background graphics, it will show through the 'transparent' div without z-index.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
bough
Registered User
1,718 posts
I'm just looking for a dark looking transparent box to type above , like adding a layer or something because if I do the news on deck it will blend in with the deck instead of on top of a new layer.. I seen it done with a lot of VSD sites .. but that's all i've seen.
Eric Rohloff
Senior Advisor
20,271 posts
Is this what your trying to do? You can convert to style sheet.
<div style="position:relative;z-index:1000;
left:20px; top: 20px; opacity:.5; background-color:#FFFFFF;"><div style="height:240px; width: 800px; position:relative;z-index:1001;">My Text
</div></div>
<div style="position:relative;z-index:1000;
left:20px; top: 20px; opacity:.5; background-color:#FFFFFF;"><div style="height:240px; width: 800px; position:relative;z-index:1001;">My Text
</div></div>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
bough
Registered User
1,718 posts
Exactly Eric thank you!! 
bough
Registered User
1,718 posts
Heya Eric, it's not posting my text 
I tried using <h1> tags just to see if it was too small and it's just not writing on top of the layer.
I tried using <h1> tags just to see if it was too small and it's just not writing on top of the layer. <div style="position:relative;z-index:1000;
left:20px; top: 20px; opacity:.5; background-color:#FFFFFF;"><div style="height:240px; width: 800px; position:relative;z-index:1001;"><p> Testing <p>
</div></div>
left:20px; top: 20px; opacity:.5; background-color:#FFFFFF;"><div style="height:240px; width: 800px; position:relative;z-index:1001;"><p> Testing <p>
</div></div>
bough
Registered User
1,718 posts
Width isn't changing either, changed from width:800; to width:500; and hasn't changed ;(
<div style="position:relative;z-index:1000;
left:20px; top: 20px; opacity:.5; background-color:#FFFFFF;"><div style="height:240px; width: 500px; position:relative;z-index:1001;"><p> Testing <p>
</div></div>
left:20px; top: 20px; opacity:.5; background-color:#FFFFFF;"><div style="height:240px; width: 500px; position:relative;z-index:1001;"><p> Testing <p>
</div></div>
Inger
Senior Advisor
14,646 posts
Online Now
You are testing with a white background. Is the text also white? You can't expect seeing the text if that is the case. 
I have found it easier to create a semi-transparent small image to use as the background in the <p> or <div> where you want to place the text. It seems to me that some IE versions have problem with the alpha transparency.
I have found it easier to create a semi-transparent small image to use as the background in the <p> or <div> where you want to place the text. It seems to me that some IE versions have problem with the alpha transparency.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
bough
Registered User
1,718 posts
Cool Inger, that solved that , But what about the width of the z-index, it's not adjusting to the size of the page?
, But what about the width of the z-index, it's not adjusting to the size of the page?<div style="position:relative;z-index:1000;
left:20px; top: 20px; opacity:.5; background-color:#FFFFFF;"><div style="height:240px; width: 500px; position:relative;z-index:1001;"><span style="font-family: 'Damn Noisy Kids'; font-weight: normal; font-style: normal; text-decoration: none; font-size: 18pt;"><font color="#000000">Testing</font></span>
</div></div>
left:20px; top: 20px; opacity:.5; background-color:#FFFFFF;"><div style="height:240px; width: 500px; position:relative;z-index:1001;"><span style="font-family: 'Damn Noisy Kids'; font-weight: normal; font-style: normal; text-decoration: none; font-size: 18pt;"><font color="#000000">Testing</font></span>
</div></div>
Inger
Senior Advisor
14,646 posts
Online Now
You haven't given the outer one of your divs any width and height. The inner div is not really necessary. Try this against a non-white page background:
<div style="position:relative;z-index:1000; width: 400px; height: 200px; padding: 20px; left:20px; top: 20px; opacity:.5; background-color:#FFFFFF;">
<span style="font-family: 'Damn Noisy Kids'; font-weight: normal; font-style: normal; text-decoration: none; font-size: 18pt;"><font color="#000000">Testing</font></span>
</div>
<span style="font-family: 'Damn Noisy Kids'; font-weight: normal; font-style: normal; text-decoration: none; font-size: 18pt;"><font color="#000000">Testing</font></span>
</div>
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
