Ir para conteúdo
Fórum Script Brasil
  • 0

Ajuda com figcaption


Gabriel Castro

Pergunta

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.

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0

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.

Capturar.PNG

Link para o comentário
Compartilhar em outros sites

  • 0
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.

Capturar.PNG

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

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...