0

私は、固定された下部ナビゲーション バーと中央に配置されたコンテンツを備えた、かなり最小限のサイトに取り組んでいます。各ページ間でコンテンツが少しずれてしまうという問題があります。

サイトはこちら: http://imsja.com/test/index.html

および CSS: http://imsja.com/test/ims.css

目次、理念、サービス、お問い合わせページをアップしました。Philosophy and Services では、スクロール バーのせいで内容がずれていることがわかります。ただし、コンテンツは Index ページと Contact Us ページの間でも移動します (どちらにもスクロール バーはありません)。

助言がありますか？

4

4 に答える 4

2

移動しないようにナビゲーションの幅は静的にすべきだと思います

#navigation { width: 100%; ->example 1345px or else as you prefer }

于 2013-01-30T20:55:19.867 に答える
0

ナビゲーション ブロックを次のようなホルダーに変更します。

    <div id="navigation">
      <div id="nav-holder">
        <a href="/philosophy.html"><span class="activedropcap">P</span><span class="active">HILOSOPHY</span></a>
        <a href="/services.html"><span class="dropcap">S</span>ERVICES</a>
        <a href="/portfolio.html"><span class="dropcap">P</span>ORTFOLIO</a>
        <a href="/team.html"><span class="dropcap">T</span>EAM</a>
        <a href="/blog.html"><span class="dropcap">W</span>HAT'S <span class="dropcap">N</span>EW</a>
        <a href="/contact.html"> <span class="dropcap">C</span>ONTACT <span class="dropcap">U</span>S </a>
        <div id="rule"><!-- hr-->
        <img src="images/rule.png" width="750" height="5"></div>
      </div>
    </div>

その後、それにスタイルを追加して集中化できます

    #navigation #nav-holder {
      width: 735px;
      margin: 0px auto;
    }

これらを #navigation a から削除します。

    padding-left: 5px;
    padding-right: 5px;
    width: 115px;

これを #navigation a の最後に追加します。

    float: left;
    line-height: 30px;
    padding: 0 25px;
于 2013-02-09T01:15:11.723 に答える
0

CSSリセットを使用することをお勧めします。

http://meyerweb.com/eric/tools/css/reset/

また、このエラーが表示されるため、カスタム フォントが読み込まれていないことが Chrome に表示されます。

Failed to load resource: the server responded with a status of 403 (Forbidden) http://use.typekit.net/c/6ed047/myriad-pro:n9:i9:n7:i7:i4:n4:n6:i6.Xbt:F:2,…6bdfc67868a14a7e75bc1db57140ed45ade213a3fcababd522e3dc685922facee8394858fe

最初に気付いたのは、フォントのサイズが異なっているように見えることです。おそらく、物事が変化しているように見えます。

于 2013-01-30T20:52:54.780 に答える
0

これは、「アクティブな」リンクのスタイルが異なるためです。#navigation > aシフトを防ぐには、要素に固定幅を与える必要があります。

#navigation>a{
    display: inline-block; // width won't work on anchors without this
    width: 150px;          // just for example
}

また、「PORTFOLIO」、「TEAM」、「WHAT'S NEW」ページでは、対応するアンカーにアクティブなスタイルが適用されていないため、まずそれらを修正する必要があると思います。

于 2013-01-30T20:49:38.327 に答える