0

バナーは、jquery masonry を使用しているボックスが重なっていますが、バナーを配置したい場所にあります。ここで何が間違っていますか?...

html

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="masonry.js"></script>
<script>
$(function () {
      $('#container').masonry({
          columnWidth: 1,
          itemSelector: 'div'
      });
});
</script>

<div id="banner">
    <img src="images/banner.png"/>
</div>

<div id="logo">
</div>

<div id="imagetrans">
<div id="container" class="clearfix masonry">

<div class="box1"> 
    <img class="bottom" src="images/eventbox2.png"/>
    <img class="top" src="images/eventbox.png"/>
</img></div>

<div class="box2">
    <img class="bottom" src="images/forumbox2.png"/>
    <img class="top" src="images/forumbox.png"/>
</img></div>    

<div class="box1"> 
    <img class="bottom" src="images/eventbox2.png"/>
    <img class="top" src="images/eventbox.png"/>
</img></div>

<div class="box1"> 
    <img class="bottom" src="images/eventbox2.png"/>
    <img class="top" src="images/eventbox.png"/>
</img></div>

<div class="box3">
    <img class="bottom" src="images/top10box2.png"/>
    <img class="top" src="images/top10box.png"/>
</img></div>

<div class="box1"> 
    <img class="bottom" src="images/eventbox2.png"/>
    <img class="top" src="images/eventbox.png"/>
</img></div>
</div>
</div>
</div>

そしてCSS

body {
  width:900px;
  height:100%;
  margin:0 auto;
  background-image: url(images/gridbg.png);
}

#banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0px;
}

#container > div {
  margin: 5px;
}
.box1 {
  width:350px;
  height:250px;
}

.box2 {
  width:150px;
  height:150px;
}

.box3 {
  width:150px;
  height:350px;
}

#imagetrans {
  position:relative;
  margin:0 auto;
}

#imagetrans img.top:hover,
#container > div img.top:hover {
  opacity:0;
}

#imagetrans img,
#container > div img {
  position:absolute;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

何か案は？コーディングを上から下に変更することで、バナーを下に簡単に配置できますが、画面の上部に配置できれば望ましいのですが、何が問題なのかよくわかりません...

ここに画像の説明を入力

4

1 に答える 1

1

変更してみてください:

#banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0px;
}

に：

#banner {
   height: 100px; // whatever your banner height is.
}

または：

#banner {
  position: fixed;
  left: 0;
  right: 0;
  top: 0px;
}

位置固定のアプローチを行う場合は、ページのコンテンツをヘッダーの高さだけ下げるために、何らかの上部マージンまたはスペーサーを追加する必要があります。

于 2013-04-01T19:22:24.850 に答える