0

Estou criando meio que uma loja online, mas não estou conseguindo estilizar direito o meu HTML, eu gostaria que as <div>s vazias (coloquei div no exemplo só para ilustrar, mas na verdade são imagens), ficassem com o preço na parte de baixo, no caso criei uma outra div com a class .linha, mas o que está acontecendo, é que não estou sabendo manusear bem as posições.

Como eu faço isso?

Um exemplo de como eu quero:

Feito no Paint =D

O que eu tenho até agora:

.imagem {
	background-color: black;
	border-radius: 10px;
	width:200px;
	height:260px;
	margin-left: 55px;
}
.linha{
	bottom: 125px;
	background-color: #2aabd2;
	width: 200px;
	height: 40px;
	position: absolute;
    border: 4px solid #99ccff;
	border-radius: 0px 0px 10px 10px;
}
.pontocartao{
	text-align: center;
	font-family: "Arial Black";
	color: #000;
}
<div style="margin-top:100px">
	<div class="imagem"></div>
	<div class="imagem linha"><p class="pontocartao">10 pontos</p></div>
	<div class="imagem"></div>
	<div class="imagem linha"><p class="pontocartao">50 pontos</p></div>
	<div class="imagem"></div>
	<div class="imagem linha"><p class="pontocartao">50 pontos</p></div>
	<div class="imagem"></div>
	<div class="imagem linha"><p class="pontocartao">50 pontos</p></div>
	<div class="imagem"></div>
	<div class="imagem linha"><p class="pontocartao">50 pontos</p></div>
</div>

2 Respostas 2

1

Veja um artigo sobre galeria da W3schools que eu imagino combinar muito com o que você deseja fazer.

Para resumir o código seria esse:

div.gallery{margin:5px;border:1px solid #ccc}
div.gallery img{width:100%;height:auto}
div.desc{padding:15px;text-align:center;}
<div class="gallery">
<img src="https://i.imgur.com/p1DYtzb.png" alt="imagem">
<div class="desc">Descrição/no seu caso preço</div>
</div>

2
  • Esse link pode ser uma boa sugestão, mas sua resposta não terá validade se um dia o link deixar de funcionar. Além disso, é importante para a comunidade ter conteúdo aqui no site mesmo. Seria melhor incluir mais detalhes na sua resposta. Um resumo do conteúdo do link já ajudaria bastante! Saiba mais sobre o assunto neste item do nosso FAQ da Comunidade: Queremos respostas que contenham somente links?
    – user28595
    27/07/2017 às 18:30
  • Obrigado pela crítica 27/07/2017 às 18:48
0

Tente criar uma div onde ela vai conter tanto a imagem que você deseja quanto outra div com o preço. Feito isso tente colocar 'display: block' na imagem e na div do preço, isso fará com que o conteúdo da div mais externa fique uns sobre os outros.

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 .