0

ほとんどの画面幅よりも大きいヘッダーがあります。私はそれを中央に配置し、オーバーフローを非表示にしているので、より大きな画面でブラウザを展開すると、より多くのブラウザが表示されます。その上に2つの画像があります。1つは右に浮かんでいて、もう1つは左に浮かんでいます。私の問題は、左の画像が左に浮かんでいるのに、右の画像が完全に正しく表示されないことです。両方の画像を同じz-indexに配置すると、左右に浮かぶのではなく、スタックするだけです。助言がありますか？これが私のcssとhtmlです：

 #triangleleft{
 width:100%;
 height:531px;
 z-index:58;
 position:absolute;
 top:+53px;
}

 #triangleright{
 width:100%;
 height:531px;
 z-index:59;
 position:absolute;
 top:+53px;
}

.triangleleft{
 background:url(Layer-58.png)no-repeat;
 float:left;
 margin-left:0px;
 height:531px;
 width:100%;
}

.triangleright{
 background:url(Layer-59.png)no-repeat;
 float:right;
 margin-right:0px;
 height:531px;
 width:100%;
}

 <div id="triangleleft">
 <div class="triangleleft"></div>
 </div>

 <div id="triangleright">
 <div class="triangleright"></div>
 </div>

また、これは私のヘッダー画像のコードであり、これを台無しにしていると思います

#wrapper {
 height:100%;
 position: relative;
}
#Layer-57 {
 position: relative;
 height:529px;
 background:#3b96a9 url(layer-57.jpg) top center no-repeat;
 top:-529px;
 overflow-x: hidden;
 z-index: 57;
}

<div id="wrapper"> <div id="Layer-57"></div> </div>
4

2 に答える 2

1

あなたのスタイルをこれに置き換えてください

<style>
#triangleleft {
    width:90%;
    height: 531px;
    z-index: 58;
    position: absolute;
    top: +53px;
}
#triangleright {
    width:90%;
    height: 531px;
    z-index: 59;
    position: absolute;
    top: +53px;
}
.triangleleft {
    background: url(Layer-58.png)no-repeat;
    float: left;
    margin-left: 0px;
    height: 531px;
    width: 100%;
}
.triangleright {
    background: url(Layer-59.png)no-repeat;
    float: right;
    margin-right: 0px;
    height: 531px;
    width: 100%;
}
</style>
于 2012-05-02T18:07:44.893 に答える
0

改訂された回答（わかりやすくするために以前の回答は削除されました）：

以下のコメントで参照したleaderbe.comページをよく見ると、divのHTML構造が実際のものとはかなり異なっていることに気づきました。あなたはtrianglerightdivをtriangleleftdivの中に入れて、次のようなスタイルを使う必要があります：

このjsfiddleを参照してください：http：//jsfiddle.net/uKrNT/2/

<div id="wrapper"> <div id="Layer-57">layer 57</div> </div>

<div id="triangleleft">
     <div id="triangleright">
   </div>
 </div>


#triangleleft{
 width:100%;
 height:531px;
 z-index:58;
 position:absolute;
 top:+53px;
 float:left;
 background:red url(http://www.leaderbe.com/images/diamond-left.png)no-repeat;
 margin-left:0px;
    overflow:visible;
    opacity:.5;

}

 #triangleright{
 width:100%;
 height:531px;
 z-index:59;
 float:right;
 background:blue url(http://www.leaderbe.com/images/diamond-right.png)no-repeat;
 margin-right:0px;
    opacity: .5;
    overflow:visible;
}


#wrapper { height:100%; position: relative; }
#Layer-57 { position: relative; height:529px; background:#3b96a9 url(layer-57.jpg) top center no-repeat; top:-529px; overflow-x: hidden; z-index: 57; }
于 2012-05-02T18:23:06.340 に答える