Please take a look at the following page: http://ivegotkids.com/aries-test-page
There are a couple of things I need some help with on the above page.
1) The picture of the lady to the top right of the bordered area should not be there... That should be on a layer underneath the form, as should the "Send this to a friend" link next to her. No matter where I put it in the code or what I do with the CSS for that div (div class kelli), she seems to remain on top of everything and I need her to be underneath the form.
2) The form should not be there when the page loads. I want this to be an overlay that appears when I click on that "Send this to a friend" link - Then I want the overlay to remain there whilst somebody fills out the form, submits it and is returned to the page with the overlay still there telling them the email has been sent. I then want a link to close the form which will put the overlay out of sight again.
I am hoping somebody can help me with both of the above points. The form itself works perfectly if you want to give it a go so you can see for yourself how it behaves. This might give you a better idea of what I want to do with the layout.
So to recap - This is how it should go:
- Visitor loads page - Form is invisible.
- Visitor clicks on "Send to a friend" link and form appears (On top of everything else as an overlay - note, the rest of the page should NOT move down - it should maintain it's position on the screen).
- Visitor fills in form and clicks submit.
- Form actions, sends email & reloads telling visitor the email has been sent.
- Visitor clicks link to close message.
- Page loaded as appears in Step 1.
I hope this makes sense and look forward to getting some helpful answers, as I always do - Much appreciation in advance.