0

Google Chrome ユーザーが Web サイトのナビゲーション バー リンクをクリックできないという問題があったため、ナビゲーション メニューの修正に取り組んでいます。新しいソリューションで修正されましたが、別のページではなく、あるページのレイアウトからオフセットされたナビゲーション バーができました。

メイン サイト ビュー (整列)についてはhttp://www.survivaloperations.netにアクセスし、フォーラム ビュー (オフセット左) についてはhttp://www.survivaloperations.net/forums/にアクセスしてください。

nav の HTML は次のとおりです。

<ul id="nav">
        <li><a id="home" href="./news" alt="Home"></a>
        <li><a id="members" href="./members"></a>
        <li><a id="forums" href="./forums/" alt="Forums"></a>
        <li><a id="about" href="./about"></a>
        <li><a id="guides" href="http://www.survivaloperations.net/forums/viewforum.php?f=10"></a>
        <li><a id="drawings" href="http://www.survivaloperations.net/forums/viewforum.php?f=6"></a>
        <li><a id="faq" href="./faq"></a>
        <li><a id="downloads" href="./downloads"></a>
        <li><a id="sponsors" href="./sponsors"></a>
        <li><a id="nav_break" href=''></a>
        <li><a id="apply" href="./forums/application.php"></a>
    </ul>

nav の CSS は次のとおりです。

 #nav {   margin:297px 0 0 -40px;   position:absolute; }

 #nav a {   display:block;
     height:35px; }

 #nav li  {   display:inline-block; }

 #home {
     background: url('http://survivaloperations.net/images/home.jpg') no-repeat bottom;   width:106px; }
 #home:hover {
     background: url('http://survivaloperations.net/images/home_up.jpg') no-repeat
 bottom; }

 #members {
     background: url('http://survivaloperations.net/images/members.jpg') no-repeat
 bottom;   width:96px; }
 #members:hover {
     background: url('http://survivaloperations.net/images/members_up.jpg') no-repeat
 bottom; }

 #forums {
     background: url('http://survivaloperations.net/images/forums.jpg') no-repeat bottom;   width:96px; }
 #forums:hover {
     background: url('http://survivaloperations.net/images/forums_up.jpg') no-repeat
 bottom; }

 #about {
     background: url('http://survivaloperations.net/images/about.jpg') no-repeat bottom;   width:96px; }
 #about:hover {
     background: url('http://survivaloperations.net/images/about_up.jpg') no-repeat
 bottom; }

 #guides {
     background: url('http://survivaloperations.net/images/guides.jpg') no-repeat bottom;   width:96px; }
 #guides:hover {
     background: url('http://survivaloperations.net/images/guides_up.jpg') no-repeat
 bottom; }

 #drawings {
     background: url('http://survivaloperations.net/images/drawings.jpg') no-repeat
 bottom;   width:96px; }
 #drawings:hover {
     background: url('http://survivaloperations.net/images/drawings_up.jpg') no-repeat
 bottom; }

 #faq {
     background: url('http://survivaloperations.net/images/faq.jpg') no-repeat bottom;   width:96px; }
 #faq:hover {
     background: url('http://survivaloperations.net/images/faq_up.jpg') no-repeat bottom; }

 #downloads {
     background: url('http://survivaloperations.net/images/downloads.jpg') no-repeat
 bottom;   width:96px; }
 #downloads:hover {
     background: url('http://survivaloperations.net/images/downloads_up.jpg') no-repeat
 bottom; }

 #sponsors {
     background: url('http://survivaloperations.net/images/sponsors.jpg') no-repeat
 bottom;   width:100px; }
 #sponsors:hover {
     background: url('http://survivaloperations.net/images/sponsors_up.jpg') no-repeat
 bottom; }

 #nav_break {   background:url('http://www.survivaloperations.net/images/nav_spacer.jpg');
     width:254px; }

 #apply {
     background: url('http://survivaloperations.net/images/apply.jpg') no-repeat bottom;   width:108px; }
 #apply:hover {
     background: url('http://survivaloperations.net/images/apply_up.jpg') no-repeat
 bottom; }

フォーラムや通常の Web サイトのスタイルシートには、これを引き起こすものは何もありません。-40px を 0 に変更すると、通常のサイトが台無しになり、フォーラムが修正されます。

どんなアイデアも素晴らしいでしょう！

注: CSS 全体は、http ://www.survivaloperations.net/style.css にあります。

4

1 に答える 1

2

まず、ページのサイズを変更するとナビゲーションが中断します。

#nav {
    margin: 0 auto;
    position: relative;
    width: 100%;
}

編集

パディングの問題もあることに気づきました。padding: 0;だから私もそのCSSに追加します。

于 2012-08-09T02:16:53.693 に答える