Coding help with header.

[Palcks]

I recently got a new layout for my lookup, and I've been playing around with it for a while. It used to have a header that I didn't like, so I changed the codes around to edit in a different header that I do like. The only problem is that it is displayed with each navigation link on top of another.

 

This is how it should look (up where it says "main, side 1, etc"):

http://i.imgur.com/2mjgL.png

 

And this is how it looks on the new coding:

http://imgur.com/dKl5L&2mjgL

 

Here's the code I am using, if it helps. ><

 

<div style="height: 30px; width: 100%; background: #fff; position: fixed; left: 0px; top: 50px; z-index: 1;"></div>

<div style="width: 100%; border-top: 1px dashed #000; position: fixed; left: 0px; top: 90px; z-index: 1;"></div>

<div style="width: 30px; height: 590px; background: #fff; position: fixed; left: 300px; top: 80px;"></div>

<div style="height: 100%; border-left: 1px dashed #000; position: fixed; left: 290px; top: 81px;"></div>

<div style="width: 100%; background: #f6f6f6; position: fixed; left: 330px; height: 50px; top: 0px; z-index: 1;"></div>


<div style="position: fixed; left: 15px; top: 120px;">
<font style="font: 60pt georgia; color: #ddd;"><font style="font-style: italic; font-weight: bold; color: #000;">p</font>alcks</font>

<div style="width: 190px; text-align: justify;"><br>
My name is Brad and I'm seventeen and I still play Neopets. :P I have several side accounts from way long ago, and they're all at least five years old (or close to it), but I use this account as my main since the username is the most normal. ^^ I love playing Key Quest, so Neomail me if you ever want to play. (:
<br><br>
Check my side accounts for pets that are UFA. I'll have a small blurb so you can see which ones can by applied for. I'm normally very lenient and patient when it comes to adopting and such, so don't feel afraid to ask me anything. I'm just looking for nice people to happily take over care of my pets that I don't want anymore.
<br><br>
I will soon be adding small storylines to my Neopets, and once I do this part of this text will be changed to notify anyone that cares to read about them. :P Until then, I'd like to say that this beautiful layout was created by the wonderful <a href="/userlookup.phtml?user=gloria291995">gloria291995</a>!
</div>
</div>



<style>
body {background: #eee;}
#header, #footer, hr, #userneohome, .content div a img, .content div b, #ban, #habitarium, #usercollections, #usertrophies, #ncmall, .brand-mamabar {display: none;}

.contentModule div a img, .contentModule div b {display: inline-block;}
.contentModule, .contentModuleTable, #main {border: none;}
.medText, td {
font: 7pt verdana;
line-height: 10px;
color: #666;}

#userneopets a {
height: 150px; width: 150px;
overflow: hidden;
display: block;}
.contentModuleHeader {
background: #fff;
color: #AFE339;
font: 14pt arial;
text-align: justify;
line-height: 21px;
font-weight: bold;}
.contentModuleHeaderAlt {
background: #fff;
color: #AFE339;
font: 14pt arial;
text-align: right;
line-height: 21px;
font-weight: bold;}
#main {
background: none;
margin-top: 86px;
width: 600px;
float: left;
margin-left: 370px;}
#content {
background: none;
width: 600px;}
#userinfo {
width: 350px;
height: 320px;}
#userinfo .medText table td table td img {
width: 20px;
height: 20px;
padding-bottom: 5px;}
a.nav, a.nav1 {
font-family: georgia;
font-size: 10pt;
text-decoration: none;
text-transform: lowercase;
line-height: 50px;
width: 700px; display: block;
text-align: justify;
font-weight: normal; margin-left: 5px;
font-style: italic; position: fixed; top: 0px; z-index: 1;
}
a.nav {
color: #7b7b7b;
background-color: none;
}
</style>

<div id="nav">
<a href="/userlookup.phtml?user=palcks" class="nav">main</a>
<a class="nav">side 1</a>
<a href="/userlookup.phtml?user=redkiko13" class="nav">side 2</a>
<a href="/userlookup.phtml?user=redscorchy13" class="nav">side 3</a>
<a href="/~Khuln" class="nav">css</a>
<a href="/index.phtml" class="nav">(Neopets)</a>
</div>

[Piticent]

Well, I guess you could change the div to a table, with each link in a td, then for extra measure you could even give it padding :)

 

EDIT: After looking, I think I should give you some coding ;)

 

<style>
table {padding: 5px;}
</style>
<table>
<tr>
<td>
<a href="/userlookup.phtml?user=palcks">Main</a>
</td>
<td>
side 1
</td>
<td>
<a href="/lookup.phtml?user=redkiko13">side 2</a>
</td>
<td>
<a href="/userlookup.phtml?user=redscorchy13">side 3</a>
</td>
<td>
<a href="/~Khuln">css</a>
</td>
<td>
<a href="/index.phtml">(Neopets)</a>
</td>
</tr>
</table>

 

There ya go! Any problems, just respond :)

Edited August 11, 2011 by Piticent123

[Palcks]

Is there any reason to get it up above the white line? And to format it with a different font and such?

 

Thatnks for the help so far though! :3