How to position one element in relation to another easily?

Question

How to position one element in relation to another easily?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I'm creating something like an online store, but I'm not able to stylize my HTML right, I'd like the <div>s empty (I put div in the example just to illustrate, but it's actually images), get the price on I have created a different div with class .linha , but what is happening is that I am not able to handle the positions well.

How do I do this?

An example of how I want to:

WhatIhavesofar:

.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

asked by anonymous 27.07.2017 / 20:05

2 answers

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' in the image and the price div, this will make the contents of the outer div stay one on top of the other.

27.07.2017 / 22:12

Know years, months, days, hours, etc ... That have passed since a certain date visualImg () is not defined at HTMLInputElement.onchange

score 1 · Accepted Answer

See a article about W3schools gallery that I imagine will closely match 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>