0

簿記サービスのために取り組んでいるサイトデザインがあります。

http://digitaldemo.net/vintage/home.html

全体的な「見た目」は、あぶらとりのそれであると思われます。すべてが全面的に正しくレンダリングされていますが、1つの問題があります。

メインコンテンツ領域(「デスクブロッター」)を上下の境界線に重ねようとしています。

ページ全体の背景はシームレスにタイリングされた画像(明るい茶色/金色)で、上部の境界線はDIV(#section-head)で、背景は半透明のPNGで、下部の境界線DIV(#section-foot)は同じ半透明の背景も。

私の「デスクブロッター」は、次のCSSを使用して上部の境界線をオーバーラップする#containerDIV内にあります。

#container  { clear:both ;
width:1002px ;
margin:auto ;
background:url("images/paper-bg.jpg") ;
min-height:600px ;
position:relative ;
top:-40px ;
-webkit-box-shadow: #0e0300 0px 0px 14px;
-moz-box-shadow: #0e0300 0px 0px 14px;
box-shadow: #0e0300 0px 0px 14px;
behavior: url("PIE.htc");
z-index:1000 ;
}

それはすべてうまく機能します。問題は、#containerDIVの下部に-40pxの上部の位置に等しいギャップを強制することです。

したがって、2つの質問:

a。どうすればそのギャップを取り除くことができますか。b。「デスクブロッター」を下の境界線にも重ねるにはどうすればよいですか?

どうもありがとう!

4

1 に答える 1

0

完全に理解しているかどうかはわかりませんが、ブロッターをフッターとオーバーラップさせるには、次のcssを追加できます。

#section-foot {
    position: relative;
    top: -80px;
}

追加のコンテンツがある場合は、ここからフッターの上部にパディングを追加することをお勧めします。

于 2012-08-06T22:42:54.543 に答える