Sou iniciante em HTML e CSS e estou fazendo um trabalho de tema livre para o meu curso, mas acabei empacando em um ponto.
Tenho o seguinte código em um trecho do meu HTML:
<section id=#first>
<h1> Recomendações da semana </h1>
<ul>
<a href="http://myanimelist.net/anime/10793/Guilty_Crown" target="_blank">
<li><img src="img/gc.png"/><h2>Guilty Crown</h2></li>
</a>
<a href="http://myanimelist.net/anime/11757/Sword_Art_Online" target="_blank">
<li><img src="img/sao.png"/><h2>Item 1</h2></li>
</a>
<a href="http://myanimelist.net/anime/12189/Hyouka" target="_blank">
<li><img src="img/hyouka.png"/><h2>Hyouka</h2></li>
</a>
<a href="http://myanimelist.net/anime/11887/Kokoro_Connect" target="_blank">
<li><img src="img/kkr_con.png"/><h2>Kokoro Connect</h2></li>
</a>
</ul>
</section>
Para a section, a altura é automática (height: auto;
), assim como para o li
. O que eu quero é que a altura desses containers seja igual à altura da imagem, uma vez que o h2
fica por cima dela. Porém, conforme a tela é redimensionada, uma faixa branca vai sendo adicionada ao container (creio que seja a altura+padding do h2
).
Gostaria de saber como eu faço para ignorar a altura do h2
, restando apenas a altura da imagem no container.
Segue o código usado no CSS:
#first{
width: 90%;
max-width: 1440px;
height: auto;
margin: 0 auto;
margin-bottom: 25px;
background-color: white;
overflow: hidden;
}
#first:after{
clear: both;
content: "";
display: block;
}
section h2{
width: 100%;
height: 35px;
margin: 0;
background-color: rgba(0, 0, 0, 0.6);
color: white;
font-family: calibri;
font-size: 18px;
font-weight: 100;
text-align: center;
padding-top: 12px;
position: relative;
bottom: 47px;
}
section ul{
margin: 0;
height: auto;
float: left;
width: 100%;
padding: 0;
list-style: none;
}
section ul a li{
float: left;
width: 25%;
height: auto;
max-height: 306px;
margin: 0;
overflow: hidden;
cursor:pointer;
}
section ul a li img{
width: 100%;
height: auto;
}
O resultado final com a tela cheia:
Conforme a tela é redimensionada e fica menor: