1

下の画像の上にヘッダー画像を配置して、HTMLとCSSでバケットを作成しようとしています。これをdreamweaverで行うと、2つのオブジェクトの間にギャップはありません。ただし、サーバーにアップロードすると、2つの画像の間にギャップが生じます。ヘルプや提案はありますか？

ここに画像の説明を入力してください

 <div class="wrapBucketInnerLeft">
        <div class="bucketLeft">
            <h2 class="bucketHeader"><img src="images/bucket_header_text_basic.png" width="212" height="36" alt="Basic Plan" /></h2></td></tr>

            <div class="bucketDetails">
            <ul>
                <li>Feature 1</li>
                <li>Feature 2</li>
                <li>Feature 3</li>
                <li>Feature 4</li>
            </ul> 
            <div class="bucketBottom">               
            <p class="cost">$1.95</p>
            <a href="#"><img class="button" src="images/button_bucket.png" width="117" height="42" alt="Learn More" /></a></div>
        </div>
        </div>
         <!--Bucket 2-->

        <div class="bucketRight">
            <h2 class="bucketHeader"><img src="images/bucket_header_text_economy.png" width="212" height="36" alt="Basic Plan" /></h2>
            <div class="bucketDetails">
                <ul>
                    <li>Feature 1</li>
                    <li>Feature 2</li>
                    <li>Feature 3</li>
                    <li>Feature 4</li>
                </ul>                
                <div class="bucketBottom">               
                <p class="cost">$1.95</p>
                <a href="#"><img class="button" src="images/button_bucket.png" width="117" height="42" alt="Learn More" /></a></div>
        </div>
        </div>
        </div>

CSS：

.bucketHeader {
background-image:url(images/bg_header_bucket.png);
background-repeat:no-repeat;
background-position:top center;
height:46px;
margin:0px 0px 0px 0px;
    padding:14px 0px 0px 18px;
}

.bucketDetails {
    background-image:url(images/bg_bucket.png);
    background-repeat:no-repeat;
    background-position:top center;
    height:278px;
    margin:0px 0px 0px 0px;
    padding:0px;
}

.bucketBottom p.cost {
    font-size:28px;
    font-weight:bold;
    color:#335191;
    margin:0px 0px 6px 0px;
    padding:0px;
}
.bucketBottom{
    text-align:center;

}
a img.button {
    border:none;
}
4

2 に答える 2

1

よく私はそれが何であるかを知っています！のパディング.bucketHeader

.bucketHeader {
background-image:url(images/bg_header_bucket.png);
background-repeat:no-repeat;
background-position:top center;
height:46px; // here reduce the height of this div until the gap between them is removed, i think it should be 28px
margin:0px 0px 0px 0px;
padding:14px 0px 0px 18px; // here you see you have given padding of 14px of both top and bottom, this increases the height of div magically which you can't see because your image has background-repeat:no-repeat
}
于 2012-12-22T15:55:17.857 に答える
0

なぜ背景画像を使用しているのですか？ヘッダーと下部の画像が、このように右側のピクセルオフセットのようになっていることがわかりますか？代わりに、画像を含むdivを使用し、position：relativeを配置しないでください。仕事を成し遂げるためにtop：0px。画像とオフセットトップを備えたdivの上にz-indexが高いdiv内に必要なテキストを配置できます:-(他のdivの高さが何であれ）pxまたはleft :(幅が何であれ）px？

ちょっとした考え。

乾杯！

于 2012-12-22T15:58:34.650 に答える