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

Code:

<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:

Code:

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.

Code:

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

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

**mr108** · 11-19-2015, 04:31 PM

Originally Posted by styxlawyer

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

Originally Posted by styxlawyer

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

Code:

<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

Originally Posted by mr108

How should the naming be changed, then?

Originally Posted by styxlawyer

.
.
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.

Code:

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

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

To me, the obvious naming convention is:

Code:

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

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

but YMMV.

Thread: page corner curl/peel problem

Thread Tools

Search Thread

page corner curl/peel problem

The Following User Says Thank You to styxlawyer For This Useful Post:

The Following User Says Thank You to styxlawyer For This Useful Post:

Similar Threads

using CURL to send sms

Issue with CURL

CURL and Javascript? Is it Possible?

Show Corner Of A Page

Page scroller: Left corner instead of right?

Bookmarks

Bookmarks

Posting Permissions