Navigation issue

[JayDT]

I just redid the navigation on my clients website and its messing the area below it up.

It looks like its trying to put the text below it in the area a line below where the login is and also has an odd blank space below it.

(Click games to see what I mean about the text being below where the listbox ends)

http://www.virtualega.com/index.php?page=home#

Access key: 201212141

<div class='header' style='background-repeat: repeat-y; height: 155px;'><br><span style='padding-left: <?
echo "560px"; ?>'><a href='<? echo $addlink; ?>'><img width='400px' height='97px' src='<? echo $add; ?>'/></a></div></td></tr></table>

<script type="text/javascript">
function clickclear(thisfield, defaulttext) {
if (thisfield.value == defaulttext) {
thisfield.value = "";
}
}
function clickrecall(thisfield, defaulttext) {
if (thisfield.value == "") {
thisfield.value = defaulttext;
}
}
</script><div class='tope'>
<ul class="nn">
<li class="nn"><a href="index.php?page=home" class='cl'>Home</a></li>
<li class="nn"><a href="#" class='cl' onclick="change(">Games</a></li>
<li class="nn"><a href="forum.php" class='cl'>Forums</a></li>
<li class="nn"><a href="events.php" class='cl'>Events</a></li>
<li class="nn"><a href="live.php" class='cl'>LIVE</a></li>
<li class="nn"><a href="faqs.php" class='cl'>FAQs</a></li>
<li class="nn">   </li>
<li class="nn"><form action='index.php?page=go' method='POST'>
<?
if ($_SESSION['loggedin']==0){
?>
<input type='text' name='username' class='username' value='Username' onclick="clickclear(this, 'Username')" onblur="clickrecall(this,'Username')"> <input class='password' type='password' name='password' value='Password' onclick="clickclear(this, 'Password')" onblur="clickrecall(this,'Password')">   <input type='submit' class='buttonlog' name='action' value='Login'>   <input type='submit' class='buttonlog' name='action' value='Register' >
<?
}else{
$username = $_SESSION['username'];
$sql = "select * from `users` where `username`='$username'";
$result = mysql_query($sql) or die(mysql_error());
while($row = mysql_fetch_array($result)){
	$level = $row['level'];
}
$username = strtolower($username);
$balance = balance($username);
if ($balance>=0){
	$color="green";
}else{
	$color="red";
}
if ($level=="management"){
	$plus = "<a href='index.php?page=profile&username=$username'>Profile</a>";
	$plus .= " - <a href='admin.php'>Admin CP</a>";
}elseif ($level=="normal"){
	$plus = "<a href='index.php?page=profile&username=$username'>Profile</a>";
}else{
	$plus = "<a href='index.php?page=profile&username=$username'>Profile</a> - <a href='staffpage.php'>Staff Page</a>";
}
echo "<span style='font-size: 11px'><b>Welcome Back $username!</b>      $plus - <a href='index.php?page=ucp&a=transaction'>My Wallet</a> - <a href='logout.php'>Logout</a>  </h1></span>";
}

?>
</form></li>
</ul></div>
<?
	$isgame = $_SESSION['isgame'];
	if (!isset($_SESSION["isdiv"])){
		$_SESSION["isdiv"]="false";
	}
	if ($_SESSION["isdiv"]=="true"){
			$division = $_SESSION['division'];
			$game = $_SESSION['game'];
			?> <br><div class="games" style="display: block" id="8"> <a href='leagues.php?name=<?echo $division;?>&game=<?echo $game;?>'>News</a> - 
			<a href='games.php?page=gameoptions&sub=downloads'>Downloads</a> - 
			<a href='games.php?page=gameoptions&sub=standings'>Standings</a> - 
			<a href='games.php?page=gameoptions&sub=teams'>Teams</a> - 
			<a href='games.php?page=gameoptions&sub=rules'>Rules</button></a> <?

	}elseif ($isgame=="false"){
		$sql= "select * from `games`";
		?><div class="games" style="display: none" id="8"> <?
		$result = mysql_query($sql) or die(mysql_error());
		$count = 0;
		while($row = mysql_fetch_array($result)){	
			$game = $row['title'];
			$count +=1; 
			echo "<a href='games.php?page=$game'>$game</a>    ";
		}
	}elseif ($isgame=="true"){
			?><div class="games" style="display: block" id="8"> <?
			$game = $_SESSION['game'];
			$sql = "select * from `leagues` where `game`='$game'";
			$result = mysql_query($sql) or die(mysql_error());
			$count = 0;
			while($row = mysql_fetch_array($result)){	
				$id = $row['id'];
				$icon = $row['icon'];
				$name = $row['name'];
				$count +=1;
				echo " <a href='leagues.php?name=$name&game=$game'>$name</a>    ";
			}
	}
?></div></head><div class='content'><Center>
<? 
//if(isset($_SESSION['ishome'])){
//if($_SESSION['ishome']==true){
	include('subhead.php'); 
//}
//}?>

.tope{
background-image: url(images/nn_bg.jpg);
width: 1000px;
}
ul.nn {
list-style-type: none;
background-image: url(images/nn_bg.jpg);
height: 38px;

margin: auto;
padding-left: 32px;
display: block;
line-height: 40px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #000000;
}
ul.nn a:hover {
color: #1d83b3;
text-decoration: underline;
}
ul.nn a {
color: #1d83b3;

}
li.nn  {
float: left;
}
ul.nn a.cl {
background-image: url(images/nn_bg.jpg);
padding-right: 22px;
height: 38px;
padding-left: 22px;
display: block;
line-height: 40px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #000000;
}
ul.nn a.cl:hover {
background-image: url(images/nn_hover.jpg);
padding-right: 22px;
display: block;
padding-left: 22px;
margin-left: 0;
line-height: 40px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
height: 38px;
color: #ffffff;
}

[cssfreakie]

All I can say is that using tables for layout, inline style, bad tags and a bunch of other bad practises will make your site hard to contain and redundant. Unfortunately your site has them all.

If you read both the sticky (at css forum) and my signature, and apply this would not have happened. Also a grid system, would be nice to try out in order to get rid of the tabular design.

 

Just a hint: you will need float and clear for this. google them if you have no idea what they mean. It will fix it, but it that's pretty much it.