Log in

View Full Version : page corner curl/peel problem


mr108
11-19-2015, 10:18 AM
Hello,

I created a page corner curl/peel in this page http://terrybraunstein.com/tb/ but I'm having some problem with it.

When I edit the page on my computer the corner curl with Welcome! text and the image of the building when expanded are covering the image of the book and that's how I want to have it. But when I upload it to the website then both the corner curl and the building end up behind the book image.

The code I'm using is below.

Am I doing something wrong? How to fix it?

Thanks for any help.

Marek


<style type="text/css">
#curl{

width:220px;
height:220px;
position:fixed;
top:0;
right:0;
}
#curl:hover{
width:850px;
height:850px;
-webkit-transition: ease 1s;
-moz-transition: ease 1s;
}
#code{
background:#fffff;
overflow:hidden;
width:185px;
height:185px;
position:fixed;
top:0;
right:0;
}
#code:hover{
width:450px;
height:450px;
-webkit-transition: ease 1s;
-moz-transition: ease 1s;
}
</style>

</head>

<body>

<div id="code">

<a href="http://terrybraunstein.com/events-news/">

<img id="curl" src="fold.png"></a>

<img id="fold" src="curl.jpg"></a>


</div>
styxlawyer
11-19-2015, 11:39 AM
The book image is in front of the curl because it's rendered later in the page. You could try moving the <div> to the end of the page but it's probably better to add:



z-index:10;


to the CSS for #code.
mr108
11-19-2015, 12:13 PM
Thanks for your fix. I added it to both #code and #curl and it works perfectly :)
styxlawyer
11-19-2015, 02:06 PM
It's not needed in the image with id 'curl' as that is surrounded by the <div> with id 'code' and will inherit the z-index from the latter.

I'm curious as to why you chose the following naming convention, to me it seems a bit confusing. Also you have an </a> tag with no matching opening <a> tag which may lead to problems further down the page.



<img id="curl" src="fold.png"></a>

<img id="fold" src="curl.jpg"></a>
mr108
11-19-2015, 04:31 PM
It's not needed in the image with id 'curl' as that is surrounded by the <div> with id 'code' and will inherit the z-index from the latter.

I changed it as you suggested - it works perfect.


I'm curious as to why you chose the following naming convention, to me it seems a bit confusing.

Well... I'm really a total beginner and at this stage I'm just copying pieces of code that I like and play with it and learn in this way. So I found this curl effect here: http://motyar.blogspot.in/2010/03/page-curl-fold-or-peel-effect-with-pure.html



Also you have an </a> tag with no matching opening <a> tag which may lead to problems further down the page.

[code]
<img id="curl" src="fold.png"></a>

<img id="fold" src="curl.jpg"></a>


Probably I made some mistake in copying the code - I corrected it now.

Thanks again for your input, that's how I learn :)
mr108
11-19-2015, 04:43 PM
I'm curious as to why you chose the following naming convention, to me it seems a bit confusing.



<img id="curl" src="fold.png">

<img id="fold" src="curl.jpg">



How should the naming be changed, then?
styxlawyer
11-26-2015, 03:54 PM
How should the naming be changed, then?


.
.
I'm curious as to why you chose the following naming convention, to me it seems a bit confusing. Also you have an </a> tag with no matching opening <a> tag which may lead to problems further down the page.



<img id="curl" src="fold.png"></a>

<img id="fold" src="curl.jpg"></a>




To me, the obvious naming convention is:



<img id="fold" src="fold.png"></a>

<img id="curl" src="curl.jpg"></a>


but YMMV.