table and layout

ChristopherJCrandall · February 21, 2015

Hello I've been developing a unique way to make my menus and sites using a single PHP file over the last few years. the layout itself uses several tables, the main table that is a single column by 3 rows. the middle row is then embedded with a second table of 3 columns and 1 row and the mid column/cell has the menu followed by a single cell table that has a stack over flow so that if there is more data in the cell then there is vertical space a scroll bar appears. Here lays the problem though with all the different devices and with screens that have the horizontal and vertical accesses switched the ration is now off set and the site doesn't look correct on the screens like this (there is a lot of blank space at the bottom of the screen). to check out a working site you can go to http://paradisealleywrestling.com

here is the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<meta name="description" content="Paradise Alley Wrestling School" >
<meta name="keywords" content="wrestling schools, wrestling, wrestling schools ct, wrestling schools east haven, wrestling schools east haven ct, wrestling schools connecticut, wrestling schools east haven connecticut, mario mancini, dave paradise, pretty paul roma, paul roma, wwf wrestlers, wrestlers, become a wrestler, become a pro wrestler, become a professional wrestler, how to become a wrestler, how to become a pro wrestler, how to become a professional wrestler, best wrestling schools" >
        

<meta name="description" content="So you want to be a Pro Wrestler??? Well you've come to the right place. At Paradise Valley Wrestling School. you'll learn from the Pros the art of Pro Wrestling. They will train you in Agility, Ring Awareness, High Flying Skils and Ring Psychology. So give us a call at (203)410-5152 and see just who you can pin down." > 

<title>Paradise Alley Wrestling School</title>
<LINK REL="SHORTCUT ICON" HREF="images/logo.ico">


<!-- this is the CSS script for the menu -->
<style type="text/css" media="screen">
#maymenu {margin: 0; padding: 0; }
#mymenu li {margin: 0; padding: 0;
list-style: none; float: left; }
#mymenu li a { display: none; margin: 0 0px 0 0; padding: 0px 0px; width: 80px; background: url(images/buttons/back.png); color: none; text-align: center; }
#mymenu li a:hover { background: url(images/buttons/back.png)}
#mymenu ul { position: absolute; visibility: hidden; margin: 0; padding: 0; background: url(images/buttons/back.png); border: 0px solid #ffffff }
#mymenu ul a {position: relative; display: none; margin: 0; padding: 0px 0px; width: 80px; text-align: left; background: url(images/buttons/back.png); color: none; }
#mymenu ul a:hover {background: url(images/buttons/back.png); }

<!-- this is the css to turn the submit button into a link -->

.submit {
background: url(images/buttons/back.png);
margin: 0;
padding: 0;
border: none;
cursor: pointer;
font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
font-size: 13px;
line-height: 16px;
color: #FF5F55;button {
overflow: visible;
width: auto;
}
}
</style>


<!-- this is the java script for the menu -->

<script type="text/javascript">

//Variables for the Menu declaration
 var timer = 0;var item = 0;

//function for opening of submenu elements
function openelement(num){
	// checks whether there is an open submenu and makes it invisible 
	if(item) item.style.visibility = 'hidden';
	// shows choosen submenu element
	item = document.getElementById(num); item.style.visibility = 'visible'; }
	
// function for closing submenu element
function closeelelement(){
	// closes the submenu and loads the timer to 500 ms
		timer = window.setTimeout("if(item) item.style.visibility = 'hidden';", 500); } //this is the line of code that has the syntax error
	
	//function for keeping the menu open after 500 mstimer 
	function keepsubmenu(){ window.clearTimeout(timer);}
	
	// hides the visualized menu after clicking outside of it's area and expiring of the loaded
	timerdocument.onclick = closeelement;
	
	</script>

<!-- this is the CSS for the font -->
<style>
@font-face { font-family: GoodCityModern; src: url('fonts/GoodCityModern.otf'); } 
gothic {
font-family: GoodCityModern
}
</style>

</head>

<body bgcolor="lightblue" text="darkblue">

<script language="php">

session_start() ; //Starts the session so that the veriables can be read by the browser

if(isset($_SESSION['selection']))// sees if the veriable is active yet
	$page = $_SESSION['selection']; // reads session variables

else 
$_SESSION['selection'] = ("0");
$page = $_SESSION['selection']; // reads session variables


if(isset($_POST['selection']))// sees if the veriable is active yet
	$page = $_POST['selection']; // reads session variables
else {
$page = $_SESSION['selection'];
}

// this sets up the correct order for the page
topbar();
leftsidebar();
mainmenu($page);
mainpage($page);
rightsidebar();
bottombar();

//this loads the top bar
function topbar(){

</script>

<table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr height="65px">
        
<td background="images/backgrounds/homepage/topbar.jpg" width="100%" height="33" >
<center>
<img src="images/Logo.png" width="206" height="89">
</font></center>
</td>

</tr>


<script language="php">
	
}

//this loads the left side bar
function leftsidebar() {
	
	</script>
    
    <tr height="250">
<td>

<table width="100%" border="0" bordercolor="#FFDF00" cellpadding="0" cellspacing="0">
<tr>

<td background="images/backgrounds/homepage/sidebars.jpg" width="13%">
<br /><br /><br />
<p><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/pages/Paradise-Alley-Wrestling-School/1193063250762362&width=180&colorscheme=light&show_faces=true&border_color&stream=true&header=true&height=400" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:180px; height:400px;" allowTransparency="true"></iframe></p>
</td>

<script language="php">
}

//this section loads the menu
function mainmenu($page){

if ($page=="0"){

</script>
<!-- -->
<td width="74%" style="word-wrap:break-word;">
<center>


<table width="100%" height="40px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>

<img src="images/buttons/h_left.gif" />

</td>

<td>
<center>
<!-- home button -->
<form id="form1" name="form1" method="post" action="index.php">
        <input name="selection" type="hidden" id="selection" value="0" />
       <button type="submit" class="submit">
<img src="images/buttons/homecl.gif" border="0" onMouseOver="src='images/buttons/homeho.gif'" onMouseOut="src='images/buttons/homecl.gif'" width="81" /> 
</button>
        
        </form>
</td>

<td>
<center>
<!-- pics button -->
<form id="form1" name="form1" method="post" action="index.php">
        <input name="selection" type="hidden" id="selection" value="1" />
       <button type="submit" class="submit">
<img src="images/buttons/picsuc.gif" border="0" onmouseover="src='images/buttons/picsho.gif'" onMouseOut="src='images/buttons/picsuc.gif'" width="81"/> 
</button>
        
        </form> 
        
</td>

<td>
<center>
<!-- video button -->

<form id="form1" name="form1" method="post" action="index.php">
        <input name="selection" type="hidden" id="selection" value="2" />
       <button type="submit" class="submit">
<img src="images/buttons/vidsuc.gif" border="0" onMouseOver="src='images/buttons/vidsho.gif'" onMouseOut="src='images/buttons/vidsuc.gif'" width="81"/> 
</button>
        
        </form>
        
</td>

<td>
<center>
<!-- trainers button -->

<form id="form1" name="form1" method="post" action="index.php">
        <input name="selection" type="hidden" id="selection" value="3" />
       <button type="submit" class="submit">
<img src="images/buttons/trainersuc.gif" border="0" onMouseOver="src='images/buttons/trainersho.gif'" onMouseOut="src='images/buttons/trainersuc.gif'" width="81"/> 
</button>

</form>

</td>

<td>
<center>
<!-- hours button -->

<form id="form1" name="form1" method="post" action="index.php">
        <input name="selection" type="hidden" id="selection" value="4" />
       <button type="submit" class="submit">
<img src="images/buttons/hoursuc.gif" border="0" onMouseOver="src='images/buttons/hoursho.gif'" onMouseOut="src='images/buttons/hoursuc.gif'" width="81"/> 
</button>
        
        </form>

</td>

<td>
<center>
<!-- about us button -->

<form id="form1" name="form1" method="post" action="index.php">
        <input name="selection" type="hidden" id="selection" value="5" />
       <button type="submit" class="submit">
<img src="images/buttons/auuc.gif" border="0" onMouseOver="src='images/buttons/auho.gif'" onMouseOut="src='images/buttons/auuc.gif'" width="81"/> 
</button>
        
        </form>

</td>

<td>
<center>
<!-- contact us button -->

<form id="form1" name="form1" method="post" action="index.php">
        <input name="selection" type="hidden" id="selection" value="6" />
       <button type="submit" class="submit">
<img src="images/buttons/cuuc.gif" border="0" onMouseOver="src='images/buttons/cuho.gif'" onMouseOut="src='images/buttons/cuuc.gif'" width="81"/> 
</button>
        
        </form>

</td>

<td>
<img src="images/buttons/h_right.gif" align="right" />

</td>

</tr>
</table>


<table width=100% border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/buttons/TechnoBlackLj4.gif" />
</td>
<td>
<img src="images/buttons/TechnoBlackLj4.gif" align="right" />
</td>
</tr>
</table>
</center>

<script language="php">
}

I cut out the rest of the menu because it just repeats making slight adjustments for the option that has been made

// this loads the main page
function mainpage($page){
	
</script>

<div style="height: 415px; overflow:auto;">
<center>

<script language="php">

if ($page=="0"){
	homepage();
}

if ($page=="1"){
	pics();
}


if ($page=="2"){
	videos();
}

if ($page=="3"){
	trainers();
}

if ($page=="4"){
	hours();
}

if ($page=="5"){
	aboutus();
}

if ($page=="6"){
	contactus();
}

</script>
</center>
</div>
</td>


<script language="php">
}

this is the main page where the scroll bar is located. This cell I would like to make 74% of the vertical screen where the top and bottom are 13% each. I have tried to do this using the height attribute in every table row and column as well as the cells themselves and it doesn't work. and when I try to do it with the stack overflow it's even more out of proportion is there any way to fix this?

//this loads the right side bar
function rightsidebar(){
	
</script>

<td background="images/backgrounds/homepage/sidebars.jpg" width="13%">
<br /><br /><br />
<p><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/pages/Paradise-Alley-Wrestling-School/1193063250762362&width=180&colorscheme=light&show_faces=true&border_color&stream=true&header=true&height=400" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:180px; height:400px;" allowTransparency="true"></iframe></p>
</td>
</tr>
</table>


</td>
</tr>

<script language="php">	
}


// loads the bottom bar
function bottombar(){	
</script>

<tr>
<td>
<center>
Paradise Alley Wrestling(c) (203)410-5152
<br />
662 Coe Ave East Haven Ct. 06512
<br />
<a href="http://www.000webhost.com/" target="_blank"><img src="http://www.000webhost.com/images/80x15_powered.gif" alt="Web Hosting" width="80" height="15" border="0" /></a>
</td>
</tr>
</table>

<script language="php">
}

//this is the home page
function homepage(){
// print ("Sorry the Home page is under construction");	

</script>
<h2>
<br />
So you want to be a Pro Wrestler???
<br /><br />
Well you've come to the right place.
<br /><br />
At Paradise Alley Wrestling School. you'll learn from the Pros the art of Pro Wrestling. They will train you in Agility, Ring Awareness, High Flying Skils and Ring Psychology.
<br /><br />
So give us a call at (203)410-5152 and see just who you can pin down.
<script language="php">
}

//this is the pics page
function pics(){
print ("Sorry the Pics page is under construction");	
}

//this is the videos page
function videos(){
print ("Sorry the Videos page is under construction");	
}

//this is the trainers page
function trainers(){
//print ("Sorry the Trainers page is under construction");	

</script>

<table width="100%">

<tr>

<td width="33%">
<img src="images/trainers/mariomancini.png" width="200" height="150" />
</td>

<td width="33%">
<Center>
<img src="images/trainers/daveparadise.png" width="200" height="150" />
</Center>
</td>

<td width="33%" align="right">
<img src="images/trainers/prettypaulroma.png" width="200" height="150" />
</td>

</tr>

<tr>

<td width="33%">
</h1>
<h4>
Mario Mancini:
<br /><br />
Mario Mancini became a professional wrestler about six weeks after his eighteenth birthday and was the youngest wrestler in the WWF in 1984.
<br /><br />
On July 31, 1984 Mario Mancini debuted, his professional wrestling career, against Greg "The Hammer" Valentine, and later on wrestled Tony Atlas in Madison Square Garden.
<br /><br />
Mario Mancini's favorite move is The Flying Clothesline, and his finishing moves were the Reverse Flying Body Press and the Pile Driver.
</h4>
</td>

<td width="33%" valign="top">
</h1>
<h4>
Dave Paradise:
<br /><br />
Dave Paradise debuted, his professional career with the WWF on August 23, 1988 in a tag team match with Davis Isley against Ax and Smash.
</h4>

</td>

<td width="33%" valign="top">
</h1>
<h4>
Pretty Paul Roma:
<br /><br />
Pretty Paul Roma debuted, his professional wrestling career on December 17, 1984, at an all American taping in Poughkeepsie, NY. Where he was teamed with Salvatore Bellomo in a match against WWF Tag-Team Champions Adrian Adonis and Dick Murdoch.
</h4>
</td>
</tr>
</table>
<script language="php">
}

//this is the hours page
function hours(){
//print ("Sorry the Hours page is under construction");
</script>
<h1>
<center>
Class Schedule
</center>
</center>
</h1>
<br />
<h3>
Tuesday: 6:00 PM to 8:30 PM
<br />
Thursday: 6:00 PM to 8:30 PM
<br />
Saturday: 9:30 AM to 1:00 PM
<br /><br />
<center>
Come on down to 662 Coe Ave East Haven Ct. 06512
<br />
We are located in the back building second door from the left.
</center>
<script language="php">	
}

//this is the about us page
function aboutus(){
//print ("Sorry the About Us page is under construction");

</script>
<h1> Why choose Paradise Alley Wrestling School over the others?</h1>
<br /><br />
</center>
<h3>
We Pride ourselves with three former profesional wresters with over 25 years of expertise, that have the skills and knowledge to hone your skills and make you the best Professional Wrestler possible.
<br /><br />
If you want to be successful in Professional Wrestling, Paradise Alley Wrestling School, gives it's students the best opportunity to make thier Dreams a reality by being dedicated to maintaining the Standards and Ideals of what it takes to become a Professional Wrestler.
<br /><br />
Paradise Alley Wrestling School will set the standard to what wrestling schools should teach and what lessons our students will walk away with.You will be taught the high flying skills along with the ring psychology to compete at a Professional level.  We are dedicated to maintaining the standards and ideals of what it takes to become a professional wrestler.
<br /><br />
When you graduate from Paradise Wrestling School, you are a well-rounded professional wrestler with the tools, ability and confidence to perform at a professional level
</h3>
<script language="php">	
}

//this is the contact us page
function contactus(){
//print ("Sorry the Contact Us page is under construction");

</script>

<center>
<h1>
Paradise Alley Wrestling School
<br />
 662 Coe Ave 
 <br />
 East Haven Ct. 06512 
</h1>
</center>
</center>
<br /><br />
<font color="#FF1F00">
Phone: (203)410-5152
<br />
e-Mail: <a href="mailto:paradisealleywrestling@paradisealleywrestling.com">paradisealleywrestling@paradisealleywrestling.com</a>
<br />
Facebook: <a href="Facebook.com/ParadiseAlleyWrestling">Facebook.com/ParadiseAlleyWrestling</a>
<br />
<br /><br />
<center>
<h3>
Come visit us and see what the Rings all about
<br />
662 Coe Ave 
<br />
East Haven Ct. 06512 
<br />
We are located in the back building second door from the left.
</h3>
</center>
</font>
<script language="php">	
}

</script>
</body>
</html>

Thank you for your time

Christopher J. Crandall

Sign In

table and layout

Recommended Posts

ChristopherJCrandall

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information