Why is the nav bar so low?

[sk8rdude461]

This image shows my error pretty well:
http://dl.dropbox.com/u/31065410/help.png (image tags arent allowed
The main nav bar with the Home, Forums, Support, and clans are so far right because they are floated and I cropped the image after zooming out.
The problem is that the entire nav bar is supposed to be directly under the image.
I used both HTML and CSS in this.
HTML:

[code]

Everlast Webclient

Java is not installed on your machine or your browser does not allowed Java Applet to run

Get the latest Java technology at http://www.java.com/

Warning: Do not mess with the page While downloading. It can freeze or ruin the download

[/code] Note: the

tag that is commented out is the old nav bar that had 3 lame buttons. CSS: [code]p { text-align:center; } html, body, #content, table { margin: 0; padding: 0; width: 100%; height: 100%; } #content { position: absolute; top: 0; left: 0; } td { text-align: center; } a img { border: none; } .hoverImg { display: block; overflow: hidden; position: relative; font-weight: normal; } #menu { width: 100%; position: absolute; left: 0; top: 7px; } #menu div { width: 492px; margin: auto; height: 44px; background: url(http://www.runescape.com/img/game/menu_bg.png) left top no-repeat; overflow: hidden; position: relative; } #menu div ul { margin: 0; padding: 0; list-style: none; } #menu div ul li { position: absolute; top: 4px; } #menu div ul li a { height: 35px; } #menu .home { width: 87px; left: 39px; } #menu .support { width: 106px; left: 126px; } #menu .forums { width: 103px; right: 157px; } #menu .subscribe, #menu .clans { width: 120px; right: 37px; } .hoverImg img { position: absolute; left: 0; top: 0; width: 200%; height: 100%; } .hoverImg:hover img { left: -100%; text-indent: 100%; } .hoverImg:hover { font-weight:bold; } #top, #bottom { width: 100%; position: absolute; background-repeat: repeat-x; background-color: black; } #top { position: relative; float: top; height: 60px; background-image: url(http://www.runescape.com/img/game/menu_bg.jpg); } #bottom { float: left; height: 58px; background-position: center top; background-image: url(http://www.runescape.com/img/game/footer_bg.jpg); } #bottom div ul { float: right; list-style: none; margin: 0; padding: 0; } #bottom div li { float: left; margin-left: 10px; } #bottom div{ display: block; text-align: left; width: 500px; font-size: 10px; color: #b6b6b6; }[/code]

[bushkid85]

To me it is because you #content is positioned absolute and your nav is position relative to the #top floating below.

I would advise you to restructure your CSS. More inclined to having one content div (wrapper) and position the following div relative ‘top’ heights. Dont float items either its baaaad.

Look into your DOCTYPE too and I suggest for a site like this to use HTML5 as it positions everything for you.

[Szymon-dziewonski]

1. it depends where you want to have this main menu.
   First you could use for #menu
   position:absolute or position:fixed
   but i advice u do position:absolute; with display:blocked;
   so it stay on the right position even if your content will be scrolled

Second when u set your position on menu ( you can check where it stay with border function - just see it)
Then u handle with your content of menu your “support button” etc
There you can use you ul li position relative float to left
and it will work fine.

If you still will have this problem send your project to me on priv msg and I’ll try to help you

Depends how many time I’ve got :))
Cheers