html5/css3导航栏大小问题

现在有一段时间没有做任何网页设计，但我女朋友需要一堆更新到她的网站，这是我几年前做的，并且一直在增加点点滴滴，结果它是一种不规则的形式，所以我想我会研究所有最新的开发，并尝试通过为各种设备引入一些响应式设计来进行彻底检查。html5/css3导航栏大小问题

我只是随便用我构建主模板页面中的具体问题 - 我已经把副本在这里：

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

不管怎样，我知道有很多东西将根据不同大小的页面的媒体查询细节处理，但我目前的问题是在桌面大小版本上使用我的导航栏的宽度。

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

现在，它上面的标题图片也在流动div（称为标题）中，其宽度也设置为100％。在我注意到导航问题之前，我遇到了让图像居中的问题，直到我遇到了一个问题（在这里我认为），这导致我创建显示的解决方案：img的阻止规则，然后使用边距：汽车技巧将其集中。

但是这个（或者我尝试过的其他东西）似乎无法在导航栏上工作。我承认我从网上的一些教程中获得了大部分的构建，但是我对结果感到非常自豪 - 如果只是在扩大浏览器宽度时能够正确调整大小/位置，那么结果会很自豪。

理想情况下，我希望它保持一个类似于标题图像的静态大小，并且也要同样居中。如果这是可行的，那么我也希望能够在两侧看到更多的背景图像，比如在http://massagecamden.co.uk/的原始主页上，但我放弃了边距：gridContainer上的auto可能不会这样做流体格的美德？

任何人有任何想法，我哪里会出错？请问？

非常感谢克雷格。

来源

2013-04-22 Craig Duncan

如果可能的话，拉出相关的CSS和标记，并在http://www.jsfiddle.net上创建一个独立的示例，并将CSS/HTML也放在这里。这样，这个问题可能会在未来给其他人带来好处。 – 2013-04-22 04:52:12

这将以导航为中心。

#navigation { 
    text-align: center; 
}

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

来源

2013-04-22 05:00:02

太棒了！第一次！我在早上6点发布了这个帖子，并且一直在研究这个太久！我想我对导航div和新的nav html5标签之间的区别感到困惑。非常感谢！ – 2013-04-22 12:38:43

我认为你必须这样做：

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

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

你必须设置＃标头的宽度，因为否则将不能居中。

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

来源

2013-04-22 05:12:47

感谢您的回复 - 也许我不太清楚 - 我试图将nav元素（导航栏本质上）放在较大的浏览器设置中。 – 2013-04-22 12:34:38

谢谢你清除答案，对于我没有得到你的观点感到抱歉。如果@ MarkRyanSallee的答案是正确的（我认为你认为是），请通过点击答案的投票按钮下的接受按钮来接受它。 – 2013-04-22 13:36:29

html5/css3导航栏大小问题

回答

相关问题