Link to home
Start Free TrialLog in
Avatar of chrisj1963
chrisj1963

asked on

divs contained within html falling outside of intended area

I have divs that show/hide based upon a form "continue" button.
I have placed the div content between lines 74 and 126 but the div floats outside of the intended area.
Can someone help me understand how to change the code to ensure the the div content does not float outside of the area between the header and the footer.

see http://g3crm.com/experts/5.htm 

code is attached
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>g3crm</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content="" name=keywords>
<META content="" name=description>
<META content="MSHTML 6.00.2900.3157" name=GENERATOR>
 
<!--CJ insert-->
<!--Begin Multipage script-->
<script language="JavaScript">
var currentLayer = 'page1';
function showLayer(lyr){
	hideLayer(currentLayer);
	document.getElementById(lyr).style.visibility = 'visible';
	currentLayer = lyr;
}
 
function hideLayer(lyr){
	document.getElementById(lyr).style.visibility = 'hidden';
}
function showValues(form){
	var values = '';
	var len = form.length - 1; //Leave off Submit Button
	for(i=0; i<len; i++){
		if(form[i].id.indexOf("C")!=-1||form[i].id.indexOf("B")!=-1)//Skip Continue and Back Buttons
			continue;
		values += form[i].id;
		values += ': ';
		values += form[i].value;
		values += '\n';
	}
	alert(values);
}
</script>
<!--End Multipage Script-->
<style>
body{
	font: 10pt sans-serif;
}
.page{
	position: absolute;
	top: 10;
	left: 100;
	visibility: hidden;
}
</style>
 
</style>
<!--End CJ insert-->
 
</HEAD>
<BODY>
<TABLE borderColor=#000000 height="100%" cellSpacing=0 cellPadding=6 
width="100%" bgColor=#ffcc00 border=0>
  <TBODY>
  <TR>
    <TD vAlign=top>
      <CENTER><!-- Inner table for header, footer and content table, centered in main table-->
      <TABLE borderColor=#52555e height="100%" cellSpacing=0 cellPadding=0 
      width=650 bgColor=#ffffff border=0>
        <TBODY>
        <TR>
          <TD vAlign=top><IMG alt="Back to MainPage" 
            src="images/twm_01.gif" border=0> </TD></TR>
        <TR>
          <TD vAlign=top>
            <CENTER><BR><!-- 2nd Inner table for main content, centered in 1st inner table  -->
            <TABLE cellSpacing=2 cellPadding=2 width=600 border=0>
              <TBODY>
              <TR>
                <TD><!-- Main content of order page 1 -->
 
<!--CJ Content-->
<form id="multiForm" method="POST" action="javascript:void(0)" onSubmit="showValues(this)">
 
<div id="page1" class="page" style="visibility:visible;">
 
 
 
  <p>Question 1 <input type="text" id="T1" size="20"></p>
  <p>Question 2 <input type="text" id="T2" size="20"></p>
  <p>Question 3 <input type="text" id="T3" size="20"></p>
  <p>Question 4 <input type="text" id="T4" size="20"></p>
  <p>Question 5 <input type="text" id="T5" size="20"></p>
  <p><input type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p>
 
 
</div>
<div id="page2" class="page">
 
 
  <p>Question 6 <input type="text" id="T6" size="20"></p>
  <p>Question 7 <input type="text" id="T7" size="20"></p>
  <p>Question 8 <input type="text" id="T8" size="20"></p>
  <p>Question 9 <input type="text" id="T9" size="20"></p>
  <p>Question 10 <input type="text" id="T10" size="20"></p>
  <p><input type="button" id="B1" value="Go Back" onClick="showLayer('page1')"><input type="button" id="C2" value="Continue" onClick="showLayer('page3')"></p>
 
</span>
</div>
<div id="page3" class="page">
 
 
  <p>Question 11 <input type="text" id="T11" size="20"></p>
  <p>Question 12 <input type="text" id="T12" size="20"></p>
  <p>Question 13 <input type="text" id="T13" size="20"></p>
  <p>Question 14 <input type="text" id="T14" size="20"></p>
  <p>Question 15 <input type="text" id="T15" size="20"></p>
  <p><input type="button" id="B2" value="Go Back" onClick="showLayer('page2')"><input type="button" id="C3" value="Continue" onClick="showLayer('page4')"></p>
</span>
</div>
<div id="page4" class="page">
 
 
  <p>Question 16 <input type="text" id="T16" size="20"></p>
  <p>Question 17 <input type="text" id="T17" size="20"></p>
  <p>Question 18 <input type="text" id="T18" size="20"></p>
  <p>Question 19 <input type="text" id="T19" size="20"></p>
  <p>Question 20 <input type="text" id="T20" size="20"></p>
  <p><input type="button" id="B3" value="Go Back" onClick="showLayer('page3')"><input type="submit" value="Submit" id="submit"></p>
</span>
</div>
 
</form>
<!--end CJ content-->
                  
        </TD></TR></TBODY></TABLE><!-- END of 2nd Inner table for main content, centered in 1st inner table  --><BR><BR><BR></CENTER></TD></TR>
        <TR>
          <TD bgColor=#ffffff>
            <CENTER><!-- Table with Footer Links, legal and support -->
            <TABLE cellSpacing=10 width=0 align=center border=0>
              <TBODY>
              <TR>
                <TD><A class=legal-menu 
                  href="http://g3crm.com/support/" 
                  target=_blank>Support</A></TD>
                <TD><A class=legal-menu 
                  href="http://g3crm.com/legal-docs/imprint.htm" 
                  target=_blank>Imprint</A></TD>
                <TD><A class=legal-menu 
                  href="http://g3crm.com/legal-docs/privacy_policy.htm" 
                  target=_blank>Privacy Policy</A></TD>
                <TD><A class=legal-menu 
                  href="http://g3crm.com/legal-docs/TERMS_AND%20_CONDITIONS_OF_USE.htm" 
                  target=_blank>Terms and Conditions of Use</A></TD>
                <TD><A class=legal-menu 
                  href="http://g3crm.com/legal-docs/earnings-disclaimer.htm" 
                  target=_blank>Earnings Disclaimer</A></TD></TR></TBODY></TABLE><!-- END of table with Footer Links, legal and support --></CENTER></TD></TR>
        <TR>
          <TD vAlign=bottom 
    bgColor=#ffffff>&nbsp;</TD></TR></TBODY></TABLE></CENTER></TD></TR></TBODY></TABLE><!--End of outer table fills page completely with backgroung image or table --></BODY></HTML>

Open in new window

SOLUTION
Avatar of alex4544
alex4544

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Mark Steggles
Hello,

Instead of toggling visibility you need to toggle display none/block.

.page {
display:none;
}

Remove the position, top and left from .page

Steggs
Avatar of chrisj1963
chrisj1963

ASKER

Great that keeps it within the page, but please note how the content keeps jumping down the page when you hit continue.  Any idea how to stop that.  i would like each page after "continue" is hit to appear in the same spot.
Thanks.
O I see

add position:relative to the form <form onsubmit="showValues(this)" action="javascript:void(0)" method="post" id="multiForm">

you will need to use positioning like you had before

.page {
display:none;
position:absolute;
top:100px;
left:100px;
}
thanks for the response steggs. My response was actually alex4344. after i replied i realized that you had posted.

I am not clear about your direction...  can you please clarify?

i changed the syle info per your direction in your last comment, but I am not clear about what you mean by
add position:relative to the form <form onsubmit="showValues(this)" action="javascript:void(0)" method="post" id="multiForm">

please see http://g3crm.com/experts/6.htm and the source code...

thanks for your help
<form onsubmit="showValues(this)" action="javascript:void(0)" method="post" id="multiForm" style="position:relative">

Thinking about it you can still use visibilty instead of display

Steggs
change position to fixed and then adjust your top:10 and left:100 ot where you want them else create a container div "#container" that is positioned relative.
Thanks. Getting closer (I think).  i may not have following your direction properly.

see result here: http://g3crm.com/experts/6.htm


i added position: relative per your direction and the style code as follows:

.page{
display:visible;
position:absolute;
top:100px;
left:100px;
}

...but the result is not what i hoped for...

there is an empty space at the top and the remaining divs are piled on top of each other.

thoughts?
.page{
      position: fixed;
      top: 50%;
      left: 50%;
      margin-left:-120px;
      margin-top:-200px;
      visibility: hidden;
}

then change table heights to 300px
and add td height here.
 <TD height=300px>
<!-- Main content of order page 1 -->
 <!--CJ Content-->
display:visible; is not right

visibilty:hidden;
sorry that css only works in FF
give the form a height aswell

<form onsubmit="showValues(this)" action="javascript:void(0)" method="post" id="multiForm" style="position:relative;height:300px">
thanks steggs.
solved the visibility style issue, but the location is still an issue.
please see http://g3crm.com/experts/6.htm and view code.
@Steggs - the position on the form should be fixed rather than relative?
chris if you change your position of your .page to fixed and give your TD and Form a height should solve your issues
@alex4544 - No m8... fixed is not understood by ie6. We only add position relative to the form to give the .page class some 'positioning context'... relative is perfect for this.
Chris, if you just add a height to the form or the table cell that will fix, position absolute takes an element out of the flow, which is why the form is not containing your divs that have position absolute
Steggs,
Thanks.  i am not sure that i am getting it right.  when I change line #62 from height="100%" to height=200 or whatever it does adjust the location of the content, but i have two issues.

1) There is still an empty space above it.  How can i remove that or set the top so that it is closer to the header image?
2) This is a sample multipage form. in reality each page will need to be a different height because the content will change from page to page.  Can I adjust height from div to div? How would i do that?

thanks
You havnt done what I said... .page needs absolute positioning, the form needs position relative and a height... Please change it so i can see the other problems
here you go:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>g3crm</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content="" name=keywords>
<META content="" name=description>
<META content="MSHTML 6.00.2900.3157" name=GENERATOR>
 
<!--CJ insert-->
<!--Begin Multipage script-->
<script language="JavaScript">
var currentLayer = 'page1';
function showLayer(lyr){
        hideLayer(currentLayer);
        document.getElementById(lyr).style.display = 'block';
        currentLayer = lyr;
}
 
function hideLayer(lyr){
        document.getElementById(lyr).style.display = 'none';
}
function showValues(form){
        var values = '';
        var len = form.length - 1; //Leave off Submit Button
        for(i=0; i<len; i++){
                if(form[i].id.indexOf("C")!=-1||form[i].id.indexOf("B")!=-1)//Skip Continue and Back Buttons
                        continue;
                values += form[i].id;
                values += ': ';
                values += form[i].value;
                values += '\n';
        }
        alert(values);
}
</script>
<!--End Multipage Script-->
<style>
body{
        font: 10pt sans-serif;
}
.page{
        display:none;
}
</style>
 
</style>
<!--End CJ insert-->
 
</HEAD>
<BODY>
<TABLE borderColor=#000000 height="100%" cellSpacing=0 cellPadding=6 
width="100%" bgColor=#ffcc00 border=0>
  <TBODY>
  <TR>
    <TD vAlign=top>
      <CENTER><!-- Inner table for header, footer and content table, centered in main table-->
      <TABLE borderColor=#52555e height="100%" cellSpacing=0 cellPadding=0 
      width=650 bgColor=#ffffff border=0>
        <TBODY>
        <TR>
          <TD vAlign=top><IMG alt="Back to MainPage" 
            src="images/twm_01.gif" border=0> </TD></TR>
        <TR>
          <TD vAlign=top>
            <CENTER><BR><!-- 2nd Inner table for main content, centered in 1st inner table  -->
            <TABLE cellSpacing=2 cellPadding=2 width=600 border=0>
              <TBODY>
              <TR>
                <TD><!-- Main content of order page 1 -->
 
<!--CJ Content-->
<form id="multiForm" method="POST" action="javascript:void(0)" onSubmit="showValues(this)">
 
<div id="page1" class="page" style="display:block">
 
 
 
  <p>Question 1 <input type="text" id="T1" size="20"></p>
  <p>Question 2 <input type="text" id="T2" size="20"></p>
  <p>Question 3 <input type="text" id="T3" size="20"></p>
  <p>Question 4 <input type="text" id="T4" size="20"></p>
  <p>Question 5 <input type="text" id="T5" size="20"></p>
  <p><input type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p>
 
 
</div>
<div id="page2" class="page">
 
 
  <p>Question 6 <input type="text" id="T6" size="20"></p>
  <p>Question 7 <input type="text" id="T7" size="20"></p>
  <p>Question 8 <input type="text" id="T8" size="20"></p>
  <p>Question 9 <input type="text" id="T9" size="20"></p>
  <p>Question 10 <input type="text" id="T10" size="20"></p>
  <p><input type="button" id="B1" value="Go Back" onClick="showLayer('page1')"><input type="button" id="C2" value="Continue" onClick="showLayer('page3')"></p>
 
</span>
</div>
<div id="page3" class="page">
 
 
  <p>Question 11 <input type="text" id="T11" size="20"></p>
  <p>Question 12 <input type="text" id="T12" size="20"></p>
  <p>Question 13 <input type="text" id="T13" size="20"></p>
  <p>Question 14 <input type="text" id="T14" size="20"></p>
  <p>Question 15 <input type="text" id="T15" size="20"></p>
  <p><input type="button" id="B2" value="Go Back" onClick="showLayer('page2')"><input type="button" id="C3" value="Continue" onClick="showLayer('page4')"></p>
</span>
</div>
<div id="page4" class="page">
 
 
  <p>Question 16 <input type="text" id="T16" size="20"></p>
  <p>Question 17 <input type="text" id="T17" size="20"></p>
  <p>Question 18 <input type="text" id="T18" size="20"></p>
  <p>Question 19 <input type="text" id="T19" size="20"></p>
  <p>Question 20 <input type="text" id="T20" size="20"></p>
  <p><input type="button" id="B3" value="Go Back" onClick="showLayer('page3')"><input type="submit" value="Submit" id="submit"></p>
</span>
</div>
 
</form>
<!--end CJ content-->
                  
        </TD></TR></TBODY></TABLE><!-- END of 2nd Inner table for main content, centered in 1st inner table  --><BR><BR><BR></CENTER></TD></TR>
        <TR>
          <TD bgColor=#ffffff>
            <CENTER><!-- Table with Footer Links, legal and support -->
            <TABLE cellSpacing=10 width=0 align=center border=0>
              <TBODY>
              <TR>
                <TD><A class=legal-menu 
                  href="http://g3crm.com/support/" 
                  target=_blank>Support</A></TD>
                <TD><A class=legal-menu 
                  href="http://g3crm.com/legal-docs/imprint.htm" 
                  target=_blank>Imprint</A></TD>
                <TD><A class=legal-menu 
                  href="http://g3crm.com/legal-docs/privacy_policy.htm" 
                  target=_blank>Privacy Policy</A></TD>
                <TD><A class=legal-menu 
                  href="http://g3crm.com/legal-docs/TERMS_AND%20_CONDITIONS_OF_USE.htm" 
                  target=_blank>Terms and Conditions of Use</A></TD>
                <TD><A class=legal-menu 
                  href="http://g3crm.com/legal-docs/earnings-disclaimer.htm" 
                  target=_blank>Earnings Disclaimer</A></TD></TR></TBODY></TABLE><!-- END of table with Footer Links, legal and support --></CENTER></TD></TR>
        <TR>
          <TD vAlign=bottom 
    bgColor=#ffffff>&nbsp;</TD></TR></TBODY></TABLE></CENTER></TD></TR></TBODY></TABLE><!--End of outer table fills page completely with backgroung image or table --></BODY></HTML>

Open in new window

Got it. It looks good so far. Now the only issue is that Page two, where i have 10 questions instead of 5, the content flows over the footer.  

see http://g3crm.com/experts/6b.htm and source

Is there a way to control the height within individual divs?

I tried the following on lines 52-60 without success...

#page1{
position:relative;
height:150;
}

#page2{
position:relative;
height:300;
}



ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Got it. Perfect. thanks for your patience.   I have follow-up questions, off of this specific topic but related to the same form, and i will post in a while.  since you are familiar with what i am doing, i would appreciate your response if you are able to help.
alex4544's response was quick and got me started, but unfortunately was not a solution that completely worked.
Steggs was complete and after he tired of trying to teach me :) gave me the full solution (though, i did learn a great deal in this exercise).
Thanks to both!