2

私のヘッダーは画像を取得し、画像の一部を「クリック可能」にするために画像の上にテキストブロックを配置しようとしています。ただし、これを行うと、ヘッダーの下と本文の上に空白が表示されます。

誰かがこれを修正する方法を知っていますか？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>
4

3 に答える 3

3

マークアップにかなりの数のエラーがあるようです...問題を解決しようとする前に、まずそれらを修正します-自動的になくなる可能性があるため：

まず、すべての開いている要素と閉じている要素が互いに結合していることを確認します（下の画像からわかるように、十分に</div>使用されていません... body、head、htmlはすべて一致しないタグについて不平を言っています）。を追加する必要があり</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-imageます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 に答える