Jump to content

Why isn't this CSS trick I invented working?

Videogamer555

By Videogamer555
in CSS

 Share

Recommended Posts

Videogamer555 Newbie

Videogamer555

Posted
Posted (edited)

Here's the code (note that it has been truncated because there were hundreds of lines of copy/pasted "A"s and "Z"s in the original code, that I had to make it scrollable to simulate a large webpage) 

<html><head><title>index</title><style>a {z-index:1;}pre {z-index:-1;}</style></head><body><div style="position:fixed; left:0px; top:0px; width:100%; height:100%; background-color:rgba(0,0,0,0); z-index:0;"></div><pre>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</pre><a href="http://www.ebay.com">Ebay</a><pre>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</pre></body></html>

Here's what it's supposed to do:The transparent DIV that covers the whole screen has a z-index of 0 so it should cover the PRE tags (which have a z-index of -1, and all their text content, making it unclickable, enforcing a copyprotection on it). At the same time, the A tags are set to have a z-index of 1, so they are above the transparent DIV, so they should remain clickable.Here's what's actually happening:Everything, INCLUDING THE HYPERLINK, is unclickable.What I want to know is why is it doing this, instead of what it SHOULD to be doing?

Edited by Videogamer555
Link to comment
Share on other sites
niche Devoted Member

niche

Posted
Posted (edited)

Your div does cover the screen. Change background color to green. Voila!

 

I think this will help:

 

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

 

EDIT: opacity will begin to answer your question. Remember that your developer tools lets to see your code graphically.

Edited by niche
Link to comment
Share on other sites
Videogamer555 Newbie

Videogamer555

Posted
  • Author
Posted (edited)

Ok, I figured that out finally. This is the code I've got now.

<html><head><title>index</title><style>* {position:relative; z-index:-1;}.NotProtected  {position:relative; z-index:1;}</style></head><body><div style="position:fixed; left:0px; top:0px; width:100%; height:100%; background-color:rgba(0,0,0,0); z-index:0;"></div><pre>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</pre>This is a link to the <a class="NotProtected" href="http://www.ebay.com">Ebay</a> website.<pre>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</pre></body></html>

It works now. However, the level of protection isn't quite as good as I expected (though some of this may be browser-dependent). Doubleclicking will always the first line of text (not sure why). Ctrl+A will still select everything. Getting your cursor to the right of the hyperlink and then selecting the hyperlink with click+drag as you bring your cursor across the hyperlink, will select the link and all the text up to that link. Not very good copyprotection. Too bad there's no way to simply mark a section of a webpage as completely unselectable and unclickable (to prevent unauthorized copying and saving of text and images).

Edited by Videogamer555
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

There's no way to prevent copying. 100% impossible. If your text is long enough and unique enough to be copyrightable you can put a copyright notice on the page and send DMCA reports to the web hosts of people who copy the content.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...