0

私の問題はこれです。ブラウザよりも大きいヘッダー画像があります。ブラウザの幅に基づいて画像を多かれ少なかれ表示したいので、これをやりたかったのです。ブラウザが画像よりも大きい場合に繰り返される色があります。その上に、中央に配置された画像と、その上にある 2 つの三角形があります。左に 1 つ、右に 1 つ浮いています。私の問題はこれです。.content-outer .content-inner の幅を 978px から 1134px に変更して、三角形の上に大きな画像を収めると、ナビゲーション バーのセンタリングが乱れます。これが私のコードです。リストのスタイリングは私のナビ用です。

<div class="content-outer" id="top_nav">
<div class="content-inner">
</div>


<div class="content-outer" id="header_map">
<div class="diamond-left">
<div class="diamond-right">
<div class="content-inner">
</div>
</div>
</div>
</div>


#header,

#header_map {
height:529px; 
background:#3b96a9 url(Layer-57.jpg) top center no-repeat;
margin-bottom:45px; 
overflow:visible;
}

#header .diamond-left,

#header_map .diamond-left {
width:100%; 
height:529px; 
overflow:visible; 
float:left; 
background:url(Layer-58.png) top left no-repeat;
}

#header .diamond-right,

#header_map .diamond-right {
width:100%;
height:529px; 
overflow:visible; 
float:right; 
background:url(Layer-59.png) top right no-repeat;
}

#header_map .content-inner  {
height:391px; 
background:url(Layer-61.png) top center no-repeat; 
position:relative; 
overflow:visible; }

#header .content-inner {
position:relative; 
overflow:visible; 
padding-bottom:20px;
}

.content-outer
{ width:100%; float:left; overflow:visible; }
.content-outer .content-inner
{ width:978px; margin:0 auto; overflow:visible; position:relative; }
.content-outer .content-inner ul
{ margin:20px 0; padding:0; }
.content-outer .content-inner ul li
{ margin:3px 0 3px 20px; padding:0; font-size:1.1em; }
.content-outer .content-inner ul li p
{ font-size:1em; }
4

1 に答える 1

0

私が何かを誤解していない限り、コードは問題ないようです。次のことを再確認しましたか。

  • 三角形の画像は背景が透明なので、後ろが見えますか?
  • メイン ヘッダーの背景は、スタイルシートで指定された正しい場所にありますか?

ページが公開されていて、私たちが見ることができる場合は、私たちに知らせてください。あなたの問題をより明確にすることができるかもしれません.

于 2012-05-03T20:03:43.273 に答える