0

我正在开发一个具有固定底部导航栏和居中内容的非常小的网站。我在每页之间的内容移动有点问题时遇到了问题。

这是网站：http: //imsja.com/test/index.html

和 CSS：http: //imsja.com/test/ims.css

索引、理念、服务和联系我们页面已上传至今。关于哲学和服务，我知道由于滚动条，内容正在发生变化。但内容也会在索引和联系我们页面之间切换（两者都没有滚动条）。

有什么建议么？

4

4 回答 4

2

我认为导航的宽度应该是静态的而不是移动

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

于 2013-01-30T20:55:19.867 回答
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”页面没有在对应的主播上应用active style，我认为你应该先修复它们。

于 2013-01-30T20:49:38.327 回答
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

我会改变你的导航块有一个这样的持有人：

    <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 回答