triumphost 120 Posting Whiz

Hi All, I'm making a website for my school project but I have a problem with the pre tag. I used a table to define the layout of my site. But now I want to add content using the <pre> tag and it stays in the center -__- even when I style it to the left with a margin or vertical-align.. It just won't go left no matter what!

Please help me figure out the problem.. I've been looking for 2 hrs now and can't figure it out. Screenshots below the code.

Side Help: I also wanna know how to get syntax highlighting without javascript because for this project I cannot use javascript at all.. its strictly css and html.

"Index.html"

<!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" lang="en" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="description" content="A Website dedicated to teaching hacking and the concepts of programming..." />
		<meta name="keywords" content="web page, namespace, classes, pointers, tutorials, tools, hacking, source code, programming, C++" />
		<meta name="robots" content="all" />		
	
		<!--CSS Styling-->
		<link href="style.css" rel="stylesheet" type="text/css" media="screen" title="Default Styles" />
		<title>Namespace Computer Science</title>
	</head>

	<body>
		<a href=""><img src="Logo.PNG" alt="The Art of Exploitation Title." width="100%" height="100px" border="1px green"/></a>
		
		<h2 id="h2">Your Learning Reference To Programming &amp; Reverse-Engineering.</h2>
		<br />
		<hr /> 
		<!-- Expandable Menu!-->
			<div id="hnav">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Tutorials</a></li>
					<li><a href="#">Products</a></li>
					<li><a href="#">FAQs</a></li>
					<li><a href="#" id="last">Contact Us</a></li>
				</ul>
			</div>			
		<br />
		<hr />
		<br />
		<a name="Tutorials"></a>
		<p class="pcolour">Tutorials:</p>
		<table class="border" id="tablefontsize">
			<tr>
				<td width="250px" class="leftnav">
					<ul>
						<!-- Introduction To C++ -->
						<li class="txtwhitestyle">Introduction To C++</li>
							<li class="styletype">
								<ol>
									<li><a href="http://www.google.ca" target="blank">Program Structure. Hello World!</a></li>
									<li><a href="http://www.google.ca" target="blank">Includes, Variables, Data-types.</a></li>
									<li><a href="http://www.google.ca" target="blank">Operators.</a></li>
									<li><a href="http://www.google.ca" target="blank">Input &amp; Output to the screen.</a></li>
									<li><a href="http://www.google.ca" target="blank">Conditions &amp; Loops.</a></li>
									<li><a href="http://www.google.ca" target="blank">Arrays.</a></li>
									<li><a href="http://www.google.ca" target="blank">Functions.</a></li>
									<li><a href="http://www.google.ca" target="blank">Pointers.</a></li>
									<li><a href="http://www.google.ca" target="blank">Structures.</a></li>
									<li><a href="http://www.google.ca" target="blank">Other Data Structures.</a></li>
									<li><a href="http://www.google.ca" target="blank">Classes.</a></li>
									<li><a href="http://www.google.ca" target="blank">Inheritance.</a></li>
								</ol>
							</li>
					</ul>

					<ul>							
						<!-- Introduction to C++ GUI's -->	
						<li class="txtwhitestyle">Introduction To C++ (GUI's)</li>
							<li class="styletype">
								<ol>
									<li><a href="http://www.google.ca" target="blank">DotNet vs Windows API.</a></li>
									<li><a href="http://www.google.ca" target="blank">Hello World! GUI.</a></li>
									<li><a href="http://www.google.ca" target="blank">Declaring Variables &amp; Data-types.</a></li>
									<li><a href="http://www.google.ca" target="blank">Operators.</a></li>
									<li><a href="http://www.google.ca" target="blank">Controls (TextBoxes, Buttons, Etc).</a></li>
									<li><a href="http://www.google.ca" target="blank">Control Properties &amp; Attributes.</a></li>
									<li><a href="http://www.google.ca" target="blank">Message Queue.</a></li>
								</ol>
							</li>
					</ul>
					
					<ul>	
						<!-- Introduction to Wifi Hacking -->	
						<li class="txtwhitestyle">Intro. To Reverse-Engineering</li>
							<li class="styletype">
								<ol>
									<li><a href="http://www.google.ca" target="blank">Aircrack/BackTrack/Wireshark.</a></li>
									<li><a href="http://www.google.ca" target="blank">Packet Sniffing/Airmon.</a></li>
									<li><a href="http://www.google.ca" target="blank">Olly-DBG/IDA-Pro.</a></li>
								</ol>
							</li>
					</ul>
				</td>
				
				<td class="contentstyle"> 
					<pre class="hcode">
						// This is My First C++ Program.

						#include <iostream>
						using namespace std;

						int main ()
						{
						  cout << "Hello World!";
						  return 0;
						}
					</pre>
				</td>
			</tr>
		</table>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<p class="trademark">Copyright <sup>©</sup> 2011 Namespace Computing. All Rights Reserved.<p>
		
		<script type='text/javascript'>
		 //<![CDATA[
		 document.write ("<a href='http://validator.w3.org/check?uri=" +
			 location.href+ "\;ss=1;verbose=1' target='display'>" +
			 "<img src='http://gblearn.com/images/valid-xhtml10.png' " +
			 "width='60' height='21' border='0' " +
			 "alt='Valid XHTML 1.0 Transitional.' " +
			 "title='Valid XHTML 1.0 Transitional.' /></a>")
		 dt=new Date(document.lastModified);
		 document.write("<small> This page was last modified on " +
						 dt.toLocaleString() + "</small>")
		 //]]>
		</script>
	</body>
</html>

"style.css"

#h1 {
	color: #FFD700; 
	font-size: 25px; 
	font-family: "Courier New"; 
	font-style: oblique; 
	background-color: #292929;
	font-variant: Small-Caps; 
	text-align: center;
	}

body {
	background-color: #292929;
	background-attachment:fixed;
	}
	
body a:visited, a:link {
	color: #66CD00;
	}

#h2 {
	font-size: 17px; 
	text-decoration: underline; 
	font-family: "Courier New";
	text-indent: 0px; 
	text-align: center;
	color: #FFD700;
	}

p {
	font-weight: bold; 
	font-style: italic;
	}

.pcolour {
	color: #FFD700;
	}
	
.trademark {
	font-family: "Verdana";
	font-size: 11px;
	text-align: center;
	text-decoration: none;
	}
	
.contentstyle {
	padding-left: 20px;
	vertical-align: top;
	}
	
.leftnav {
	border-right: solid 1px #DCDCDC;
	vertical-align:text-top;
	}

ul {
	list-style-type: circle; 
	font-family: "Courier New";
	}

ol {
	list-style-type: decimal;
	font-family: "Courier New";
	color: #FFD700;
	}
	
li.styletype{
	list-style-type: none;
	color: black;
	}
.txtwhitestyle{
	text-decoration: underline;
	color: #FFD700;
	}

.pagelinkstyle{
	text-decoration: none;
	color: black;
	}
	
table.border {
	border-right: solid 0px #DCDCDC;
	}
	
.hcode {
	border: solid 1px white;
	}

#tablefontsize{
	font-size: 11px;
	}
	
a {
	text-decoration: none;
	}
	
#hnav {
	width: 100%;
	float: left;
	margin: 0 0 0 0;
	padding: 0;
	position: relative;
	font-family: "Courier New";
	}
	
#hnav ul {
	float: left;
	list-style-type: none;
	margin: 0 0 0 0;
	position: relative;
	text-align: center;
	left: 50%;
	}
	
#hnav ul li {
	float: left;
	display: block;
	list-style: none;
	padding: 0px;
	position: relative;
	right: 60%;
	}
	
#hnav li a {
	display: block;
	padding: 0px 15px;
	text-decoration: none;
	font-weight: bold;
	color: #66CD00;
	border-right: 1px solid #D3D3D3;
	}
	
#hnav li a:hover {
	color: #069;
	background-color: #A9A9A9;
	}
	
#hnav ul li #last{
	border-right: 0px;
	}

ScreenShot:
http://i.imgur.com/t0pgg.png