Text accompany the div

Asked

Viewed 231 times

2

I have a chart that returns to me as follows:

inserir a descrição da imagem aqui

I would like the product name to follow the chart regardless of its size, but it is at the top. See below the code:

<td style='text-align: center;><div id="barras">
    <span>Cobre</span><div class='barra1'  data-toggle="tooltip" data-placement="right" style="background-color: #CD5C5C; height:50%; font-size: 12px; font-family: Arial">Valor: 5,0 <br> 29%</div>
</td>

CSS:

<style media="screen">
    #barras{
      position: relative;
      width:80px;
      height:130px;
    /*  float:left;*/
      margin: 0px 10px;
    }
    .barra1, .barra2, .barra3, .barra4{
      position: absolute;
      color:#FFF;
      padding:10px;
      height:130px;
      line-height:10px;
      margin-bottom: 5px;
      bottom: 0;
    }
    </style>
css

  • Young I’ll see if I make an answer for you, but keep in mind that div inside table is not cool... You are required to use table?

  • 1

    Fox, I didn’t really look at the @hugocsl answer, but I believe that a solution is to put the name with position Absolute inside the graph element and position it up, this way will always track the height of it.

  • 1

    @sam was right around that I did :), only I used an after with the name of the chart, aligned at the top with top:0 and thrown out of the column with translatey(-100%) which is the height of the element itself.

  • 1

    @hugocsl I saw later. It was very good and gave +1 with merits.

  • 1

    Thanks @sam tmj!

1 answer

3


Young I did this response based on your HTML, but it is not correct to use a block type element (a div in the case), within a table, because they have different scopes, one has display:table with children table-cell, the other is display:block.

Seen this I made a suggestion within what I understood is your problem... I used display:flex in div who now play the role of TD and a container that plays the role of table. With flex I can align the items in column form (column) and use the properties justify-content: center; and align-items: center; to center horizontally and vertically.

In relation to label of the graph column vc can create a pseudo-element for each column, and use a custom atributo guy data-texto to put the label in the content kind of: content: attr(data-texto); and in the div like this: <div data-texto="texto" ...> Then you put a top: 0; and transform: translateY(-100%); to place the text on the bar regardless of its size

See the example to better understand how it looks. I tried to touch your HTML as little as possible

.container {
	display: flex;
	justify-content: center;
	text-align: center;
	height: 130px;
	background-color: #ddd;
}
.container .barra {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 5px 0 5px;
	box-sizing: border-box;
	justify-content: flex-end;
}
.container .barra1 {
	width: 80px;
	background-color: #f00;
	margin: 0 10px;
	height: 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
}
.container .barra1::after {
	content: attr(data-texto);
	position: absolute;
	top: 0;
	transform: translateY(-100%);
	text-align: center;
}
<div class="container">
	<div class="barra">
		<div data-texto="texto 123 456" class='barra1' style="height:50px" data-toggle="tooltip" data-placement="right">Valor: 5,0 <br> 29%</div>
	</div>
	<div class="barra">
		<div data-texto="texto" class='barra1' style="height:75px; background-color: #ff0;" data-toggle="tooltip" data-placement="right">Valor: 5,0 <br> 60%</div>
	</div>
	<div class="barra">
		<div data-texto="paralelepípedo" class='barra1' style="height:100px; background-color: #0f0;" data-toggle="tooltip" data-placement="right">Valor: 5,0 <br> 90%</div>
	</div>
</div>

  • Hello Hugo. Right, I will follow your tips. Forgive me, I believe I was not very clear in my doubt. I would like the word Copper to be leaned against the top of the graphs, that is, it should follow regardless of the size.

  • 1

    @Fox.11 is now clearer :), I edited the answer to show how it does. I believe that even you keep your div structure within the table this solution of ::after can help you solve

  • 1

    Perfect Hugo. Thank you so much again.

  • 1

    @Fox.11 quiet young lady, just keep in mind this detail of the div on the table, but I believe the technique used here will solve in any case. Good luck there, tmj

Browser other questions tagged css

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