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 & 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 & Output to the screen.</a></li>
<li><a href="http://www.google.ca" target="blank">Conditions & 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 & 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 & 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
