My header features an image, and I am attempting to overlay a text block on the image to create a clickable area. However, when I do this, a white space appears below the header and above the body.
Does anyone have a solution for this issue? Image: https://i.sstatic.net/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>