8

我的 HTML 有一些问题，所以我发布了代码。

第一个标签是divwith id="header"。我给了它 100% 的宽度并给了它一个背景图像。

在标题内还有另一个div带有id="header-contents". 我希望它在页面上居中，所以我给它一个宽度，然后margin:0 auto. 它适用于最大尺寸的浏览器，但是当我放大或将浏览器宽度调整到大约一半时，标题 div 的背景在某些时候开始消失并且不会填充 100% 的宽度。

这是它最初的样子（并且应该总是看起来）： 预期外观

这是我缩放或调整浏览器大小时的样子： 调整大小后

它的正确 HTML 和 CSS 是什么？这是代码：

<!DOCTYPE HTML>
<html>
<style>
body
{
    margin:0;
    padding:0;
}
.clear
{
    display:block;
    clear:both;
}
#header
{
    min-height:156px;
    width:100%;
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
}
#head-contents
{
    width:974px;
    margin:0 auto;
    height:156px;
}
#header ul
{
    margin:85px 23px 0 0;
    float:right;
    list-style-type:none;
}
#header ul li 
{
    display:inline;
}
#header ul li a 
{
    margin-left:46px;
    font-size:19px;
    color:#fff;
    text-decoration:none;
}
#header ul li a:hover ,
#header ul li a.active 
{
    color:#FD7600
}
</style>
<body>
<div id="header">

<div id="head-contents">

<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRRlklPBeTiVsV7dycvDxqFyrU02d0grYf4rTUqL-2ZzGb8Qvbwimb37HgO" />

<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

<div class="clear"></div>

</div>

</div>

</body>

</html>
4

5 回答 5

7

我找到了解决方案：

#header {
  height: 156px;
  min-width: 990px;
  background-image: url('http://www.webdesignideas.org/images/bellevueBg.gif');
  display: block;
}

#head-contents {
  width: 974px;
  margin: 0 auto;
  height: 156px;
}

这完全是#header 中的最小宽度问题。我查看了facebook的登录页面并弄清楚了。

于 2012-06-26T08:30:13.390 回答
4

Working FIDDLE Demo

您必须将widthof your设置head-contents为min-widthof your header：

#header {
    min-height:156px;  
    display: block;
    width:100%;
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');

    min-width: 974px; /* this is width of head-contents */
}
于 2013-05-21T02:30:08.897 回答
0 
#header {   
    min-height:156px;
    width:100%;
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
}
于 2014-09-13T15:18:02.457 回答
0

从 #header 中取出 background-image 属性并将此样式应用于 body 标签：

background: url('http://www.webdesignideas.org/images/bellevueBg.gif') 0 0 repeat-x #fff;

您将不再遇到您描述的问题。您现在需要做的就是使用 Photoshop 之类的图像编辑软件包将背景图像降低到 156 像素的高度。

编辑：这是显示解决方案的更新 jsfiddle：http: //jsfiddle.net/eYrg8/35/

于 2012-06-25T21:33:39.063 回答
0

这是适用于我的样式表： 

  body{    
    margin:0;    
    padding:0;
}  
    .clear{    
    display:block;   
    clear:both;
}    
    #header{   
    min-height:156px;  
    display: block;
    width:100%;
    background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
}
    #head-contents{    
    width:974px;    
    margin-left:200px;
    height:156px;
}
    #header ul {    
    margin:85px 23px 0 0;    
    float:right;
    list-style-type:none;
}
    #header ul li {    
    display:inline;
}    
    #header ul li a {   
    margin-left:46px;
    font-size:19px;
    color:#fff;
    text-decoration:none;
}

    #header ul li a:hover ,    
    #header ul li a.active {    
    color:#FD7600;
}

调整窗口大小并将边距设置为 auto 会影响内部 div 的位置，因为它的宽度不适合窗口。

于 2012-06-25T20:32:37.883 回答