Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sidebar and Footer Dissapear When Submitting Form

    Hi there,

    I'm building an astrology website which revolves around a php calculation program.

    I've used a CSS template for my website and have a question regarding an issue I'm having with using it in conjunction with my php calculation program.

    The page in question is here:

    http://www.realastrology.co.cc/astrology_scripts/midpointcalculator.php


    Everything fine until you submit the form and it generates a new page with the resulting data output. The sidebar and the footer both dissapear for some reason possibly because the page is too long, but I'm not sure why this should affect anything.

    Any help would be grately appreciated!

    Here's the html for the page in question (note the PHP include for the calculation program):

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Real Astrology</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="http://realastrology.co.cc/images/EliteCircle.css" type="text/css" />
    </head>
    <body>
    <div id="header">
      <div id="header-content">
        <h1 id="logo">Real<span class="orange">Astrology</span></h1>
        <h2 id="slogan">Your Home for Niche Astrology</h2>
        <div id="header-links">
          <p> <a href="http://www.realastrology.co.cc/">Home</a> | <a href="http://www.realastrology.co.cc/">Contact</a> | <a href="http://www.realastrology.co.cc/">Site Map</a> </p>
        </div>
        <ul>
          <li><a href="http://www.realastrology.co.cc/" id="current">Home</a></li>
          <li><a href="http://www.realastrology.co.cc/astrology_scripts/midpointcalculator.php">Midpoint Calculator</a></li>
          <li><a href="http://www.realastrology.co.cc/astrology_scripts/synastrycalculator.php">Synastry Midpoint Calculator</a></li>
          <li><a href="http://www.realastrology.co.cc/">About</a></li>
        </ul>
      </div>
    </div>
    <div id="content-wrap">
      <div id="content">
        <div id="main"> <a name="TemplateInfo"></a>
          <h1>Midpoint Calculation Tool</h1>
     
          <p><a href="http://www.realastrology.co.cc/"><img src="http://realastrology.co.cc/sample-image.jpg" width="174" height="140" alt="Jupiter"  class="float-left" /></a> Use this midpoint calculation tool by entering your birth data into the form below and submitting it. It will then calculate your midpoints and generate a page with natal planets, midpoints, aspects and interpretations.</p>
     
         

    <?php include('natal_form_wheel.php'); ?>

        </div>    
        <div id="sidebar">
          
          <h1>Menu</h1>
          <ul class="sidemenu">
            <li><a href="http://www.realastrology.co.cc/">Home</a></li>
                 </ul>
          <h1>Astrology Tools</h1>
          <ul class="sidemenu">
            <li><a href="http://www.realastrology.co.cc/">Midpoint Calculator</a></li>
            <li><a href="http://www.realastrology.co.cc/">Synastry Midpoint Calculator</a></li>
            <li><a href="http://www.realastrology.co.cc/">Transits to Midpoints</a></li>

          </ul>
          <h1>Wise Words</h1>
          <p>&quot;No man becomes rich unless he enriches others.&quot;</p>
          <p class="align-right">- Andrew Carnegie</p>
          <h1>Support Styleshout</h1>
          <p>If you are interested in supporting my work and would like to contribute, you are welcome to make a small donation through the <a href="http://www.styleshout.com/">donate link</a> on my website - it will be a great help and will surely be appreciated.</p>
        </div>
      </div>
    </div>
    <div id="footer">
      <div id="footer-content">

        <div class="col2 float-right">
          <p> &copy; copyright 2012 <strong>RealAstrology.co.cc</strong><br />
            Design by: <a href="http://www.styleshout.com/">styleshout</a> &nbsp; &nbsp; Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://validator.w3.org/check/referer">XHTML</a> </p>
        </div>
        
      </div>
    </div>


    <!-- Start of StatCounter Code for Default Guide -->
    <script type="text/javascript">
    var sc_project=7616896; 
    var sc_invisible=1; 
    var sc_security="fdac59ab"; 
    </script>
    <script type="text/javascript"
    src="http://www.statcounter.com/counter/counter.js"></script>
    <noscript><div class="statcounter"><a title="tumblr site
    counter" href="http://statcounter.com/tumblr/"
    target="_blank"><img class="statcounter"
    src="http://c.statcounter.com/7616896/0/fdac59ab/1/"
    alt="tumblr site counter"></a></div></noscript>
    <!-- End of StatCounter Code for Default Guide -->


    </body>
    </html>
    And here's the CSS Style Sheet:

    Code:
    /********************************************
       AUTHOR:  			Erwin Aligam 
       WEBSITE:   			<a href="http://www.styleshout.com/
    " rel="nofollow">http://www.styleshout.com/
    </a>	TEMPLATE NAME: 	EliteCircle
       TEMPLATE CODE: 	S-0012
       VERSION:          1.0	          	
     *******************************************/ 
     
    /********************************************
       HTML ELEMENTS
    ********************************************/ 
     
    /* top elements */
    * { 
    	padding: 0; margin: 0;
    }
    body {
    	margin: 0; 	padding: 0;
    	font: normal .70em/1.6em Verdana, 'Trebuchet MS', Tahoma, sans-serif;
    	color: #666666;
    	text-align: center;
    	background: #180700;
    }
     
    /* links */
    a {
    	color:#CB4721; 
    	background-color: inherit;
    	text-decoration: none;	
    }
    a:hover {
    	background-color: inherit;
    	text-decoration: underline;
    }
     
    /* headers */
    h1, h2, h3 {
    	font: normal 1.8em Georgia, "Times New Roman", Times, serif;
    	color:#222;
    	letter-spacing:-1px;
    }
    h1 { font-size: 1.7em; } 
    h2 { font-size: 1.5em; color:#74743D; }
    h3 { font-size: 1.5em; color:#C34E23; font-weight: normal; letter-spacing: 0px;}
     
    #main h1 { 
    	font: normal 1.8em Georgia, "Times New Roman", Times, serif;
    	color: #222; 	
    	padding: 0 0 5px 0;
    	margin: 0 15px 15px 15px;
    	letter-spacing:-1px;
    	background:url(../images/bk_dotted.gif) bottom left repeat-x;
    }
    #sidebar h1 {
    	font: normal 1.7em Georgia, "Times New Roman", Times, serif;
    	/* color: #74743D; */ 	
    	color: #6C6E3A;
    	padding: 0;
    	margin: 0 0 10px 5px;	
    	letter-spacing:-1px;	
    }
     
    p, h1, h2, h3 {
    	margin: 10px 15px;
    	padding: 0;
    }
     
    ul, ol {
    	margin: 10px 30px;
    	padding: 0 15px;	
    }
     
    /* images */
    img {
    	border: 1px solid #DADADA;
    	padding: 5px;	
    }
    img.no-border {
    	border: none;
    }
    img.float-right {
      margin: 5px 0px 5px 15px;  
    }
    img.float-left {
      margin: 5px 15px 5px 0px;
    }
     
    code {
      margin: 5px 0;
      padding: 10px;
      text-align: left;
      display: block;
      overflow: auto;  
      font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
      /* white-space: pre; */   
      background: #FCFCF9;
      border: 1px solid #EFEFEF;
    }
    acronym {
      cursor: help;
      border-bottom: 1px solid #777;
    }
    blockquote {
    	margin: 15px;
     	padding: 0 0 0 30px;  	
      	font: bold 1.3em/1.5em 'Trebuchet MS', Sans-serif;   
    	background: #FCFCF9;
       border: 1px solid #EFEFEF;
    	color: #6C6E3A;
    }
     
    /* form elements */
    form {
    	margin: 15px;
    	padding: 0;
    	border: 1px solid #EFEFEF; 
    	background: #F8F8F8;	
    }
    label {
    	display:block;
    	font-weight:bold;
    	margin:5px 0;
    }
    input {
    	padding: 2px;
    	border: 1px solid #EFEFEF;
    	font: normal 1em Verdana, 'Trebuchet MS', Tahoma, sans-serif;	
    	color: #666666;
    }
    textarea {
    	width: 280px;
    	padding:2px;
    	border: 1px solid #EFEFEF;
    	font: normal 1em Verdana, 'Trebuchet MS', Tahoma, sans-serif;
    	height:100px;
    	display:block;		
    	color: #666666;
    }
    input.button { 
    	margin: 0; 
    	font: bold 1em Arial, Sans-serif; 
    	border: 1px solid #EFEFEF;
    	padding: 2px 3px; 	
    	background: #F1F0E4;
    }
     
    /* search form */
    .searchform {
    	background-color: transparent;
    	border: none;	
    	margin: 0; padding: 5px 0 15px 0;	
    	width: 190px;	
    }
    .searchform p { margin: 0; padding: 0; }
    .searchform input.textbox { 
    	width: 120px;
    	color: #333; 
    	height: 18px;
    	padding: 2px;	
    	vertical-align: top;
    }
    .searchform input.button { 
    	font: bold 12px Arial, Sans-serif; 
    	color: #333;	
    	width: 60px;
    	height: 26px;
    	border: none;
    	padding: 3px 5px;	
    	vertical-align: top;
    }
     
    /***********************
    	  LAYOUT
    ************************/
     
    #header-content, #footer-content, #content {
    	width: 810px;	
    }
     
    /* header */
    #header {
    	background: #FFF url(headerbg.jpg) repeat-x 0 0;
    	height: 160px;
    	text-align: left;	
    }
    #header-content {
    	position: relative;
    	margin: 0 auto; padding: 0;
    }
    #header-content #logo {
    	position: absolute;	
    	font: normal 40px/65px Georgia, "Times New Roman", Times, serif;
    	letter-spacing: -1px; 
    	color: #FFF;
    	background: #3F1204 url(logobg.jpg) repeat-x left top;
    	border: 1px solid #4E460F;
    	height: 65px;
    	padding: 0 10px;
    	margin: 0;
     
    	/* change the values of left and top to adjust the position of the logo */
    	top: 18px; left: 0px;
    }
    #header-content #slogan {
    	position: absolute;	
    	font: normal 12px 'Trebuchet MS', Tahoma, sans-serif;
    	letter-spacing: 0px;
    	/* color: #D4AA80; */
    	color: #BBB;	 
    	margin: 0; padding: 0;
     
    	/* change the values of left and top to adjust the position of the slogan */
    	top: 88px; left: 30px;
    }
     
    /* header menu */
    #header-content ul {
    	position: absolute;
    	right: 0px; top: 125px; 
    	font: bold 12px Georgia, "Times New Roman", Times, serif;
    	list-style: none;
    	margin: 0; padding: 0;		
    	text-transform: uppercase;		
    }
    #header-content li {
    	display: inline;
    }
    #header-content li a {
    	float: left;
    	display: block;
    	padding: 0px 18px 7px 18px;	
    	color: #F3A251; 
    	/* color: #C8935D; */
    	text-decoration: none;
    }
    #header-content li a:hover {
    	color: #F88F26;
    }
    #header-content li a#current  {	
    	color: #FFF;	
    }
     
    #header #header-links {
    	position: absolute;
    	top: 0px; right: 0px;	
    	color: #8E5F2F;
    	font-size: 90%;
    }
    #header #header-links a {	
    	color: #A4A4A4;
    	text-decoration: none;
    }
    #header #header-links a:hover {
    	color: #F3A251;
    }
     
    /* content */
    #content-wrap {
    	clear: both;
    	float: left;
    	width: 100%;
    	background: #FFF url(contentbg.jpg) repeat-y center top;	
    }
    #content {
    	text-align: left;	
    	padding: 0; margin: 30px auto;		
    }
     
    /* sidebar */
    #sidebar {
    	float: left;
    	width: 190px;
    	margin: 0 0 10px 0;
    	padding: 0;	
    }
    #sidebar ul.sidemenu {
    	margin: 5px 0 15px 0;
    	padding: 0;	
    	border-top: 1px dashed #E1E1E1;	
    }
    #sidebar ul.sidemenu li {
    	list-style: none;
    	border-bottom: 1px dashed #E1E1E1;
    }
    #sidebar ul.sidemenu a {
    	display: block;
    	color: #666666; 
    	text-decoration: none;
    	padding:.3em 0 .3em 10px;		
    	width: 94%;
    }
    #sidebar ul.sidemenu a:hover {
    	padding: .3em 0 .3em 10px;
    	color: #CB4721;
    	background: #FFF;	
    }
     
    /* main */
    #main {
    	margin: 0 19px 0 0; 
    	padding: 0;		
    	width: 590px;
    	float: left;	
    }
    #main p, #main h1, #main h2, #main h3, #main blockquote, #main form {
    	margin-left: 0;
    }
    #main form p {
    	margin: 15px;
    }
     
    /* footer */
    #footer {
    	clear: both;
    	margin: 0; padding: 25px 0;
    	font: normal .95em 'Trebuchet MS', Tahoma, sans-serif;
    	text-align: left;	
    	background: url(footerbg.jpg) repeat-x 0% 0%;
    	color: #CCC;
    }
    #footer p {
    	margin-left: 0;
    }
    #footer h2 {
    	font: bold 1.3em 'Trebuchet MS', Tahoma, sans-serif;
    	text-transform: uppercase;
    	letter-spacing: 0px;
    	color: #CC9933;
    	margin-left: 5px;
    }
    #footer-content {	
    	margin: 0 auto;		
    }
    #footer-content a{
    	color: #C8935D;
    }
    #footer-content a:hover {
    	color: #FFF;
    	text-decoration: none;
    }
    #footer-content ul {
    	list-style: none;
    	margin: 0; padding: 0;	
    	width: 98%;
    }
    #footer-content ul.columns li {
    	border-bottom: 1px dashed #272727;	
    }
    #footer-content ul.columns li.top {
    	border-top: 1px dashed #272727;	
    }
    #footer-content ul.columns li a {
    	display: block;
    	line-height: 2em;
    	font-weight: normal;
    	padding-left: 5px;
    	width: 98%;
    	color: #BDBDBD;
    }
    #footer-content ul.columns li a:hover {
    	background: #202020;
    	color: #FFF;
    	text-decoration: none;
    }
    #footer-content .col {
    	width: 270px;
    	padding: 0 0 30px 0;			
    }
    #footer-content .space-sep {
    	margin-right: 10px;
    }
    #footer-content .col2 {
    	width: 240px;
    	padding: 0 0 30px 0;	
    	display: inline;	
    }
     
    /* alignment classes */
    .float-left  { float: left; }
    .float-right { float: right; }
    .align-left  {	text-align: left; }
    .align-right {	text-align: right; }
     
    /* additional classes */
    .clear { clear: both; }
    .orange {
    	color: #F3A251;
    }
     
    .post-footer {
    	font-size: 95%;
    	border: 1px solid #EFEFEF; 
    	background: #F8F8F8; 
    	padding: 3px 10px;
    	margin: 20px 15px 10px 15px;	
    }
    .post-footer .date {
    	background: url('clock.gif') no-repeat left center; 
    	padding-left: 20px; margin: 0 10px 0 5px;	
    }
    .post-footer .comments {
    	background: url('comment.gif') no-repeat left center; 
    	padding-left: 20px; margin: 0 10px 0 5px;	
    }
    .post-footer .readmore {
    	background: url('page.gif') no-repeat left center;
    	padding-left: 20px; margin: 0 10px 0 5px;	
    }

    Thanks a lot in advance!

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    lol Well I couldnt get past your form validation errors! and each time I clicked submit, a new page opened. SO I just close 5 or 6 pages! Aggrevating form.

    But each new page that opened with the validation errors on it, had sidebars and footers.
    Teed

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    lol Well I couldnt get past your form validation errors! and each time I clicked submit, a new page opened. SO I just close 5 or 6 pages! Aggrevating form.

    But each new page that opened with the validation errors on it, had sidebars and footers.
    Really? Just have to enter your name, date of birth, time and say 1's in the longitude lattitude boxes.

    Yeah, the page that opens with the validation error does have sidebars and footers. The page you get after submiting a valid form gets rid of the sidebars and footers though, I assume because it's so long.

    Would love to know how to sort that out!

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Again, your form is too complicated! Most ppl dont have hours to try to get validated in filling out your form. If I select the wrong time zone, which one to select I have NO idea, then lat and long is wrong. Or vice- versa. So I cant get to the point to see your error.

    forgot to add image of form errors
    Attached Thumbnails Attached Thumbnails Sidebar and Footer Dissapear When Submitting Form-astro.jpg  
    Last edited by teedoff; 01-31-2012 at 12:16 AM.
    Teed

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok haha, just select the first timezone and enter 1's for the longitude and lattitude.

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    lol I've tried that and about 30 different choices. Imagine what common site visiters to your site go through if WE cant get your form to validate. Forms and form validation should make the experience EASIER for the user, not so hard they give up and close your site.

    I dont have time to mess with this anymore. If you can simplify your form validation code so we can recreated your issue then fine, otherwise not sure what to tell you.
    Teed

  • #7
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've changed it so you don't have to enter anything for now, just click submit and it will load a data page.

    Thanks for letting me know it's difficult for you though, gives me an insight into making it more user friendly in the future.

  • #8
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone know what's going on?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •