圖像下方的空白 - 顯示：塊不能正常工作

我的標題有一個圖像，並試圖在圖像上放置文本塊以使圖像的一部分「可點擊」。但是，當我這樣做時，標題下方和身體上方的空白顯示出來。圖像下方的空白 - 顯示：塊不能正常工作

有誰知道我該如何解決這個問題？圖：http://imgur.com/sE7iP

CSS

.meio { 
     background: url("http://www.oneideaperday.com/meio5.png"); 
     background-repeat: repeat-y; 
     background-position:50% 0%; 
     text-indent: 250px; 
      } 

    .img { 
     margin: 0; 
     padding: 0; 
     display: block; 
     vertical-align:bottom; 
     position:relative; top:5px; 
     text-align: center; 
      } 

    .image { 
      position:relative; 
      float:center; 
     text-align: center 
      } 

    .image .text { 
       opacity: 0; 
        position:absolute; 
        top:55px; 
        left:505px; 
        width:300px; 
        } 

    .img .termos { 
        position:absolute; 
        top:55px; 
        left:835px; 
        width:300px; 
       -webkit-transform: rotate(45deg); 
       -moz-transform: rotate(45deg); 
       font-size: 10px; 
       opacity: 0; 
        }

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="style.css" /> 
<body> 
    <div class="img"> 
    <img src="http://www.oneideaperday.com/header1.png" alt=""/> 
     <div class ="termos"> 
      <p>Termos de Uso</p> 
    </div> 

    <div class="meio"> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
    </div> 


    <div class="image"> 
     <img alt="" src="http://www.oneideaperday.com/footer.png" /> 
     <div class="text"> 
     <p><a href="http://www.acumula.com.br">Acumula.com.br</a></p> 
     </div> 
    </div> 

</body> 
</head> 
</html>

來源

2012-09-16 Gabriel Monteiro

我只是<div class="meio">之前添加了關閉</div>到您的標記和空白間隙走了我。正如@pebbl所說，你有很多標記錯誤，並且糾正這個錯誤似乎已經解決了你的直接問題。

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="style.css" /> 
<body> 
    <div class="img"> 
     <img src="http://www.oneideaperday.com/header1.png" alt=""/> 
     <div class ="termos"> 
      <p>Termos de Uso</p> 
     </div> 
    </div> 
    <div class="meio"> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
     a</br> 
    </div> 


    <div class="image"> 
     <img alt="" src="http://www.oneideaperday.com/footer.png" /> 
     <div class="text"> 
     <p><a href="http://www.acumula.com.br">Acumula.com.br</a></p> 
     </div> 
    </div> 

</body> 
</head> 
</html>

來源

2012-09-16 16:35:55 jimp

的確，它逃脫了！非常感謝Jimp和Pebbl –

你似乎有在您的標記相當多的錯誤...我想解決這些首先要解決的問題之前 - 因爲它可能會自動消失：

首先，確保所有打開和關閉的元素彼此相連（正如您可以從圖像中看到的一樣w，你沒有足夠的</div>僱用...身體，頭部和html都抱怨不匹配的標籤）。您需要添加一個</head>並整理縮進將幫助您追蹤未封閉的標籤。

其次</br>不是一個標籤，你應該用<br />

Screenshot showing incorrect markup

，如果你嘗試下面的標記，會發生什麼？

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="style.css" /> 
    </head> 
    <body> 
    <div class="img"> 
     <img src="http://www.oneideaperday.com/header1.png" alt="" /> 
     <div class="termos"> 
     <p>Termos de Uso</p> 
     </div> 
     <div class="meio"> 
     a<br /> 
     a<br /> 
     a<br /> 
     a<br /> 
     a<br /> 
     a<br /> 
     a<br /> 
     a<br /> 
     a<br /> 
     a<br /> 
     a<br /> 
     a<br /> 
     </div> 
     <div class="image"> 
     <img alt="" src="http://www.oneideaperday.com/footer.png" /> 
     <div class="text"> 
      <p><a href="http://www.acumula.com.br">Acumula.com.br</a></p> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

來源

2012-09-16 16:27:04 Pebbl

感謝您對矯正pebbl的幫助，但是空白處仍然存在：http：//www.oneideaperday.com/base.html –

沒問題。好吧，現在你已經有了HTML排序，你需要在你的圖像上應用'display：block'。當內聯顯示時，圖片會自動圍繞它們（這在跨瀏覽器的情況下會發生變化），所以最好提供一個允許您通過'display：block;'使用圖片的佈局。這也似乎我已經錯誤地設置你的div，jimp的答案看起來像他有正確的div。但吉普的標記仍然爲我產生了一條細白線。 – Pebbl

關閉.termosdiv並使用圖像作爲用於background-imageimg。

來源

2012-09-16 16:44:44 Ana

圖像下方的空白 - 顯示：塊不能正常工作

回答

相關問題