Ajuda com figcaption

Gabriel Castro · Agosto 3, 2017

Olá, estou fazendo um curso de HTML5 no cursoemvideo.com, aprendi muita coisa. Mas fui testar meus conhecimentos e adicionei uma imagem e legenda a minha página com:
<figure class="foto">
<img src="local da imagem"/>
<figcaption> legenda </figcaption>
</figure>
Logo depois fui para o arquivo css fazer a formatação. Mas a legenda não fica dentro da imagem de jeito nenhum.
A formatação no css está:
figure.foto img{
position: relative;
width: 100%;
height: 100%;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}
figure.foto figcaption{
position: absolut;
top: 0px;
width: 100%;
height: 100%;
}
Enfim, se alguém poder me ajudar agradeço.

devin · Agosto 3, 2017

Gabriel, com um código pouco diferente do seu, consegui chegar no seu resultado, conforme o print. Segue abaixo o código utilizado:

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:25px;}

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  text-align: center;
  padding: 10px 20px;
}

.bottomleft {
    position: absolute;
    bottom: 8px;
    left: 70px;
    font-size: 18px;
    color: white;
   }
</style>
</head>
<body>

<h2>Responsive Polaroid Images / Cards</h2>

<figure class="container">
  <img src="lights600x400.jpg"/>
    <div class="bottomleft">TESTE LEGENDA</div>
</figure>

</body>
</html>

Espero ter ajudado.

Gabriel Castro · Agosto 3, 2017

3 horas atrás, devin disse:

Gabriel, com um código pouco diferente do seu, consegui chegar no seu resultado, conforme o print. Segue abaixo o código utilizado:


<!DOCTYPE html>
<html>
<head>
<style>
body {margin:25px;}

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  text-align: center;
  padding: 10px 20px;
}

.bottomleft {
    position: absolute;
    bottom: 8px;
    left: 70px;
    font-size: 18px;
    color: white;
   }
</style>
</head>
<body>

<h2>Responsive Polaroid Images / Cards</h2>

<figure class="container">
  <img src="lights600x400.jpg"/>
    <div class="bottomleft">TESTE LEGENDA</div>
</figure>

</body>
</html>

Espero ter ajudado.

Me ajudou sim.
Muito obrigado, seguindo o que fez adaptei no meu e coloquei uma posicao relativa no meu figure.foto e ai a legenda ficou dentro
Obrigado mesmo

devin · Agosto 3, 2017

Fico feliz em ter ajudado!

Entrar

Ajuda com figcaption

Pergunta

Gabriel Castro

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

devin

Link para o comentário

Compartilhar em outros sites

Gabriel Castro

Link para o comentário

Compartilhar em outros sites

devin

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades