DIV Layers, On top of each other

[andy7t]

Re:

https://secure.glxhost.com/order/new.cgi?package=1

I am trying to create a button which switches a DIV layer to visible or not- so that the customer can either have a "NEW CUSTOMER" or "EXSITING CUSTOMER" box to use.

I've got this to work great by using two <DIV>'s, and using javascript to set them visible or not.

The problem is, the first box on the page will take up a lot of room, pushing the second DIV further down the page.
I would like both divs to start in the same place.
I was planning to use POSITION:ABSOLUTE, however, the position is not absolute, because the content above it could change.
How do i tell two DIV layers to position themselves at the top of a table?

 

[Foamcow]

You shouldn't need to use position:absolute for this.
Are you using display:hidden or display:none to hide the boxes?
Try using "none" as this will remove the element from the document flow completely.

If you position the containing element then you should be able to position the boxes relative to their container. So the container can move according to whats above it, but the boxes themselves are positioned relative to that container and not to the browser window... if you see what I mean.

Can you show us the page or some source code? It makes helping alot easier.


Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[andy7t]

https://secure.glxhost.com/order/new.cgi?package=1

is where the code is.

Maybe thats where i've gone wrong then.
I've actually just made a javascript function that does element.style.visibility="hidden/visible

 

[andy7t]

Heres the code:

function newchange()
{
document.getElementById("loginbox").style.visibility = "hidden";
document.getElementById("newbox").style.visibility = "visible";
}

function loginchange()
{
document.getElementById("loginbox").style.visibility = "visible";
document.getElementById("newbox").style.visibility = "hidden";
}




<label for="newbtn"><input type=radio name=option onclick=newchange(); CHECKED id=newbtn> New Customer</label>
&nbsp; &nbsp;<label for="exbtn"><input type=radio name=option onclick=loginchange(); id=exbtn> Existing Customer</label>
</TR></TD></TABLE>
</TABLE>


<DIV id=loginbox style="visibility:hidden; position:relative">
This is where the new login box<BR>
will
<BR>
go
</DIV>


<DIV id=newbox style="visibility:visible; position:relative">
a new customer<BR>
data entry<BR>
screen will go
<BR>
here
</DIV>

 

[andy7t]

Thanks!
Sorted it with your suggestion to use DISPLAY:none instead.

I've changed the JS to:
document.getElementById("loginbox").style.display="block";
document.getElementById("newbox").style.display= "none";

 

[Foamcow]

...and there you go. You're welcome.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK