1

私はこのデザイン ( http://revivelab.com/demo_sites/bookthatcondo/ ) をワードプレスのテーマに変えようとしています。その上で。1500px を変更する必要があるのは、すべてのページに固有のトップ ポジションを指定する必要がないためです。その上の div は絶対的なので、波/スライダー効果のために重ねることができます。

これを達成する方法について誰かアドバイスやヒントはありますか? これらの「レイヤー」を実現するには、サイトの残りの部分に絶対配置を使用する必要がありますか?

4

2 に答える 2

1

わかりましたので、これを行う方法を見つけました...少し混乱するかもしれませんが、うまくいきます：

id の div を見つける必要がありますcanvas。その div (div 自体ではない) 内のすべてを、新しい ID (つまり、canvas2) を指定した新しい div でラップします。次に、次のようなものが必要です。

<div id="canvas">
   <div id="canvas2">
     <!-- all the other code here -->
   </div>
</div>

それができたら、フッター全体を取得して、<div id="canvas">今あるべきものの中に配置する必要があります。

<div id="canvas">
   <div id="canvas2">
     <!-- all the other code here -->
   </div>
  <div style="<!--Your footer styles here -->">
   <!-- footer content here -->
  </div>
</div>

あなたがそれをした後、あなたのウェブサイトはかなりめちゃくちゃに見えます. しかし、それはいくつかの css 属性を移動する必要があるためです。

現在、フッターはinline styling次のように使用しています。

style="width:100%;height:269px; background-image:url(img/footer_Wave.png); background-position:50% 0%; background-repeat:no-repeat; position:absolute;bottom:0;top:1500px;"

インライン スタイルを引き続き使用する場合は、次のように変更します。 style="width:100%;height:269px; background-image:url(img/footer_Wave.png); background-position:50% 0%; background-repeat:no-repeat; margin-top:50px"

次に、#canvasdiv に次のスタイルが適用されます。

#canvas {
 width: 1024px; 
 height: 1000px; 
 position: absolute; 
 z-index: 5000; 
 left: 50%; 
 margin-left: -512px;
}

これを次のように変更します。

#canvas {
 width: 100%; 
 position: absolute; 
 z-index: 5000;
}

最後に、#canvas2次のスタイルを指定します。

#canvas2 {
 width: 1024px; 
 margin:auto;
}

これでページごとに修正されるはずです。多くの変更があるように見えますが、実際にはそれほど多くはありません。お役に立てれば

于 2012-11-29T17:53:41.170 に答える
0

フッターを一番下に固定するために、ページの長さを指定する必要はまったくありません。

代わりにスティッキー フッターをお試しください。ネガを使用しているmargin-topため、実際のページの高さではなく、フッターの高さだけを知る必要があります。さまざまなページの高さがある場合、これは非常に役立ちます。

于 2012-11-29T16:21:27.693 に答える