2

我的标题有一个图像，我试图在图像上放置一个文本块，以使图像的一部分“可点击”。但是，当我这样做时，会出现标题下方和正文上方的空白。

有谁知道我该如何纠正这个？图片：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>
4

3 回答 3

3

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

首先，确保所有打开和关闭元素相互关联（如下图所示，您没有足够的</div>工作量......主体、头部和 html 都在抱怨标签不匹配） . 您需要添加 a</head>并整理您的缩进将帮助您追踪未闭合的标签。

其次</br>不是标签，你应该使用<br />

显示错误标记的屏幕截图

如果您尝试下面的标记会发生什么？

<!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-16T16:27:04.847 回答
1

关闭.termos div并将图像用作background-imagefor img。

于 2012-09-16T16:44:44.113 回答
0

我</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>​
于 2012-09-16T16:35:55.100 回答