图像下方的空白 - 显示：块不能正常工作

我的标题有一个图像，并试图在图像上放置文本块以使图像的一部分“可点击”。但是，当我这样做时，标题下方和身体上方的空白显示出来。图像下方的空白 - 显示：块不能正常工作

有谁知道我该如何解决这个问题？图：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

图像下方的空白 - 显示：块不能正常工作

回答

相关问题