1

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:
Note que mesmo na resolução máxima há uma linha branca abaixo do h2

Conforme a tela é redimensionada e fica menor:
Uma faixa branca é adicionada abaixo da imagem

1 Resposta 1

1

Isto está a acontecer porque estás a usar position:relative; no teu título h2.

isto pode ser resolvido movendo o atributo position:relative; para a tua li e dando um position:absolute; ao teu h2 em vez de relative para poderes alcançar o estilo pretentido:

li {position:relative;}
h2 {position:absolute; bottom:0;}

No entanto eu reparei em vários erros de marcação no teu código HTML, e a estrutura do teu CSS também pode ser melhorada, aqui está o código com todos os erros corrigidos e melhorado:

Podes também ver um exemplo online aqui: http://jsfiddle.net/xv2h4utc/

<section id="first">
    <h1> Recomendações da semana </h1>
        <ul>
            <li class="reco-li">
                <a href="http://myanimelist.net/anime/10793/Guilty_Crown" target="_blank">
                <img src="img/gc.png"/><h2>Guilty Crown</h2>
                </a>
            </li>
            <li class="reco-li">
                <a href="http://myanimelist.net/anime/11757/Sword_Art_Online" target="_blank">
                <img src="img/sao.png"/><h2>Item 1</h2>
                </a>
            </li>
            <li class="reco-li">
                <a href="http://myanimelist.net/anime/12189/Hyouka" target="_blank">
                <img src="img/hyouka.png"/><h2>Hyouka</h2>
                </a>
            </li>
            <li class="reco-li">
                <a href="http://myanimelist.net/anime/11887/Kokoro_Connect" target="_blank">
                <img src="img/kkr_con.png"/><h2>Kokoro Connect</h2>
                </a>
            </li>
        </ul>
</section>
.reco-li {
    position: relative;
    float: left;
    width: 25%;
    max-height: 306px;
    margin: 0;
    cursor: pointer;
}
#first{
    width: 90%;
    max-width: 1440px;
    margin: 0 auto;
    margin-bottom: 25px;
    background-color: white;
    overflow: hidden;
}
.reco-li h2{
    width: 100%;
    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: absolute;
    bottom: 0;
}
#first ul{
    margin: 0;
    width: 100%;
    padding: 0;
    list-style: none;
    display: table-cell; /* isto é uma correcção para poder usar a border abaixo correctamente */
    border: 5px solid #000;
}

.reco-li img{
    width: 100%;
}

A class #first:after não está aqui a fazer nada, mas se por alguma razão precises de usar clear:both; cria uma class especialmente para esta propriedade e usa-o da seguinte maneira:

<div class="clear"></div>
.clear {clear:both;}
2
  • Realmente, resolveu o problema. Quanto à organização das marcações que você passou, também resolveu outro problema que surgiu após implementar as alterações. Muito obrigado!
    – Frost
    25/05/2015 às 11:34
  • De nada @Frost :) provavelmente o outro problema deverá ter sido por causa disto: <section id=#first> no teu código HTML que eu modifiquei e consertei para <section id="first"> na minha resposta. Existiam outros erros também, mas este era o mais relevante. Este tipo de erros de marcação podem fazer com o código deixe de funcionar ou que algum estilo CSS não seja implementado correctamente. Happy Coding =)
    – Chun
    25/05/2015 às 12:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .