1 reply [Last post]
HoldOrFold
Offline
newbie
Last seen: 2 years 11 weeks ago
Joined: 2012-01-29
Posts: 1
Points: 2

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 code for the page in question (note the PHP include for the calculation program):

<!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>
</body>
</html>

And here's the CSS style sheet:

/********************************************
   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 again! Big smile

balajidesign
balajidesign's picture
Offline
Enthusiast
Last seen: 27 weeks 1 day ago
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

you are not mention that

you are not mention that footer and sidebar section in the result page. it is hiding your script. please go through your script.

Thanks,