0
Good afternoon. How can I get items to be in the same place regardless of the screen used for the display? I use a 14 inch screen, when it displays the screen on a larger screen, the items are misaligned.
#tudo {
margin: 50px 0px 0px 23px;
}
.position_box {
position: relative;
width: 31%;
height: 10%;
background-color: #D9D9F3;
float: left;
margin-left: 20px;
margin-bottom: 20px;
}
.estilo:hover {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
-webkit-transition: 0.5s;
z-index: 1;
/*Faz o elemento ficar a cima dos outros*/
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: #000;
}
/*a:hover {
text-decoration: none;
font-size: 113%;
color: #000;
}*/
.titulo {
text-align: center;
font-weight: bold;
font-size: 14px;
}
.estilo_tab {
position: absolute;
padding-right: -30px;
width: -60%;
border-color: #000;
}
table td {
font-size: 14.5px;
}
<div id="tudo">
<a href="#">
<div class="position_box estilo">
<span class="titulo">
<p>Teste</p>
</span>
<table>
<p>Info</p>
<p>Info</p>
<p>Info</p>
</table>
</div>
</a>
<a href="#">
<div class="position_box estilo">
<span class="titulo">
<p>Teste</p>
</span>
<table>
<p>Info</p>
<p>Info</p>
<p>Info</p>
</table>
</div>
</a>
<a href="#">
<div class="position_box estilo">
<span class="titulo">
<p>Teste</p>
</span>
<table>
<p>Info</p>
<p>Info</p>
<p>Info</p>
</table>
</div>
</a>
</div>
Misaligned in what sense? Aren’t they centered on the page in the horizontal? Or does one item get bigger than another or fall to the bottom line? Try to give a few more details, and if possible put an image of how it is on your screen. You do not have to worry whether the monitor is 14inches or 42inches, you have to worry about the screen resolution, whether it is HD or 4K for example, whether the display is normal or retina, this can influence the layout, not the "screen size" understands...
– hugocsl
The sizes of the items do not change. Only on my 14 screen there are three items on top and three items on the bottom. Only when the screen is larger, there are two items on top instead of three, from the line break.
– Guilherme Wayne
You want to always have 3 items per line independent of screen width?
– hugocsl
That’s right Hugo. I want you to always display 3 items per line.
– Guilherme Wayne
Do you want to always have 3 items per line independent of the width of the screen? Actually the way you built the layout is kind of weird... Div inside A and not A inside Div. Table as P tag and not TR/TD. I think that first of all you should for a little while to study the basics of HTML, take advantage that you are starting and start the right way, have a lot of free material on Google and documentation available. It’s just a tip, the intention is to help you fish and not deliver the fish and you can not manage alone in the future
– hugocsl
Here’s some Portuguese material to help you. https://www.devmedia.com.br/como-cria-um-layout-de-duas-colunas-com-html-e-css/37239 and here too, it is very didactic and will help you not to waste time trying to fix things that are totally wrong and will disturb you in the future... http://pt-br.learnlayout.com/
– hugocsl
Thanks for the tip. I know I shouldn’t put <p> inside <table> and that <td> and <tr> are used. It is that I could not leave only 3 items per line. But it was worth it anyway. I will give a study in the material.
– Guilherme Wayne
Possible duplicate of Distribute <li> list in 3 columns
– hugocsl
https://answall.com/search?q=3+colunas
– hugocsl