0

有一段时间没有做任何网页设计了，但是我的女朋友需要对她的网站进行大量更新，几年前我做了这些更新，并且一直在一点一点地添加，因此它有点不完整，所以我想我会研究所有较新的开发，并尝试对各种设备进行一些响应式设计的全面检修。

我只是对我正在构建的主模板页面有一个特定的问题 - 我在这里放了一个副本：

http://massagecamden.co.uk/copy2/index.html

无论如何，我知道在不同大小的页面的媒体查询细节方面有很多事情需要处理，但我目前的问题是与桌面尺寸版本上导航栏的宽度有关。

我想它在一台显示器上看起来很棒，然后将它拖到一个更大的显示器上，你瞧，导航栏粘在 gridContainer div 的左侧。我在这里使用 Dreamweaver CS6 进行流体布局，导航栏本身位于名为导航的流体 div 内，其宽度设置为 100%。

现在，它上面的标题图像也在一个流体 div（称为标题）中，其宽度也设置为 100%。在我注意到导航问题之前，我遇到了图像居中问题，直到遇到一个问题（我认为在这里），这导致我找到了为 img 创建 display:block 规则然后使用 margin:auto 的解决方案将其居中的技巧。

但是，这（或我尝试过的其他任何东西）似乎不适用于导航栏。我承认我从网络上的许多教程中获取了大部分构造，但我对结果感到非常自豪 - 如果我能在扩展浏览器宽度时正确调整大小/位置？

理想情况下，我希望它保持与标题图像类似的静态大小，并且也可以类似地居中。如果这是可行的，那么我也希望能够在侧面看到更多的背景图像，就像在http://massagecamden.co.uk/的原始主页中一样，但我依赖 margin:auto on gridContainer 可能不会因为流体网格而做到这一点？

有人知道我哪里出错了吗？请？

非常感谢克雷格。

4

2 回答 2

0

这将使导航居中。

#navigation {
    text-align: center;
}

我不太确定你还想做什么。

于 2013-04-22T05:00:02.490 回答
0

我认为你必须这样做：

#navigation {
    width: 100%; /* You said you have done this already */
}

#header { /* Image is here */
    width: 1000px; /* For example */
    display: block;
    margin: auto;
}

您必须设置#header 的宽度，否则它不会居中。

我不确定你的意思是这个，但希望这会有所帮助。

于 2013-04-22T05:12:47.857 回答