Home/ Questions/Q 8539703
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T11:25:46+00:00

My header got an image, and im trying to place a text block over

  • 0

My header got an image, and im trying to place a text block over the image in order to make a part of the image “clickable”. However, when i do that, a white space below the header and above the body shows up.

Does anyone know how can i correct this? Img: https://i.stack.imgur.com/dIC9F.jpg

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I added a closing </div> to your markup just before <div class="meio"> and the whitespace gap went away for me. As @pebbl said, you have a lot of markup errors, and correcting that one seems to have fixed your immediate concern.

    <!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>​
    • 0