« previous next »
Pages: [1]   Go Down

Author Topic: Why is the nav bar so low?  (Read 514 times)

sk8rdude461

  • New Member
  • *
  • Posts: 4
  • Karma: 0
    • View Profile
Why is the nav bar so low?
« on: January 16, 2012, 04:36:26 AM »
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: [Select]
<HTML>
<HEAD>
<TITLE>Everlast Webclient</TITLE>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<script>
function closeIt() {
return "Are you sure you want to leave Abstract PK? When leaving this page you will log out!";
}
window.onbeforeunload = closeIt;
</script>
</HEAD>

<BODY>
<img src="banner.jpg" alt="Banner image" align="top"/>
</br>
<!-- <p>
<a href="http://www.everlastpk.com/client.jar" target="_blank"><img src="download.png" alt="download link"/></a>
<a href="http://forums.everlastpk.com" target="_blank"><img src="forum.png" alt="download link"/></a>
<a href="http://www.everlastpk.com/vote.php" target="_blank"><img src="vote.png" alt="vote link"/></a></br></p> -->
<p>
<div id="content">
<table cellpadding=0 cellspacing=0>
<tr>
<td colspan=2>
<div id="top">
<div id="menu">
<div>
<ul>
<li class="home">
<a class="hoverImg" target="_blank" href="http://www.runescape.com/g=runescape/title.ws"><img src="http://www.runescape.com/img/game/home.jpg" alt="Home" title="" /></a>
</li>
<li class="support">
<a class="hoverImg" target="_blank" href="http://services.runescape.com/m=rswiki/en/Customer+Support"><img src="http://www.runescape.com/img/game/support.jpg" alt="Support" title="" /></a>
</li>
<li class="forums">
<a class="hoverImg" target="_blank" href="http://services.runescape.com/m=forum/g=runescape/forums.ws"><img src="http://www.runescape.com/img/game/forums.jpg" alt="Forums" title="" /></a>
</li>
<li class="subscribe">
<a class="hoverImg" target="_blank" href="http://www.runescape.com/g=runescape/members_benefits.ws"><img src="http://www.runescape.com/img/game/subscribe.jpg" alt="Subscribe" title="" /></a>
</li>
<li class="clans">
<a class="hoverImg" target="_blank" href="http://services.runescape.com/m=clan-home/g=runescape/"><img src="http://www.runescape.com/img/game/clans.jpg" alt="Clans" title="" /></a>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</br>
<applet name="Everlast Client "code="client.class" archive="client.jar" width="765px" height="530px" align="middle">
Java is not installed on your machine or your browser does not allowed Java Applet to run<br /><br />Get the latest Java technology at <a href="http://www.java.com/">http://www.java.com/</a>
<param name="java_arguments" value="-Xmx512m">
</applet>
<p>Warning: Do not mess with the page While downloading.
It can freeze or ruin the download</p>
<div id="bottom">
</div>



</BODY>
</HTML>Note: the <p> tag that is commented out is the old nav bar that had 3 lame buttons.
CSS:
Code: [Select]
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;
      }
Logged

bushkid85

  • Regular Member
  • **
  • Posts: 65
  • Karma: 0
    • View Profile
Re: Why is the nav bar so low?
« Reply #1 on: January 19, 2012, 06:03:01 AM »
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.
Logged

Szymon-dziewonski

  • New Member
  • *
  • Posts: 8
  • Karma: 0
    • View Profile
Re: Why is the nav bar so low?
« Reply #2 on: April 14, 2012, 07:31:36 AM »
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
Logged
Pages: [1]   Go Up
« previous next »