Hello everyone,
I am trying to find out how I can see the #confirmform div when it is placed outside of the main container div of my website. The reason I want to have it outside of the container div is because when a user successfully submits an email at the first input contact form, the rest of the page will be turned gray and inactive while the rest of the contact form content is displayed and active. So far, I can’t really figure out why I can’t display the content outside of the container div. The container, obviously, holds all of the other page content inside it.
The end of my home page’s markup:
<!-- more page content above here -->
<div id="rightside">
<div id="rightsidestart"> </div>
<div id="rightsidebody">
<h2 class="sideWindowHeaderText">Not Recommended</h2>
<ul class="sideWindowLinks">
<li><a href="#">Anthony Morrison's Big Profits Secret</a></li>
<li><a href="#">Mobile Mass Media</a></li>
<li><a href="#">Prorexin</a></li>
</ul>
<form id="emailbox" name="form1" method="get" action="Scripts/emailtester.php">
<div>
<input type="text" name="email" id="go" value="your e-mail" onclick="input_focus(this)" maxlength="60"/>
<input type="submit" id="submit" value="Join" />
</div>
</form>
</div>
<div id="rightsideend"> </div>
</div><!-- end side windows -->
</div><!-- end container -->
<div id="confirmform">
<form name="form2" id="submissionform" method="post" action="?">
<div>
<label for="confirmemail" class="fixedwidth">Confirm your e-mail:<span>*</span></label>
<input type="text" name="confirmemail" id="confirmemail" class="fixedwidth" value="" maxlength="60" class="inputwidth"/>
</div>
<div>
<label for="name" class="fixedwidth">Enter your name:<span>*</span></label>
<input type="text" name="name" id="name" class="fixedwidth" value="" maxlength="60" class="inputwidth"/>
</div>
<div>
<label for="age" class="fixedwidth">Select your age range:</label>
<select name="age" id="age" class="inputwidth">
<option selected="selected">18–35</option>
<option>36–55</option>
<option>55+</option>
<option>17 or younger</option>
</select>
</div>
<div>
<label for="country" class="fixedwidth">Select your country:<span>*</span></label>
<select name="country" id="country" class="inputwidth">
<option selected="selected">Select Country</option>
<option>United States</option>
<option>United Kingdom</option>
<option>Canada</option>
<option>Australia</option>
<option>Russia</option>
<option>Brazil</option>
<option>Somewhere else</option>
</select>
</div>
<p id="errormessage">You didn't enter the same e-mail address!</p>
<input type="submit" value="Sign Me Up!" class="formsubmitbutton" onclick="checkSubmission()" id="2ndstep"/>
<input type="submit" value="Cancel" class="formsubmitbutton" onclick="backToHomePage()"/>
</form>
</div>
<div id="status"> </div>
<script type="text/javascript" src="Scripts/jQuery.js"></script>
<script type="text/javascript" src="Scripts/emailbox.js"></script>
<script type="text/javascript" src="Scripts/jQuery.blockUI.js"></script>
</body>
</html>
The stylesheet:
@charset "utf-8";
/* Home Page CSS Document */
body{
background:url(bg2.jpg);
background-position:top center;
background-color:#999;
margin:0 auto;
overflow:auto;
font-family:"Times New Roman", Times, serif;
}
#container{
height:1000px;
width:1360px;
overflow:visible;
margin:0 auto;
position:relative;
z-index:7;
background:url("homepagebgwinter.gif") repeat scroll 0% 200px transparent;
}
#leftside{
position:absolute;
top:405px;
left:98px;
width:auto;
}
#leftsidestart{
float:left;
background:url("sidewindowstart.gif");
width:27px;
height:250px;
margin:0;
}
#leftsidebody{
margin:0 auto;
float:left;
background:url("sidewindowbody.gif") repeat-x;
width:240px;
height:250px;
}
#leftsideend{
float:left;
background:url("sidewindowend.gif");
width:16px;
height:250px;
margin:0;
}
#middle{
width:626px;
margin:0 auto;
}
#rightside{
width:auto;
position:absolute;
top:405px;
left:980px;
}
#rightsidestart{
background:url("sidewindowstartright.gif");
float:left;
width:27px;
height:250px;
}
#rightsidebody{
background:url("sidewindowbodyright.gif") repeat-x;
float:left;
margin:0 auto;
width:247px;
height:250px;
position:relative;
}
#rightsideend{
background:url("sidewindowendright.gif");
float:right;
width:15px;
height:250px;
}
h1{
height:206px;
width:626px;
position:relative;
padding:0;
margin:0;
text-align:center;
}
/* mac hide */
h1{overflow:hidden;}
/* end hide */
h1 span{
background:url("header.jpg");
position:absolute;
left:0;
top:0;
display:block;
height:206px;
width:626px;
}
#body{
background-image:url(body.jpg);
width:626px;
text-align: center;
margin:0 auto;
}
#footer{
background-image:url(footer.jpg);
width:626px;
height:30px;
text-align: center;
margin:0 auto;
padding:0;
}
#welcomestatement{
display:block;
background-color:#FF9;
text-align:left;
padding:3px 20px;
border-bottom:2px inset #F8CB87;
margin:auto;
width:400px;
position:relative;
top:10px;
/*for IE*/
filter:alpha(opacity=50);
/*standard CSS3*/
opacity:0.5;
}
p#welcomestatement{
/*for IE*/
filter:alpha(opacity=100);
/*standard CSS3*/
opacity:1;
font-weight:bold;
}
.sideWindowHeaderText{
font-size:18px;
color:#000;
font-weight:bold;
width:200px;
padding:1px 0 0 5px;
/*text shadow*/
text-shadow:0px 0px 6px #009, 2px 0px 12px #066;
}
#copytagatbottom{
font-size:12px;
text-align:center;
color:#000;
display:block;
background-color:#FFF;
width:200px;
margin:0 auto;
padding:2px;
padding-bottom:4px;
border:1px dashed #6B6B6B;
}
#emailbox{
background:url("emailbox.gif") no-repeat scroll 50% 0 transparent;
height:200px;
width:156px;
margin:0 0 0 8px;
position:absolute;
top:96%;
}
#go{width:80px; margin-top:165px; margin-left:12px;}
#confirmform{
background:url("emailsubmission.gif") no-repeat scroll 50% 0 transparent;
width:360px;
height:280px;
position:absolute;
display:none;
top:48%;
right:37%;
}
#submissionform{
padding:60px 10px 0 20px;
text-align:left;
z-index:999;
}
.fixedwidth{width:150px; float:left;}
.inputwidth{width:170px;}
#submissionform span{color:red;}
.formsubmitbutton{margin-left:50px; margin-top:10px;}
#errormessage{color:red; font-size:12px; font-weight:bold;}
#status{
background:url("successorfailure.gif");
width:450px;
height:100px;
position:absolute;
display:none;
bottom:37%;
left:33%;
}
h4{
margin:0;
padding:8px 10px 1px 12px;
text-shadow:1px 1px 1px #090;
}
#status p{
margin:0;
padding:2px 10px 1px 17px;
}
.sideWindowLinks li{
list-style:disc;
padding:3px 3px 3px 0;
width:auto;
}
.sideWindowLinks li a{
font-size:14px;
font-weight:bold;
color:#069;
}
.sideWindowLinks a:hover, .sideWindowLinks a:focus, .sideWindowLinks a:active{color:#09C; text-decoration:none;}
My website: World Review Group
oh well, that’s okay. I haven’t exactly been changing it into a totally distorted mess.