初學者：在創建HTML桶和CSS

我試圖通過放置一個標題圖片在底部圖像的頂部創建HTML和CSS桶。當我在Dreamweaver中這樣做時，兩個對象之間沒有間隙。但是，當我將其上傳到服務器時，兩張圖像之間會出現間隙。任何幫助或建議？初學者：在創建HTML桶和CSS

enter image description here

<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; 
}

來源

2012-12-22 Drew

嗯，我知道它是什麼！的.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-22 15:55:17

我需要減少.bucketDetails的高度。謝謝！ – Drew

爲什麼填充您使用的背景圖片？您是否看到標題和底部圖像像這樣在右側像素偏移？爲什麼不使用div中的圖像，而不要放置位置：relative;頂部：0px完成工作。你可以把任何你想要的文本放在一個具有較高z-index的div上面，並將圖像放在div的頂部：of-top（無論另一個div的高度是多少）px或left：（不管寬度是多少）px？

只是一個想法。

乾杯！

來源

2012-12-22 15:58:34 vlex

初學者：在創建HTML桶和CSS

回答

相關問題