How to position one element in relation to another easily?

Asked

Viewed 969 times

0

I’m creating kind of an online store, but I’m not getting to stylize my HTML right, I’d like to <div>s empty (I put div in the example just to illustrate, but in fact are images), stay with the price at the bottom, in case I created another div with the class .linha, but what’s happening is that I’m not sure how to handle the positions well.

How do I do it?

An example of how I want:

Feito no Paint =D

What I have so far:

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

html css

2 answers

1


See a article about W3schools gallery that I imagine to match a lot with what you want to do.

To summarize the code would be this:

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>

  • This link may be a good suggestion, but your reply will not be valid if one day the link crashes. In addition, it is important for the community to have content right here on the site. It would be better to include more details in your response. A summary of the content of the link would be helpful enough! Learn more about it in this item of our Community FAQ: We want answers that contain only links?

  • Thanks for the review

0

Try to create a div where it will contain both the image you want and another div with the price. Once this is done try to put 'display: block' on the image and on the div of the price, this will make the contents of the outermost div stay on each other.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.