1

私は現在ウェブサイトに取り組んでいますが、2 つの div の上に画像を配置する際に問題があり、下の div がフッターであるという別の問題があります。 divの上の画像ではありません）

これが私のアイデアをよりよく示すための画像です：ここに画像の説明を入力

私のコードを確認する必要がある場合は、これを実装する方法についていくつかのアイデアを知りたいです。

私の投稿の下ですでにコメントしてくれた人々のために、まず第一に、あなたの時間をありがとう.私のコードのビット。

<html>
<head>
<style type="text/css">
/* general */
 body { background: #fdfdfd; font:  12px Verdana, Geneva, sans-serif;  color:#444;      margin: 0 0 300px; /* bottom = footer height */}
 html { position: relative; min-height: 100%;}
 .fix_width { width: 940px; margin: 0 auto; }
 .fix_width:after, .left_foot_cont ul li:after { content: "  " ; display:block; height:0; clear:both; visibility:hidden; }

  #header { background:#6FF; height:100px; z-index: 3; position: relative;  border-top: color: #555555 thick; border-width:5px; }
  #container { position:relative; top:0px;  margin-top:100px;     overflow: auto;}
  .cont {width:250px; padding-left:20px;  margin-left:10px; display:inline-block; float:left;  }

  #footer {  background: #A9CF38;       position: absolute;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
    overflow: auto;}

    img {width:940px; }


 </style>



</head>
<body>

<div id="header">
        <div class="fix_width">
<h2>
Just the header nothing important
</h2>
        </div>
</div>

     <div id = "container">
                    <div class="fix_width">
                                    <div class="cont">
                                               <h2>
                                                            Lorem ipsum
                                                </h2>
                                                <p class="last">
                                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                                                </p> <!-- End p.last -->
                                    </div><!-- End .cont -->
                     </div> <!-- End .fix_width -->
          </div><!-- End .container -->

          <!-- Where should i put the image  ????? --->
          <img src="http://www.mormonshare.com/sites/default/files/handouts/cg_banner-blank.gif"> </img>


               <div id = "footer">
                    <div class="fix_width">


                                        <div class="footer_con_left">
                                                              <h2>
                                                                     Lorem ipsum
                                                                     <br /><br />
                                                            </h2>
                                                             <h1>
                                                                    dolor sit amet
                                                                    <br /> 
                                                                    dolor sit amet
                                                                    <br  />
                                                                    dolor sit amet
                                                                    <br />
                                                                    dolor sit amet      
                                                        </h1>
                                        </div>  <!-- End. footer_con_left -->
                        </div><!--  Einde class fix_width -->
      </div> <!-- Einde class footer -->

</body>

</html>

コードで画像を見ることができるように、この画像を空白に 50%、緑のスペースに 50% 配置する必要があります (したがって、コンテナ div の間とフッター div の間のコードで、またはおそらくより良い言い方をします)これらのdivの上に）

助けてくれてありがとう！

4

3 に答える 3

0

画像を div でラップ:

targethoweveryouwish {
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-300px;
z-index:10;
}

わかりました、上記のコードで何が起こっているかを示します。50% 属性は div をページの中央に移動していますが、div の左上隅を中央に移動しているため、適切に中央に配置するには、div の高さと幅の半分を差し引く必要があります。 、margin-top および margin-left プロパティにこれらの調整を行います。z-index は基本的に、ページにレイヤーを追加するための 2D の方法のようなものです。デフォルトではすべてがレイヤー 0 にあるため、オーバーラップさせたい場合は、それらをより高いまたはより低い z-index に配置します。負の値も使用できます。

于 2013-09-02T16:31:10.440 に答える
0

DIV1 に画像を配置し、DIV1 に設定position:relativeし、position:absoluteIMAGE に設定bottom:-50%して IMAGE に設定するか、bottom:0px;margin-bottom:-50%;

于 2013-09-02T16:17:25.973 に答える