Overlay / Layout Help

[CBResources]

Hi all.

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:

1. Visitor loads page - Form is invisible.
2. 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).
3. Visitor fills in form and clicks submit.
4. Form actions, sends email & reloads telling visitor the email has been sent.
5. Visitor clicks link to close message.
6. 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.

Chris

[Paul O'B]

Hi,

The form needs a stacking context with position:relative for the z-index to take effect.

div.send2friend{position:relative;}

That will ensure the form is on top of the image and text.

The second part of your question is a programming question and not really a layout question. You would need to set the form to display:none and then reveal it with javascript when that link is clicked or if javascript is disabled the link should reload the page with the form in place (via php) or more simply redirect to another form page instead.

On form submission you handle the data serverside and then once again reload the page without the form in place or turn it off with script. All of which are beyond the scope of this forum so if you can say which approach you need to consider first I will move the thread to the appropriate forum.

That page also needs some loving care as there are loads of html errors in there You can't out breaks outside of list items and indeed you don't need them anyway as you could apply the margin to the list element instead.

Also code like this should not be seen this century.

<font class="horoscope_title">Today's Horoscope<br />
<br />
</font> <font class="horoscope_content_large">

The font tag was outlawed at about the same time that cowboys disappeared and should not be used these days. Use semantic html elements that describe the content best and a logical structure.

[CBResources]

Hi Paul,

Thanks for the reply.

I've added Position: relative to the "send2friend" div class in the CSS. But it did not do anything. The image and link are still on top of everything. So I added a relative position to that class as well (div class kelli) and again, nothing changed. The form definitely has the highest z-index out of them both so I just don't understand why the image and link are standing on top of everything.

Once I've got that part of the problem solved. I'll move on to the handling of the display/non-display of the form and we can move the topic, as suggested. But for now, I really want to get this problem solved because it's beyond me - I can't fathom why it's not working as it should.

Thank also for the tips regarding the outdated HTML. Once I've got the page looking and working the way it should be, I will be going in and tidying up all invalid HTML and making it cleaner, faster and optimized for cross-browser functionality. It's a working progress, I know. But I want to concentrate on this particular problem for now.

I hope you can help troubleshoot this strange positioning anomaly.

[Paul O'B]

Hi Paul,

Thanks for the reply.

I've added Position: relative to the "send2friend" div class in the CSS. But it did not do anything.

Then you must have done it wrong because I can assure you that it does do as I say

div.send2friend {
    background-color: #FFFFFF;
    border-color: #000000;
    border-radius: 10px 10px 10px 10px;
    border-style: solid;
    padding: 20px;
    position: relative;
    z-index: 10000;
}

I've tested the above code live on your site with Firebug and the IE developer tools and also copied the page locally to test and it will put the link and image below the form. If you are still having problems then add the code I gave so that I can check where its gone wrong.

However you really need to address all the code issues first as anyone of them could trip up a browser completely.

For example you have a list stuck in the middle of a div but no starting or ending ul.

<div class="kelli"> <img src="http://ivegotkids.com/wp-content/themes/thepink/images/kelli.png"><br />
		<a href="http://theastrologer.com">by Kelli Fox<br />
		The Astrologer</a> </div>
<li class="links"> Send this to a friend </li>
<div class="send2friend">
<font class="formtitle">Send this page to a friend by e-mail.</font> <br />
<br />

How is a browsers to know what type of list it is and what to do with it without the proper structure?

It may seem tedious to hear but html really must come first and be well structured. At the very least it should be free from error even if you are not yet sure of the correct semantics.

I also notice you are using the ie7 meta tag which takes a very good browser like IE9 and makes it render like a rubbish one (IE7). Unless you have specific bug/script/problem that the meta tag addresses then you should never use them as they break more sites than they fix.

[markbrown4]

Hi Chris,

However you really need to address all the code issues first as anyone of them could trip up a browser completely.

I completely agree with Paul on this, I don't want to have a go at your site but the HTML really needs to be rewritten and any CSS changes at this point are just putting lipstick on a pig.

These are the biggest problems with the site to me:
All the embedded CSS and Javascript should be combined and moved to an external .css and .js file.
You are currently making 116 requests when the page loads - this means that after somebody visits the page the browser is then making a further 116 different requests (some multiple times because you're including jquery and jquery-ui in multiple places)
All of this sort of thing needs to go, they're completely unnecessary.

<div class="Main">
<div class="Sheet">
<div class="Sheet-tl"></div>
 <div class="Sheet-tr"><div></div></div>
 <div class="Sheet-bl"><div></div></div>
 <div class="Sheet-br"><div></div></div>
 <div class="Sheet-tc"><div></div></div>
 <div class="Sheet-bc"><div></div></div>
 <div class="Sheet-cl"><div></div></div>
 <div class="Sheet-cr"><div></div></div>
 <div class="Sheet-cc"></div>
 <div class="Sheet-body">

<div class="Block">
 <div class="Block-tl"></div>
 <div class="Block-tr"><div></div></div>
 <div class="Block-bl"><div></div></div>
 <div class="Block-br"><div></div></div>
 <div class="Block-tc"><div></div></div>
 <div class="Block-bc"><div></div></div>
 <div class="Block-cl"><div></div></div>
 <div class="Block-cr"><div></div></div>
 <div class="Block-cc"></div>
 <div class="Block-body">
<div class="BlockHeader3">
 <div class="header-tag-icon">
  <div class="BlockHeader3-text">Advertisement</div>
 </div>
 <div class="l"></div>
 <div class="r"><div></div></div>
</div>
<div class="BlockContent">
 <div class="BlockContent-body">
 <center>

To be honest I think the site is past the point of no return and I can only suggest that you read a good book on writing clean HTML and CSS if you want to learn how to do this sort of thing properly much more easily.

If deathshadow sees that it will be end of him