0

我试图制作一个菜单，但它运行良好，但是当我缩小窗口并滚动时，背景不会扩展。例子：

全屏视图 在此处输入图像描述

第一个图像是全屏的，第二个图像是在我滚动页面之后。如您所见，背景没有延伸。下面是我的CSS：

body{
padding: 0px;
margin: 0px;
font-family:Arial, Helvetica, sans-serif;
background-color: #717070;
 }
.header{
background-image: url("img/bgsmall.png");
height: 100px;
background-repeat: repeat-x;
min-width: 1000px;

}
.logo{
margin-left:320px;
float:left;
 }
#menu{
position: relative;
height: 100px;
text-align: center;
width:auto;
margin-left:600px;
min-width:1000px;
}
#menu ul{
list-style: none;
padding: 0;
margin: 0;
position:relative;
}
#menu li{
float: left;
display: inline;
padding-top:35px;
position:relative;
text-transform:uppercase;
}

#menu li a{
text-decoration: none;
padding-left: 32px;
padding-right: 32px;
font-size: 15px;
font-family: arial;
color: #ffffff;
text-align:center;
}
#menu li a:visited{
color: #ffffff;
}
#menu li a:hover{
color: #D86C00;
}

代码

  <html>
  <head>

  <link href="stylesheet.css" rel="stylesheet" type="text/css" />
  </head>
 <body>
  <div class="header">

<div id="menu">
    <ul>
        <li><a href="#">page1</a></li>
        <li><a href="#">page2</a></li>
        <li><a href="#">page3</a></li>
        <li><a href="#">page4</a></li>
    </ul>
    </div></div>





 </body>
 </html>

提前致谢。

4

3 回答 3

0

添加position:absolute;到您的.header班级。

于 2012-08-24T13:26:19.427 回答
0

您可以通过两种方式解决此问题：

1-

body{
padding: 0px;
margin: 0px;
font-family:Arial, Helvetica, sans-serif;
background-image: url("img/bgsmall.png");
background-repeat: repeat-x;
background-color: #717070;
 }
.header{
height: 100px;
}

2-

删除“最小宽度：1000px；” 从标题样式

于 2012-08-24T13:32:18.200 回答
0

这是你的最小宽度：1000px；在导致此问题的#menu 上。在不知道你想要实现什么布局的情况下，很难说你应该做什么来替换它，但是解决这个问题可以解决这个问题

于 2012-08-24T13:28:11.030 回答