...

View Full Version : area not hiding in css



invasion
11-08-2010, 06:12 PM
My name is Steven and I wanted to officially introduce myself and see if anyone could help me with a css issue.

I have set the page up and upon checking an item, I want the page to show the form below. I was able to do that but either way it keeps the space where the form is which in fact, it should minimize and maximize the space upon clicking the check item. Instead, the area is still there.

This seems to the only issue that I am unable to resolve and would greatly appreciate it if someone could help.

I have listed the code below as well as attached the css and the page( If images are need, please let me know:

css code:


html, body {
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
font-family:Arial, Helvetica, sans-serif;
}


#logo {
background: url(profileimages/logo.png) no-repeat;

position: absolute;
left: 6px;
top: 3px;
z-index: 4;
width: 92px;
height: 64px;
}

#congratulations {

position: absolute;
left: 22px;
top: 377px;
z-index: 3;
width: 914px;
height: 30px;
font-size:26px;
font-weight:bold;
color:#4fa700;
}

#toptext {

position: absolute;
left: 31px;
top: 85px;
z-index: 6;
width: 897px;
height: 16px;
font-size:16px;
font-weight:bold;
color:#1b1b1b;
}

#cartproduct,
#cartproductcopy {

position: absolute;
z-index: 2;
width: 268px;
height: 20px;
font-size:18px;
color:#272727;
}

#shippinginformation {

position: absolute;
left: 226px;
top: 421px;
z-index: 2;
width: 711px;
height: 31px;
font-weight:bold;
font-size:34px;
color:#272727;
}

#willbesecure {

position: absolute;
left: 83px;
top: 285px;
z-index: 3;
width: 315px;
height: 14px;
font-size:12px;
font-weight:bold;
color:#272727;
}

#foryourarea {

position: absolute;
left: 682px;
top: 257px;
z-index: 3;
width: 233px;
height: 14px;
font-size:11px;
color:#272727;
font-weight:bold;
}

.toplinksbar {
color:#006FD6;
text-decoration:none;
}

.toplinksites {
font: 12px/14px Arial;
margin: 0px;
color: #1B1B1B;
text-align: left;
text-decoration: underline;
}

#toplinks {

position: absolute;
left: 745px;
top: 25px;
z-index: 2;
width: 227px;
}

#item,
#qtyproductback {
background: url(profileimages/layer5copy12.gif) no-repeat;

position: absolute;
left: 11px;
z-index: 2;
width: 31px;
height: 25px;
}

#totalback,
#priceback {
background: url(profileimages/layer5copy9.gif) no-repeat;

position: absolute;
top: 156px;
z-index: 2;
width: 124px;
height: 25px;
}

#cartproductcopy {
top: 720px;
left: 262px;
}

#ourprice {

position: absolute;
left: 803px;
top: 190px;
z-index: 2;
width: 117px;
height: 28px;
font-size:12px;
font-weight:bold;
}

.ourpricepercent {
color:#43a000;
}

#securelock {
background: url(profileimages/id46vectorsmartobject.gif) no-repeat;

position: absolute;
left: 525px;
top: 875px;
z-index: 2;
width: 20px;
height: 27px;
}

#profilevectorsmartobject {
background: url(profileimages/vectorsmartobjectsmall.gif) no-repeat;

position: absolute;
left: 15px;
top: 259px;
z-index: 3;
width: 62px;
height: 68px;
}

#cartproduct {
top: 191px;
left: 54px;
}

#productdescription {

position: absolute;
left: 59px;
top: 163px;
z-index: 3;
width: 140px;
height: 13px;
color:#272727;
font-size:14px;
font-weight:bold;
}

#retailprice {

position: absolute;
left: 669px;
top: 190px;
z-index: 2;
width: 117px;
height: 13px;
font-size:13px;
color:#ff0000;
}

#acceptedpayments {

position: absolute;
left: 490px;
top: 270px;
z-index: 2;
width: 121px;
height: 13px;
font-size:12px;
font-weight:bold;
color:#272727;
}

#enteryourzipcode {

position: absolute;
left: 683px;
top: 279px;
z-index: 3;
width: 145px;
height: 12px;
font-size:12px;
font-weight:bold;
color:#272727;
}

#profilereadmoreaboutit {

position: absolute;
left: 87px;
top: 300px;
z-index: 3;
width: 98px;
height: 9px;
}

.profilereadmoreaboutitlink {
text-decoration:underline;
color:#3170ab;
font-size:10px;

}

#formback {
background: url(profileimages/layer5copy13.gif) no-repeat;

position: absolute;
left: 557px;
top: 467px;
z-index: 2;
width: 380px;
height: 381px;
}

#formtable {
font-size:14px;
font-weight:bold;
}

#item {
top: 187px;
}

#qtyproductback {
top: 156px;
}

#checkback {
background: url(profileimages/layer5copy10.gif) no-repeat;

position: absolute;
left: 677px;
top: 249px;
z-index: 2;
width: 249px;
height: 77px;
}

#lowerbar {
background: url(profileimages/layer1copy5.gif) no-repeat;

position: absolute;
left: 4px;
top: 342px;
z-index: 2;
width: 952px;
height: 3px;
}

#shippingback {
background: url(profileimages/layer5copy7.gif) no-repeat;

position: absolute;
left: 566px;
top: 156px;
z-index: 2;
width: 90px;
height: 92px;
}

#zipcodefield {

position: absolute;
left: 681px;
top: 296px;
z-index: 3;
width: 150px;
height: 25px;
}

#zipcodefieldform {
border:#aab1b7;
}

#totalback {
left: 800px;
}

#priceback {
left: 667px;
}

#formarea {
display:none;
overflow:hidden;
width:1px;
height:1px;
}

#congratulationsback {
background: url(profileimages/layer24copy.gif) no-repeat;

position: absolute;
left: 5px;
top: 368px;
z-index: 2;
width: 951px;
height: 42px;
}

#producttitleback {
background: url(profileimages/layer5copy6.gif) no-repeat;

position: absolute;
left: 48px;
top: 156px;
z-index: 2;
width: 507px;
height: 25px;
}

#layer1copy {
background: url(profileimages/layer1copy.gif) no-repeat;

position: absolute;
left: 373px;
top: 68px;
z-index: 3;
width: 400px;
height: 5px;
}

#profilesecurityback {
background: url(profileimages/layer5copy.gif) no-repeat;

position: absolute;
left: 19px;
top: 278px;
z-index: 2;
width: 395px;
height: 40px;
}

#area {
margin: 0px auto 0px auto;
background: url(profileimages/background.gif) no-repeat;
height:100%;
width: 960px;
position: relative;
}

#shipping {

position: absolute;
left: 583px;
top: 162px;
z-index: 3;
width: 54px;
height: 14px;
font-size:14px;
font-weight:bold;
color:#272727;
}

#yourcart {

position: absolute;
left: 10px;
top: 132px;
z-index: 2;
width: 106px;
height: 17px;
font-size:20px;
font-weight:bold;
color:#272727;
}

#profileshadow {
background: url(profileimages/layer16.gif) no-repeat;

position: absolute;
left: 29px;
top: 326px;
z-index: 2;
width: 32px;
height: 4px;
}

#fedex {
background: url(profileimages/layer30.gif) no-repeat;

position: absolute;
left: 579px;
top: 221px;
z-index: 4;
width: 66px;
height: 18px;
}

#paymenttypes {
background: url(profileimages/layer18.gif) no-repeat;

position: absolute;
left: 490px;
top: 291px;
z-index: 2;
width: 174px;
height: 27px;
}

#profileproductback {
background: url(profileimages/layer24.gif) no-repeat;
left: 223px;
top: 467px;
z-index: 2;
width: 323px;
height: 243px;
}

#profileproductimage {
/*background: url(profileimages/layer25.gif) no-repeat;*/

position: absolute;
left: 227px;
top: 491px;
z-index: 3;
width: 305px;
height: 200px;
}

#topbar {
background: url(profileimages/topbar.png) no-repeat;
position: absolute;
left: 15px;
top: 73px;
z-index: 5;
width: 952px;
height: 41px;
}

#freedivide {
background: url(profileimages/layer32.gif) no-repeat;

position: absolute;
left: 567px;
top: 213px;
z-index: 4;
width: 88px;
height: 1px;
}

#fedexback {
background: url(profileimages/layer31.gif) no-repeat;

position: absolute;
left: 567px;
top: 214px;
z-index: 3;
width: 88px;
height: 33px;
}

#checkbackbutton {
/*background: url(profileimages/layer21.gif) no-repeat;*/

position: absolute;
left: 835px;
top: 293px;
z-index: 3;
width: 72px;
height: 26px;
}

#lowerarrow {
background: url(profileimages/layer34.gif) no-repeat;

position: absolute;
left: 862px;
top: 344px;
z-index: 3;
width: 24px;
height: 6px;
}

#paymentline {
background: url(profileimages/layer20.gif) no-repeat;

position: absolute;
left: 490px;
top: 285px;
z-index: 2;
width: 173px;
height: 1px;
}

#form {
/*background: url(profileimages/layer23.gif) no-repeat;*/

position: absolute;
left: 571px;
top: 480px;
z-index: 3;
width: 349px;
height: 354px;
}

#checkoutbuttonback {
/*background: url(profileimages/layer6.gif) no-repeat;*/

position: absolute;
left: 556px;
top: 854px;
z-index: 2;
width: 382px;
height: 50px;
}

#total {

position: absolute;
left: 806px;
top: 163px;
z-index: 3;
width: 28px;
height: 10px;
font-size:14px;
font-weight:bold;
color:#272727;
}

#price {

position: absolute;
left: 673px;
top: 163px;
z-index: 3;
width: 30px;
height: 11px;
font-size:14px;
font-weight:bold;
color:#272727;
}

#free {

position: absolute;
left: 598px;
top: 191px;
z-index: 3;
width: 34px;
height: 10px;
font-size:14px;
color:#2e2e2e;
font-weight:bold;
}

#radiobutton {

position: absolute;
left: 571px;
top: 190px;
z-index: 3;
width: 13px;
height: 13px;
}

#qty {

position: absolute;
left: 15px;
top: 162px;
z-index: 3;
width: 25px;
height: 14px;
font-size:14px;
font-weight:bold;
color:#272727;
}

#itemnumber {

position: absolute;
left: 24px;
top: 190px;
z-index: 3;
width: 5px;
height: 13px;
font-size:18px;
color:#272727;
}

#copyright {
position: absolute;
left: 13px;
top: 971px;
z-index: 2;
width: 940px;
height: 126px;
font-size:11px;

}

.copyrighttext {
text-align:center;
}

.copyrightlinks {
text-decoration:underline;
color:#000000;
}


Thanks for any help,

Steven:thumbsup:

digitalclubb
11-08-2010, 06:19 PM
That's a lot of absolutes ;)

Can you show us the HTML markup so we can get an understanding of the issues you are facing.

Thanks

invasion
11-08-2010, 06:24 PM
sure. No problem at all

I have also included a screenshot as well

Thanks again:D


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>FREE {GIFT_PAGE_TITLE}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<meta name="title" content="{GIFT_META_TITLE}" >
<meta name="description" content="{GIFT_META_DESCRIPTION}" >
<meta name="keywords" content="{GIFT_META_KEYWORDS}" >
<meta name="abstract" content="{GIFT_META_ABSTRACT}" >
<meta name="verify-v1" content="{GIFT_META_VERIFY_V1}" >
<meta name="verify-v2" content="{GIFT_META_VERIFY_V2}" >
<meta name="y-key" content="{GIFT_META_Y_KEY}" >
<link rel="stylesheet" type="text/css" media="screen, print, projection" href="profile.css"></link>
<subtemplate:detailshideshow>
</head>
<body >
<FORM NAME='reg_fm' METHOD=post ACTION='http://www.automotivencs.com/xg_reg.htm' onSubmit="document.reg_fm.js_status.value='y';make_x_win=0;"><INPUT TYPE=hidden NAME='js_status' VALUE='n'>
<INPUT TYPE=hidden NAME='show_email_field' VALUE=''>

<INPUT TYPE=hidden NAME='cmd' VALUE='perform_email'>
<INPUT TYPE=hidden NAME='from' VALUE=''>
<INPUT TYPE=hidden NAME='sprofile' VALUE='0'>
<INPUT TYPE=hidden NAME='promo_name' VALUE="dynamicgift">
<INPUT TYPE=hidden NAME='promo_id' VALUE="186122">
<INPUT TYPE=hidden NAME='catalog_id' VALUE="9522">
<INPUT TYPE=hidden NAME='promotion_id' VALUE="217">
<INPUT TYPE=hidden NAME='site_id' VALUE="1364">
<INPUT TYPE=hidden NAME='style_id' VALUE="1">
<INPUT TYPE=hidden NAME='template_style' VALUE="">
<INPUT TYPE=hidden NAME='prepop_type' VALUE="submit">
<INPUT TYPE=hidden NAME='gift_prepop' VALUE="creative">
<INPUT TYPE=hidden NAME='page_config_id' VALUE="7">
<INPUT TYPE=hidden NAME='tmp_sequence' VALUE="10223-9417-240-11017-6166-8815-8816-8817-10665-9186">
<INPUT TYPE=hidden NAME='promo_area' VALUE="26834-c329">
<INPUT TYPE=hidden NAME='promo_creative' VALUE="">
<INPUT TYPE=hidden NAME='mode' VALUE="pitch">

<INPUT TYPE=hidden NAME='uid' VALUE="">
<INPUT TYPE=hidden NAME='pcd' VALUE="">
<INPUT TYPE=hidden NAME='raf_ad_id' VALUE="">
<INPUT TYPE=hidden NAME='redirect_url' VALUE="">
<INPUT TYPE=hidden NAME='ua' VALUE="">
<INPUT TYPE=hidden NAME='ex' VALUE="">
<INPUT TYPE=hidden NAME='sprofile' VALUE="0">
<INPUT TYPE=hidden NAME='pid_value' VALUE="599">
<div id="area">
<div id="logo"></div>
<div id="toplinks">
<a href="#" class="toplinksites">MoneyMutual.com</a></span><span class="toplinksbar">&nbsp;|&nbsp;</span><a href="#" class="toplinksites">PromiseAuto.com</a></span></p>
</div>
<div id="topbar"></div>
<div id="toptext">Top Name Brand Products @ 60%-100% Off!</div>
<div id="yourcart">Your Cart</div>
<div id="qtyproductback"></div>
<div id="producttitleback"></div>
<div id="shippingback"></div>
<div id="priceback"></div>
<div id="totalback"></div>
<div id="qty">Qty.</div>
<div id="shipping">Shipping</div>
<div id="productdescription">Product Description</div>
<div id="price">Price</div>
<div id="total">Total</div>
<div id="item"></div>
<div id="retailprice">{GIFT_MARKET_PRICE} Retail Price</div>
<div id="ourprice">Our Price<br />
<span class="ourpricepercent">60%-100% Off Retail</span></div>
<div id="cartproduct">{GIFT}</div>
<div id="radiobutton"><input name="" type="radio" value="" /></div>
<div id="free">FREE</div>
<div id="itemnumber">1</div>
<div id="freedivide"></div>
<div id="fedexback"></div>
<div id="fedex"></div>
<div id="checkback"></div>
<div id="foryourarea">Check if discount is availabe for your area.</div>
<div id="profilevectorsmartobject"></div>
<div id="acceptedpayments">Accepted Payments</div>
<div id="profilesecurityback"></div>
<div id="enteryourzipcode">ENTER YOUR ZIP CODE</div>
<div id="willbesecure">Your experience on the FYW Store will be secure.</div>
<div id="paymentline"></div>
<div id="paymenttypes"></div>
<div id="zipcodefield">
<label>
<input type="text" name="email" id="textarea" value="" size="18" class="zipcodefieldform" />
</label>
</div>
<div id="checkbackbutton">

<!--<input name="button" type="image" id="button" value="Submit" src="profileimages/layer21.gif" />
<input name="gift" value="26834" type="hidden" />-->
<img src="profileimages/layer21.gif" alt="" border="0" onclick="document.getElementById('moreinfo').style.display = 'block';" /></div>
<div id="profilereadmoreaboutit"><a href="#" class="profilereadmoreaboutitlink">Read More About It</a></div>
<div id="profileshadow"></div>
<div id="lowerbar"></div>
<div id="lowerarrow"></div>
<div>
<script type="text/javascript"><!--
document.write("<div style='display:none' id='moreinfo'>");
//-->
</script>
<div id="congratulationsback"></div>
<div id="congratulations">Congratulations, This Special Price Discount Is Available For Your Area!</div>
<div id="shippinginformation">Please Complete Your Billing Information </div>
<div id="profileproductback"></div>
<div id="formback"></div>
<div id="form">
<TABLE BORDER=0 CELLPADDING=2 CELLSPACING=6 WIDTH="350" id="formtable">
<TR>
<TD width="113" ALIGN="right">Email:</TD>
<TD width="223" ALIGN="left">{C_EMAIL}</TD>
</TR>

<TR>
<TD ALIGN="right">Title:</TD>
<TD ALIGN="left">{C_TITLE}</TD>
</TR>
<TR>
<TD ALIGN="right">First name:</TD>
<TD ALIGN="left">{C_FNAME}</TD>
</TR>
<TR>
<TD ALIGN="right">Last name:</TD>
<TD ALIGN="left">{C_LNAME}</TD>
</TR>
<TR>
<TD ALIGN="right">Street Address:</TD>
<TD ALIGN="left">{C_STREET}</TD>
</TR>
<TR>
<TD ALIGN="right">City:</TD>
<TD ALIGN="left">{C_CITY}</TD>
<TR>
<TR>
<TD ALIGN="right">State/Province</TD>
<TD ALIGN="left">{C_STATE}</TD>
</TR>
<TR>
<TD ALIGN="right">Country</TD>
<TD ALIGN="left">{C_COUNTRY}</TD>
</TR>
<TR>
<TD ALIGN="right">Zip/Postal Code:</TD>
<TD ALIGN="left">{C_ZIP}</TD>
</TR>
<TR>
<TD ALIGN="right">Phone Number:</TD>
<TD ALIGN="left">{C_PHONE}</TD>
</TR>
<TR>
<TD ALIGN="right">Date of Birth:</TD>
<TD><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD ALIGN="left">{C_BD_M} {C_BD_D} {C_BD_Y}</TD>
</TR>
</TABLE></TD>
</TR>
<TR>
<TD ALIGN="right">Optional Offer:</TD>
<TD ALIGN="left">{PCG_5381}</TD>
</TR>
</TABLE>
</div>
<div id="profileproductimage">{GIFT_IMAGE}</div>
<div id="cartproductcopy">{GIFT}</div>
<div id="checkoutbuttonback">
<input name="button" type="image" id="button" value="Click Here to Submit When Finished" src="profileimages/layer6.gif" />
</div>
<div id="securelock"></div>
<script type="text/javascript"><!--
document.write("</div>");
//--></script>
</div><div id="copyright">
<p>[Site to be Used] Gift Program is not endorsed, sponsored by or affiliated with [Gift Selector] or [COMPANY], or any other merchants listed above. Such terms are registered trademarks of their respective owners.</p>

<p>This promotion is conducted exclusively by f-r-e-e-free and is not affiliated with, sponsored by or endorsed by any of the listed products or retailers. Trademarks, service marks, logos, and/or domain names (including, without limitation, the individual names of products and retailers) are the property of their respective owners.</p>
<p>This promotion is conducted exclusively by f-r-e-e-free. By continuing, I have read and agree to f-r-e-e-free's <A HREF="/info.htm?tp=privacy&promo_name=dynamicgift&catalog_id=9522&gift=26834" TARGET="_blank" onClick="window.open('/info.htm?tp=privacy&promo_name=dynamicgift&catalog_id=9522&gift=26834','_blank','resizable=yes ,scrollbars=yes,toolbar=no,menubar=yes,width=550,height=450');return false;make_x_win=0;">Privacy Policy</a> and <A HREF="/info.htm?tp=tos&promo_name=dynamicgift&gift=26834&catalog_id=9522" TARGET="_blank" onClick="window.open('/info.htm?tp=tos&promo_name=dynamicgift&gift=26834&catalog_id=9522','_blank','resizable=yes,scrollbars=yes,toolbar=no,menubar=yes,width=550,height=400' );return false;make_x_win=0;">>Terms and Conditions</a>. To obtain the gift for this promotion you must: 1) register with valid information including e-mail address, shipping address, and phone number; 2) complete the survey; 3) complete at least 2 <a href='http://i.pcp001.com/media/ic3_page_silver.html' target='_blank' onClick='window.open("http://i.pcp001.com/media/ic3_page_silver.html", "_blank", "resizable=no,scrollbars=yes,toolbar=no,menubar=no,width=765,height=1673");return false;'>Silver</a>, 2 <a href='http://i.pcp001.com/media/ic3_page_gold.html' target='_blank' onClick='window.open("http://i.pcp001.com/media/ic3_page_gold.html", "_blank", "resizable=no,scrollbars=yes,toolbar=no,menubar=no,width=765,height=1686");return false;'>Gold</a> and 2 <a href='http://i.pcp001.com/media/ic3_page_plat.html' target='_blank' onClick='window.open("http://i.pcp001.com/media/ic3_page_plat.html", "_blank", "resizable=no,scrollbars=yes,toolbar=no,menubar=no,width=765,height=1691");return false;'>Platinum</a> Sponsor Offers (offer availability will vary); 4) be a US resident 18 or older; 5) not cancel your participation in more than a total of 2 Sponsor Offers within 30 days of the Sponsor Offer Initial Transaction Date (the Cancellation Limitation). You can receive the gift at no cost by completing free trial Sponsor Offers and/or by following the Refer-A-Friend program requirements; otherwise some Sponsor Offers may require a purchase to qualify. Upon completion of all Program Requirements, your gift will be shipped to the shipping address you provided. Limit one gift per household per year. Void where prohibited.</p>
<p class="copyrighttext"><a href="/redeem.htm?promo_name=dynamicgift&amp;catalog_id=9522&amp;gift=26834" target="_blank" class="copyrightlinks">Check Gift Status</a> - <A HREF="/info.htm?tp=faq&promo_name=dynamicgift&catalog_id=9522&gift=26834" TARGET="_blank" onClick="window.open('/info.htm?tp=faq&promo_name=dynamicgift&catalog_id=9522&gift=26834','_blank','resizable=yes,scrollbars=yes,toolbar=no,menubar=yes,width=550,height=400');ret urn false;make_x_win=0;" class="copyrightlinks">Help</a> - <A HREF="/info.htm?tp=privacy&promo_name=dynamicgift&catalog_id=9522&gift=26834" TARGET="_blank" onClick="window.open('/info.htm?tp=privacy&promo_name=dynamicgift&catalog_id=9522&gift=26834','_blank','resizable=yes ,scrollbars=yes,toolbar=no,menubar=yes,width=550,height=450');return false;make_x_win=0;" class="copyrightlinks">Privacy Policy</a> - <A HREF="/info.htm?tp=tos&promo_name=dynamicgift&catalog_id=9522&gift=26834" TARGET="_blank" onClick="window.open('/info.htm?tp=tos&promo_name=dynamicgift&catalog_id=9522&gift=26834','_blank','resizable=yes,scrollbars=yes,toolbar=no,menubar=yes,width=550,height=400');ret urn false;make_x_win=0;" class="copyrightlinks">Terms &amp; Conditions</a> - <A HREF="/suppress.htm?user_ref_id=&promo_name=dynamicgift&catalog_id=9522&gift=26834" TARGET="_blank" onClick="window.open('/suppress.htm?user_ref_id=&promo_name=dynamicgift&catalog_id=9522&gift=26834','_blank','resizable=yes,scrollbars=yes,toolbar=no,menubar=yes,width=550,height=400');ret urn false;make_x_win=0;" class="copyrightlinks">Unsubscribe</a> - <A HREF="/info.htm?tp=con&promo_name=dynamicgift&catalog_id=9522&gift=26834" TARGET="_blank" onClick="window.open('/info.htm?tp=con&promo_name=dynamicgift&catalog_id=9522&gift=26834','_blank','resizable=yes,scrollbars=yes,toolbar=no,menubar=yes,width=550,height=400');ret urn false;make_x_win=0;" class="copyrightlinks">Contact Us</a><br />
Copyright 2010 F-r-e-e-free. All rights reserved.</p>
</div>
</div>
</form>
</body>
</html>

invasion
11-09-2010, 03:27 PM
I also tried to do margin-tops and padding but luck

If anyone can help, it would be greatly appreciated

Thanks:thumbsup:

teedoff
11-09-2010, 03:42 PM
Im confused. You want the form hidden until someone checks a box? And until its checked, you not only want the form hidden, but want the space the form occupies to collapse as well? Is this correct?

invasion
11-09-2010, 03:49 PM
yes, I would like the form hidden (collapsed) until someone checks the (id) checkbackbutton (which I was able to do) but expand after the click on the checkbutton.

At the present time the form is hidden but there is a huge white space area between

<div id="lowerbar"></div>
<div id="lowerarrow"></div>

and

<div id="copyright"> when the form is hidden

Thanks for your help

teedoff
11-09-2010, 04:00 PM
yes, I would like the form hidden (collapsed) until someone checks the (id) checkbackbutton (which I was able to do) but expand after the click on the checkbutton.

At the present time the form is hidden but there is a huge white space area between

<div id="lowerbar"></div>
<div id="lowerarrow"></div>

and

<div id="copyright"> when the form is hidden

Thanks for your help

I would think the empty white space is there because you gave your div a set width and height.

I dont know if this helps, but on my page I created a div with 0 widths and heights and then set the hover attribute with a 100x100 width and height when the div was hovered over.

Im sure you could do the same thing with a snippet of javascript using the onclick...or at least something similar.

I'm not that good with javascript, but plenty of ppl here are.

invasion
11-09-2010, 04:08 PM
thanks for your help

Is it possible to show me where in my code that your refering to or add the code in if possible as the div around it doesn't have a set height and width

I just want to make sure I am doing it right

Thanks again

teedoff
11-09-2010, 04:10 PM
Do you have a link to your page?

teedoff
11-09-2010, 04:15 PM
Here try the second code here (http://www.rgagnon.com/jsdetails/js-0086.html).

invasion
11-09-2010, 04:18 PM
here also is the link

http://www.kitesinthesky.com/profile/

invasion
11-09-2010, 04:21 PM
thanks - checking it out now

invasion
11-09-2010, 04:32 PM
Thank you for your help but it was unable to work

teedoff
11-09-2010, 05:06 PM
Thank you for your help but it was unable to work

It should work...not as is, but its the same principle you were wanting. The onclick uses the show/hide attribute and completely collapses the area the form would normally occupy. You have to rework the code for your page and formnames and such.

invasion
11-09-2010, 06:03 PM
I placed the script in the header as well as the body, put the id tag on the div as well as creating a div and place the onclick on the button but was not successful.

Is it possible to send me the code you had worked on and I will try it on my end?

Thanks again

teedoff
11-09-2010, 06:08 PM
I placed the script in the header as well as the body, put the id tag on the div as well as creating a div and place the onclick on the button but was not successful.

Is it possible to send me the code you had worked on and I will try it on my end?

Thanks again

I didnt write that code. The link I gave you was a simple google search for javascript to hide a form onclick.

Again, you can copy that code snippet and play with it to get it to work for your needs.

If you cant get it to work, post it in the javascript forum and they can help you much more than I can. Sorry I'm not more help.

invasion
11-10-2010, 04:19 PM
ok - but can anything be done with that area in css to reduce the space below the check button and where the form is

If I take it out then the space is still there

Thanks

teedoff
11-10-2010, 04:27 PM
Ok well then post a link to your newly coded site....or provide the new markup and css.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum