8

HTML に問題があるため、コードを投稿します。

最初のタグはdivwithid="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 に答える
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;
}

ウィンドウのサイズを変更してマージンを自動に設定すると、幅がウィンドウに収まらないため、内側の div の位置がねじ込まれます。

于 2012-06-25T20:32:37.883 に答える
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 に答える