Footer Alignment Trouble

HTML & CSS
1

I am having trouble centering my footer on a page. Not understanding it really do to the fact all of the pages have them same structure. Any help would be appreciated. The trouble is with the play page so i’ll provide a link below.

Game Junkie - Play Free Online Flash Games!

play.php:

<?php
include 'functions.php';
$id = $_GET['game'];		
$query = mysql_query("SELECT * FROM games WHERE id='".$id."'");
$game = mysql_fetch_array($query);		
if(mysql_num_rows($query) == 0){		
header('Location: /err/404.php');		
}
?>
<!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">
<head>
<title><?php echo $page_title; ?></title>
<meta name="description" content="Play games online for free. Action games, Adventure games, Arcade games, Puzzle games, Simulation games, Sports games and Strategy games.">
<meta name="keywords" content="Free, Flash, Games, Online, Action, Adventure, Arcade, Puzzle, Simulation, Sports, Strategy">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24101435-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>
<body>
<div id="page">
  <!-- Start:Page Banner -->
  <div id="top" onclick="window.location.href='/'" onmouseover="this.style.cursor='pointer'">
    <div class="back">&nbsp;</div>
    <div class="content">
      <p>Game Junkie</p>
    </div>
  </div>
  <!-- End:Page Banner -->
  <!-- Start:Bottom -->
  <div id="bottom">
    <div class="trans">&nbsp;</div>
    <div id="menu">
      <ul id="nav">
        <li><a href="category.php?value=action">Action</a></li>
        <li><a href="category.php?value=adventure">Adventure</a></li>
        <li><a href="category.php?value=arcade">Arcade</a></li>
        <li><a href="category.php?value=puzzle">Puzzle</a></li>
        <li><a href="category.php?value=simulation">Simulation</a></li>
        <li><a href="category.php?value=sports">Sports</a></li>
        <li><a href="category.php?value=strategy">Strategy</a></li>
        <li class="last"><a id="more_btn" onclick="$('#more_con').slideToggle(2000);">More</a></li>
      </ul>
    </div>
    <div id="more_con">Coming Soon</div>
    <div class="content">
      <!-- Start:Content -->
      <!-- Start:Ad -->
      <div class="ad_2">
        <table cellpadding="0" border="0" cellspacing="0" style="background-color:#900;height:90px;width:728px;">
          <tr>
            <td>Advertise Here</td>
          </tr>
        </table>
      </div>
      <!-- End:Ad -->
      <?php
		$total = $game['total_plays']+1;
		mysql_query("UPDATE games SET total_plays=$total WHERE id='".$id.".swf'");
		mysql_query("INSERT INTO plays VALUES ('', '".$game['id']."', '".time()."')");
		$info = getimagesize('file_database/'.$game['swf'].'');
		list($width, $height) = $info;
		$game = mysql_fetch_array(mysql_query("SELECT * FROM games WHERE id='".$id."'"));
		$today_query = mysql_query("SELECT COUNT(*) FROM plays WHERE game_id='".$id."' AND date >='". (time() - (86400)) ."'");
		$week_query = mysql_query("SELECT COUNT(*) FROM plays WHERE game_id='".$id."' AND date >='". (time() - (604800)) ."'");
		$today = mysql_fetch_row($today_query);
		$week = mysql_fetch_row($week_query);
		$name = $game['name'];
		$name = strtolower($name);
		$name = explode(" ", $name);
		$name = implode("-", $name);
		$name = ereg_replace('\\.', '', $name);
		?>
      <div id="game" style="width:<?php echo $width; ?>px;height:<?php echo $height; ?>px;">
        <OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="<?php echo $width; ?>" HEIGHT="<?php echo $height; ?>" CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=5,0,0,0">
          <PARAM NAME="MOVIE" VALUE="file_database/<?php echo $name; ?>.swf">
          <PARAM NAME="PLAY" VALUE="true">
          <PARAM NAME="LOOP" VALUE="true">
          <PARAM NAME="QUALITY" VALUE="high">
          <PARAM NAME="SCALE" value="noborder">
          <EMBED SRC="file_database/<?php echo $name; ?>.swf" WIDTH="<?php echo $width; ?>" HEIGHT="<?php echo $height; ?>" PLAY="true" LOOP="true" QUALITY="high" scale="noborder" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>
        </OBJECT>
      </div>
      <div id="info">
        <div id="header">Game Information</div>
        <div style="float:left;width:410px;text-align:left;">Description<br />
          <div style="font-size:11px;font-family:Verdana, Geneva, sans-serif;">&nbsp;&nbsp;&nbsp;&nbsp;
            <?php if(empty($game['description'])){ echo 'N/A'; } else { echo $game['description']; } ?>
          </div>
          <br />
          Instructions<br />
          <div style="font-size:11px;font-family:Verdana, Geneva, sans-serif;">&nbsp;&nbsp;&nbsp;&nbsp;
            <?php if(empty($game['instructions'])){ echo 'N/A'; } else { echo $game['instructions']; } ?>
          </div>
          <br />
          <div style="font-size:11px;font-family:Verdana, Geneva, sans-serif;"> Name: <strong><?php echo $game['name']; ?></strong><br />
            Author: <strong><?php echo $game['author']; ?></strong><br />
            Added: <strong>
            <?php $date = date('F j', $game['date']).'<sup>'.date('S', $game['date']).'</sup>'.date(', Y', $game['date']); echo $date; ?>
            </strong> <br />
            Total Plays: <strong><?php echo number_format($game['total_plays']); ?></strong><br />
            Plays Today: <strong><?php echo $today[0]; ?></strong><br />
            Plays In The Last Week: <strong><?php echo $week[0]; ?></strong><br />
          </div>
        </div>
        <!-- Start:Ad -->
        <div class="ad_3">
          <table cellpadding="0" border="0" cellspacing="0" style="background-color:#900;height:250px;width:300px;">
            <tr>
              <td>Advertise Here</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="ad_2">
        <table cellpadding="0" border="0" cellspacing="0" style="background-color:#900;height:90px;width:728px;">
          <tr>
            <td>Advertise Here</td>
          </tr>
        </table>
      </div>
      <!-- End:Ad -->
    </div>
  </div>
  <!-- End:Content -->
</div>
<!-- End:Bottom -->
<!-- Start:Footer -->
<div id="footer">
  <div class="back">&nbsp;</div>
  <div class="content"><a href="privacy.php">Privacy Policy</a> - <a href="contact.php">Contact Us</a><br />
    &copy; 2011 GameJunkie.ca</div>
</div>
<!-- End:Footer -->
</div>
</body>
</html>

style.css:

/* Start:Cross-Page Styles */
html {
	border:0px;
	margin:0px;
	outline:0px;
	padding:0px;
	cursor:default;
}
body {
	background-image:url(images/back.jpg);
	background-color:#111;
	background-repeat:repeat;
	background-position:right top;
	color:#fff;
	font:12px Arial Black, Gadget, sans-serif;
}
a {
	color:#000;
}
#page {
	position:relative;
	text-align:center;
	width:800px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom:10px;
	border:0px;
	outline:0px;
	padding:0px;
}
/* Start: Banner */
#top {
	width:800px;
	height:75px;
	position:relative;
	float:left;
	overflow:hidden;
	margin:10px 0px 16px 0px;
}
#top .back {
	opacity:0.6;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	background-color:#000;
	width:800px;
	height:75px;
	position:absolute;
	top:0px;
	left:0px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
}
#top .content {
	position:relative;
}
#top .content p {
	color:#069;
	font-size:24px;
	text-shadow: 0px -1px 0px #111;
}
/* End: Banner */
/* Start: Footer */
#footer {
	clear:left;
	float:left;
	height:45px;
	margin-top:16px;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	position:relative;
	text-align:center;
	width:800px;
}
#footer .back {
	opacity:0.6;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	background-color:#000;
	width:800px;
	height:42px;
	position:absolute;
	top:0px;
	left:0px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
}
#footer .content {
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	padding:8px 0px;
	position:relative;
	text-align:center;	
}
#footer .content ul {
	list-style:none;
	text-align:center;
}
#footer .content ul li {
	display:block;
	float:left;
}
#footer .content a {
	color:#069;
	text-decoration:none;
}
/* End: Footer */
/* Start: Menu */
#menu {
	text-align:center;
	width:100%;
	height:auto;
	overflow:hidden;
	position:relative;
	display:block;
}
#nav {
	width:100%;
	height:34px;
	float:left;
	display:block;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	padding:0px;
	list-style:none;
	background-color:#069;
	color:#000;
	font:13px Arial Black, Gadget, sans-serif;
}
#nav li {
	float:left;
	display:block;
}
#nav li a {
	display:block;
	padding:8px 22px;
	text-decoration:none;
	font-weight:bold;
}
#nav li a:hover {
	background-color:#0076AE;
}
#nav li.last {
	cursor:pointer;
	float:none;
	overflow:hidden;
}
#more_con {
	width:776px;
	height:150px;
	margin:0px 12px 12px 12px;
	position:relative;
	background-color:#0076AE;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	display:none;
}
/* End: Menu */
/* Start: Bottom */
#bottom {
	width:800px;
	height:100%;
	position:relative;
	float:left;
	overflow:hidden;
}
#bottom .trans {
	opacity:0.6;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	background-color:#000;
	width:800px;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
}
#bottom .content {
	position:relative;
	padding:0px 12px 12px 12px;
}
/* End: Bottom */
#section {
	text-align:center;
	background:#111;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:8px 0px 0px 8px;
	margin-right:12px;
	margin-bottom:12px;
}
#icon {
	text-align:center;
	background:#222;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	float:left;
	margin-right:8px;
	margin-bottom:8px;
	padding:3px;
	cursor:pointer;
}
#header {
	text-align:left;
	padding:0px 25px 0px 3px;
	background:#069;
	border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	border-top-right-radius:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px;
	clear:right;
	margin-bottom:8px;
	position:relative;
	left:-8px;
	color:#000;
	font:18px Arial Black, Gadget, sans-serif;
	height:26px;
	width:auto;
}
#game {
	text-align:center;
	background:#111;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	padding:8px;
	overflow:hidden;
	clear:right;
	margin:auto;
	margin-bottom:12px;
}
#info {
	text-align:center;
	background:#111;
	width:728px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:8px 0px 8px 8px;
	margin-left:17px;
	margin-bottom:12px;
	clear:right;
}
/* End:Cross-Page Styles */
/* Start: Ads */
.ad_1 {
	text-align:center;
	vertical-align:top;
	background:#111;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:7px;
	position:relative;
	margin:0px 0px 12px 0px;
	clear:left;
}
.ad_2 {
	text-align:center;
	background:#111;
	width:728px;
	height:90px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:7px;
	margin-left:17px;
	margin-bottom:12px;
	clear:right;
}
.ad_3 {
	text-align:center;
	background:#222;
	width:300px;
	height:250px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:5px;
	clear:right;
}
.ad_4 {
	text-align:center;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	float:left;
	padding:5px;
	clear:both;
	background-color:#222;
	margin:0px 149px 8px 149px;
	height:60px;
	width:468px;
}
.ad_5 {
	text-align:center;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	float:left;
	padding:5px;
	clear:both;
	background-color:#111;
	margin:0px 149px 12px 149px;
	height:60px;
	width:468px;
}
/* End: Ads */
2

Hey, I’d like to help here, but if you force me to download a video that I don’t want, then give me no way to turn it off, I leave!

3

I’m sorry but i’m not trying to force anyone to do anything. And you don’t have to download anything. There is a flash game there but thats because i’m creating a flash game site. And if you actually looked at the footer its not correct and that was my problem. But i’m sorry if i caused anyone any trouble.

4

Don’t feel bad. It’s just that as soon as that page loads, the video loads whether I want it to or not (= download) and then it starts to play loudly, and there’s no way to stop it. I really don’t like that kind of behavior, and I recommend you change it so that users choose to play the video if they wish. I don’t want that video screaming at me while I debug the page.

5

Ok im sorry about that i understand what your saying and heres a link the you can view it with any game and the footer problem can be seen there.
Game Junkie - Play Free Online Flash Games!

6

Ah, that’s better. Thanks.

Well, the difference between that page and the others is that on the others, the footer div is inside the #page div, whereas here it’s outside it. You could leave the HTML as is and remove the float, but really, the obvious solution is to amend the template by moving the footer div inside the #page div.

7

Thank you. I’ll go through my code and find the the misplaced end tag.

8

You’re problems go much deeper than the appearance would lead you to believe – You’ve got tables for nothing, non-semantic markup, and dozens of unnecessary DIV or just plain wrong tags around content. Even the comments are likely to trip possible rendering bugs in IE and some versions of Firefox… and that’s before we talk the inclusion of jquery that doesn’t even appear to serve a purpose on a page (not that it EVER does)… or the use of onclick to do an anchor’s job…

There’s a saying – “CSS is only as good as the HTML it’s applied to” – and your HTML… Well…

Of course, I’d also kick GA in the keister, but that’s because I don’t see it providing anything useful you couldn’t be gleaning from Analog or Webalizer on the server. Waste of bandwidth… or the stuffed description meta that could get you blacklisted for the word games, the formatting on most of your self closing tags being omitted in a XHTML strict doctype, etc, etc, etc…

… Also I’d avoid the opacity on the body areas, just because it makes scrolling up and down painful if FF or IE.

So your first order of business would be cleaning up the HTML.


<!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"
	lang="en"
	xml:lang="en"
><head>

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

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="Description"
	content="Play games online for free."
/>

<meta
	name="Keywords"
	content="Free, Flash, Games, Online, Action, Adventure, Arcade, Puzzle, Simulation, Sports, Strategy"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Game Junkie - Play Free Online Flash Games!
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		<a href="/">
			Game Junkie
		</a>
	</h1>

	<ul id="mainMenu">
		<li><a href="category.php?value=action">Action</a></li>
		<li><a href="category.php?value=adventure">Adventure</a></li>
		<li><a href="category.php?value=arcade">Arcade</a></li>
		<li><a href="category.php?value=puzzle">Puzzle</a></li>
		<li><a href="category.php?value=simulation">Simulation</a></li>
		<li><a href="category.php?value=sports">Sports</a></li>
		<li><a href="category.php?value=strategy">Strategy</a></li>
		<li class="last">
			More
			<div>Coming Soon</div>
		</li>
	</ul>

	<div id="content">

		<div class="wideAdvert">Advertise Here</div>

		<object
			type="application/x-shockwave-flash"
			data="file_database/.swf"
			width="580" height="530"
			id="pageGame"
		>
			<param name="movie" value="file_database/.swf" />
			<param name="quality" value="high" />
			<param name="scale" value="noborder">
			<!-- alternative content should go here -->
		</object>

		<h2>Game Information</h2><!-- I'd get the name of the game here!!! -->

		<div class="gameInfo">

			<dl>
				<dt>Description></dt>
				<dd><p>N/A</p></dd>
				
				<dt>Instructions</dt>
				<dd><p>N/A</p></dd>

				<dt>Name:</dt>
				<dd></dd>

				<dt>Author:</dt>
				<dd></dd>

				<dt>Added:</dt>
				<dd>December 31<sup>st</sup>, 1969</dd>

				<dt>Total Plays:</dt>
				<dd>0</dd>

				<dt>Plays Today:</dt>
				<dd>16</dd>

				<dt>Plays in the Last Week:</dt>
				<dd>34</dd>
			</dl>

		<!-- .gameInfo --></div>

		<div class="trailingAdvert">
			Advertise Here
		<!-- .trailingAdvert --></div>

		<div class="wideAdvert">
			Advertise Here
		<!-- .wideAdvert --></div>

	<!-- #content --></div>

	<div id="footer">
		<ul>
			<li><a href="privacy.php">Privacy Policy</a></li>
			<li class="last"><a href="contact.php">Contact Us</a></li>
		</ul>
		&copy; 2011 GameJunkie.ca
	<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>

Very little reason for you to be using much more markup than that. Everything else goes in your CSS. At 2.7k that’s almost HALF the code you had – and makes use of semantic markup.

Your existing CSS has similar bloat issues… and flushes the mere notion of accessibility down the toilet. px should never be used on content fonts and restricted to those rare instances where you have no choice due to an image interaction – you don’t declare any line-heights explaining why it’s rendering broken here in Opera and IE – the blue color provides insufficient contrast to black leading to legibility issues – you should look into “condensed” background properties instead of saying “background-property” five or six times on every element… and you seem to be in general declaring four or five times more positioning than should ever be needed on such a simple layout.

Gimme a few, I’ll belt out a workalike CSS for that.

9

Oh, and you know 800px isn’t 800 friendly once scrollbars are on the page, right? you need to narrow that to 752 if you’re targeting that audience… otherwise you might as well make use of the extra 224 px that would be available when 1024 friendly – though I’d probably make the layout semi-fluid.

… and font names with spaces in them have to be put in quotes in CSS.

10

here’s what I came up with:

Game Junkie - Play Free Online Flash Games!

The directory:

Index of /for_others/nlh205

is as always open for easy access to it’s bits and pieces.

I’m on the way out the door, but give it a good hard look, I’m sure you’ll have plenty of questions.