Jump to content

header, content, leftnav, rightnav, footer all poorly coded. Time to fix it up.

MasterACE14

By MasterACE14
in CSS Help

Recommended Posts

MasterACE14 Advanced Member

MasterACE14

Posted
Posted

Hello Everyone,

 

I am absolutely hopeless with CSS and I am making my website from scratch, and maybe should of used a CSS fluid layout template in the first place  :-\ , but it's too late for that now. I have done all the CSS myself, and it is really poor. Basically what I want to do, is keep it like my current layout, header, content, leftnav, rightnav and footer. But have it a fluid layout so it will automatically adjust its size for every person.

 

What I would like you professionals to do, is help me remove all of my unnecassary CSS that I don't even need, and replace and, and recode it so it becomes a fluid layout. I also need to make it so, the content part, can either be 1 section, or broken up into 2(thus making 2 columns, 4 in total if you include the leftnav and rightnav)

 

here is my code, and I appreciate any and all help you can provide!  :)

 

 

index.php

<?php
session_start();
ob_start();

/* Workout Script Execution Time */
//Create a variable for start time
$time_start = microtime(true);

/* page content now.... see end of file for rest of script */

////////////////////////////////////////////////////////////////////////////////

/* Connect to Database here */


/* Grab current pages complete URL including after the question mark */	
$QueryString="";
foreach ($_GET as $key => $value)
{ 
$value = urlencode(stripslashes($value));
if($QueryString!="")
$QueryString .="&";

$QueryString .= "$key=$value";
}

$pageName=basename($_SERVER['PHP_SELF'] );

$page =$pageName."?".$QueryString;
// echo $page; // will show the full page 
// echo $QueryString; // will show after ? 
// end of URL grab	

//////////////////////////////////////////////////////////

/* Workout where people are coming from */
/*$referrer = $_SERVER['HTTP_REFERER'];

if($referrer != "" && $referrer != $page && $referrer != "www.crikeygames.com.au/conflictingforces/"){
mysql_query("INSERT INTO `cf_referers` (url) VALUES ('$referrer') ");
} */
// end of Referer script

//////////////////////////////////////////////////////////

/* Workout Script Execution Time */
//Create a variable for start time
$time_start = microtime(true);

// page content now.... see end of file for rest of script 

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<?php

/* includes */  
include_once('variables.php'); // include variables
include_once '/home/ace/public_html/conflictingforces/functions.php'; // include functions
include_once '/home/ace/public_html/conflictingforces/weapons.php'; // include weapons
include_once '/home/ace/public_html/conflictingforces/armors.php'; // include armors
include_once '/home/ace/public_html/conflictingforces/vehicles.php'; // include vehicles

echo $meta;

?>
<style type="text/css">
<!--
/* set margins, padding, and inline-level alignment */
body,div { height:100%; max-height:100%; color:#FFFFFF; margin: 1px; padding: 0; background-color:#000000;font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 100%; /*cursor: url(http://myspace-html-layout.com/cursors/green_arrow.cur), default;*/}

/* XXXXXXXXXXXXXX table properties XXXXXXXXXXXXXXXXXX */

/* set table properties */
#encyclopedia table { border: 1px solid green; text-align: center }
#encyclopedia td { border: 1px solid lime; background: black }

/* set table width and margin */
#encyclopedia table { width: 500px ; caption-side: top;
            margin-bottom: 20px;  }

/* compute column widths regardless of cell content */
#encyclopedia table.fix { table-layout: fixed }

/* set table properties */
#inventory_items table { border: 1px solid green; }
#inventory_items td { border: 1px solid lime; background: black }

/* set table width and margin */
#inventory_items table { width: 100%; caption-side: top;
            margin-bottom: 20px;  }

/* compute column widths regardless of cell content */
#inventory_items table.fix { table-layout: fixed }

/* set table properties */
#progress table { border: 1px solid green; text-align: center }
#progress td { border: 1px solid lime; background: black }

/* set table width and margin */
#progress table { width: 500px; caption-side: top;
            margin-bottom: 20px;  }

/* compute column widths regardless of cell content */
#progress table.fix { table-layout: fixed }

/* set table properties */
#globalchat table { border: 1px solid green; text-align: center }
#globalchat td { border: 1px solid lime; background: black }

/* set table width and margin */
#globalchat table {  margin-bottom: 20px;  }

/* compute column widths regardless of cell content */
#globalchat table.fix { table-layout: fixed }

/* set table properties */
#attack table { border: 1px solid green; text-align: center }
#attack td { border: 1px solid lime; background: black }

/* set table width and margin */
#attack table { width: 87%; caption-side: top;
            margin-bottom: 20px;  }

/* compute column widths regardless of cell content */
#attack table.fix { table-layout: fixed }

/* set table properties */
#ability table { border: 1px solid lime; }
#ability  td { border-bottom: 1px solid green; background-color: black; }

/* set table width and margin */
#ability  table { width: 86%; margin-left: 1%; margin-right: 1%; background-color: black;  }

/* compute column widths regardless of cell content */
#ability  table.fix { table-layout: fixed }

/**********************************************************************/
/* set table properties for other pages */
/**********************************************************************/

/* set table properties */
table { border: 1px solid lime;  }
td { border-bottom: 1px solid green; }

/* set table width and margin */
table { width: 100%; background-color: black; }

/* compute column widths regardless of cell content */
table.fix { table-layout: fixed } 

/* XXXXXXXXXXXXXXXXX table properties XXXXXXXXXXXXXXXX */

/* drop down box properties */
select { border: 1px solid lime; color: white; text-align: center; background: black }
option { border: 1px solid green; color: white; text-align: center; background: black }

/* input properties */
input { font: 12px verdana;}
input { background-color:#000000;border-style:outset;
border-color:lime; color:white;cursor:hand;} 

/* fieldsets and legends properties */
fieldset { border:1px solid green }
legend {
  padding: 0.2em 0.5em;
  border:1px solid lime;
  color:white;
  font-size:90%;
  text-align:right;
  }

  /* XXXXXXXXXX leftnav buttons properties XXXXXXXX */
  /* set button menu position */
d1#menu { position: absolute; width: 150px; }

/* set general button styles */
dt.btn { margin-bottom: 2px; text-align: center; }
  
/* set general anchor styles - fill the container */
dt.btn a { display: block; text-decoration: none; color: white;/* font-weight: bold;*/ }

/* MouseOut state (default) */
dt.btn a { background: black; border: 3px outset green; }

/* MouseOver state (hover) */
dt.btn a:hover { background: black; border: 3px inset black; }

/* MouseDown state (active) */
dt.btn a:active { background: black; border: 3px inset navy; }  

/* Validation fix ups */
.img {
border: 0;
}  
  
/* set background image */
body {background-image:url(http://www.crikeygames.com.au/conflictingforces/images/CrickeyGames%20Wallpaper%20Plate%20Camo.jpg);}

/* spacing */
span  { word-spacing: 30px }

/* set widths and float nav & ads div content boxes */
#nav	{ float: left; width: 152px; }
#ads	{ float: right; width: 145px; }

/* set side txt margins 5px > nav & ads widths */
#txt	{ margin-left: 105px; margin-right: 105px }
#base { margin-left: 105px; margin-right: 105px; }
#home { margin-left: 105px; margin-right: 105px }
#encyclopedia { margin-left: 105px; margin-right: 105px }
#attack { margin-left: 105px; margin-right: 105px }
#ability { margin-left: 105px; margin-right: 105px }
#support { margin-left: 157px; margin-right: 150px }

/* set text aligns */
#hdr, #ads , #home, #progress, #ability { text-align: center }
#progress { text-align: center; margin:0px auto; width: 500px; }

/* ensure footer stays at the bottom */
#ftr	{ clear: both }

/* create 2 columns */
#leftcolumn { float: left; width: 41.75%; min-width: 41%; max-width: 100%; margin-left: 1.5%; }
#rightcolumn { float: right; width: 41.75%; min-width: 41%; max-width: 100%; margin-right: 1.5%; }

/* show boundaries and set image sizes - for clarity */
#hdr, #ftr, #nav, #ads	{ background-color:#1a1b16; border: groove #78AB46}
#home { background-color: #1a1b16; }
#base { background-color: transparent; }
#attack { background-color: #1a1b16; }
#ability{ background-color: #1a1b16; }
#support{ background-color: #1a1b16; }
#leftcolumn { background-color: transparent; }
#rightcolumn { background-color: transparent; }
#progress { background-color:transparent;}
#globalchat { background-color:transparent;}
#encyclopedia { background-color:transparent; }
#txt	{ background-color: #1a1b16; }
#hdr {width: 520px; height: 148px}
/* #hdr h1{display:none;margin:0; padding:0} */
/*#ads img		{ width: 120px; height: 500px	} */
/*#txt img		{ width: 150px; height: 200px	} */

/* set links properties */
a 		{ text-decoration: none; } /* remove underline */
a		{ color: white; } /* link color */
a:link 	{ color: white; }   /* history status */
a:visited 	{ color: white; } /* history status */
a:hover	{ color: yellow; } /* interactive */
a:active	{ color: navy; }  /* interactive */

/* content box's */
/* game time box*/
#gametime {  color: white; border-style: inset; border-color: green; text-align: center; background-color: black;}
/* who's online box */
#whosonline {  color: white; border-style: inset; border-color: green; text-align: center; background-color: black;}
/* player information box */
#playerinfo {  color: white; border-style: inset; border-color: green; background-color: black;}
/* registered players box */
#registeredplayers {  color: white; border-style: inset; border-color: green; text-align: center; background-color: black;}
/* banners & buttons */
#buttons {  background-color: transparent; text-align: center; }
/* anything - standard box */
#standard { color: white; border-style: inset; border-color: green; text-align: center; background-color: black; }

/* set left nav properties - links */
/* comment out for now
#nav a:link, a:visited	{background-color: #FFFF00; color:#000000; font-size:.95em; font-family: Arial, Helvetica, sans-serif}  
#nav	a:hover, a:active	{background-color: #FFFF00; color: #FFFF00; font-size:.95em; font-family: Arial, Helvetica, sans-serif} 
/*a:link, a:visited	{background-color: transparent; color:#FFFFFF; font-size:.95em; font-family: Arial, Helvetica, sans-serif}  */
/*a:hover, a:active	{background-color: transparent; color: #FFFFFF; font-size:.95em; font-family: Arial, Helvetica, sans-serif} */
ul.circle {/*margin: 5px; padding-left: 0;*/list-style-type: circle; }
*/
-->
</style>

<script type="text/javascript">

/***********************************************
* Bookmark site script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

/* Modified to support Opera */
function bookmarksite(title,url){
if (window.sidebar) // firefox
window.sidebar.addPanel(title, url, "");
else if(window.opera && window.print){ // opera
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click();
} 
else if(document.all)// ie
window.external.AddFavorite(url, title);
}
</script>

<script type="text/javascript">
// disable form once submitted

function Disab (val,formname) {

var formObj = document.getElementById(formname);

if(val=="1")
{formObj.submit.disabled=true}

if(val=="2")
{formObj.Button.disabled=true}

}

</script>

<title><?=$gamename?> - Massive Multiplayer Online Role Playing Game</title>
</head>
<body>
<?php
include_once('head.php');
?>
<?php
include_once('leftnav.php');
?>
<?php
include_once('rightnav.php');
?>

<?php
	switch ($_GET['page']) {
		default:
		case "home":
			require_once ("lib/home.php");
			break;
		case "progress":
			require_once ("lib/progress.php");
			break;
		case "support":
			require_once ("lib/support.php");
			break;
		case "encyclopedia":
			require_once ("lib/encyclopedia.php");
			break;
		case "encyclopedia_search":
			require_once ("lib/encyclopedia_search.php");
			break;
		case "base":
			require_once ("lib/base.php");
			break;
		case "login":
			require_once ("lib/login.php");
			break;
		case "logout":
			require_once ("lib/logout.php");
			break;
		case "register":
			require_once ("lib/register.php");
			break;
		case "register_result":
			require_once ("lib/register_result.php");
			break;
		case "inventory":
			require_once ("lib/inventory.php");
			break;
		case "armory":
			require_once ("lib/armory.php");
			break;
		case "armory_result":
			require_once ("lib/armory_result.php");
			break;
		case "attack":
			require_once ("lib/attack.php");
			break;
		case "player_interaction":
			require_once ("lib/player_interaction.php");
			break;
		case "player_interaction_you":
			require_once ("lib/player_interaction_you.php");
			break;
		case "player_interaction_result":
			require_once ("lib/player_interaction_result.php");
			break;
		case "community":
			require_once ("lib/community.php");
			break;
		case "ability":
			require_once ("lib/ability.php");
			break;
		case "ability_result":
			require_once ("lib/ability_result.php");
			break;
		case "debug":
			require_once ("lib/debug.php");
			break;
	}// end switch
?>


<?php
include_once('footer.php');

//Create a variable for end time
$time_end = microtime(true);
//Subtract the two times to get seconds
$time = abs($time_end) - abs($time_start);

echo '<center><font size="1" color="#888888">page took '.$time.' seconds to load</font></center>'; 

?>
</body>
</html>

 

Regards ACE

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.