0

メニューを作成しようとしていますが、うまく機能していますが、ウィンドウを小さくしてスクロールすると、背景が拡張されません。例：

全画面表示 ここに画像の説明を入力

最初の画像は全画面表示で、2 番目の画像はページをスクロールした後のものです。ご覧のとおり、背景は伸びていません。以下は私の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 コード

  <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

それはあなたの最小幅です：1000px; これを引き起こしている #menu で。達成したいレイアウトが何であるかを知らなければ、これを置き換えるために何をすべきかを言うのは難しいですが、それを取り除くことでその特定の問題を整理します

于 2012-08-24T13:28:11.030 に答える
0

この問題は次の 2 つの方法で解決できます。

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 に答える