Question

我的标题有一个图像，我试图在图像上放置一个文本块，以便制作图像的一部分＆＃34;可点击＆＃34;。但是，当我这样做时，标题下方和身体上方的空白区域会显示出来。

有谁知道我怎么能纠正这个？ Img：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>

Answer 1

你的标记中似乎有很多错误......我在尝试解决问题之前先解决这些问题 - 因为它可能会自动消失：

首先，请确保所有打开和关闭的元素彼此绑定（从下图中可以看出，您没有足够</div>就业...... body，head和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>

Answer 2

关闭.termos div并将图片用作background-image的{{1}}。

Answer 3

我在</div>之前向你的标记添加了一个结束<div class="meio">，并且空白间隙为我消失了。正如@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>

图像下方的空白区域 - 显示：阻止不起作用

3 个答案: