Ir para conteúdo
Fórum Script Brasil

Gabriel Castro

Membros
 Perfil  Explorar Conteúdo

  • Total de itens

    2

  • Registro em

  • Última visita

 Tipo de Conteúdo 

Posts postados por Gabriel Castro

  1. Ajuda com figcaption

    em Tutoriais & Dicas - HTML, XHTML, CSS

    Postado

    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

  2. Ajuda com figcaption

    em Tutoriais & Dicas - HTML, XHTML, CSS

    Postado

    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.

×
×
  • Criar Novo...