Jump to content
Fórum Script Brasil
  • 0
Sign in to follow this  
Gabriel Castro

Ajuda com figcaption

Question

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.

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 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

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  



  • Forum Statistics

    • Total Topics
      148497
    • Total Posts
      644158
×
×
  • Create New...