0
Good afternoon, I’m learning position and wanted to know what the error in this code, because the images stay in the position I want when the screen is full, but when the screen is resized they change the position a little, Can someone help me so that they stay in the same position regardless of screen size?
My code:
@keyframes pular{
0%, 20%, 60%, 100%{
-webkit-transfomr: translateY(0);
transform: translateY(0)
}
40%{
-webkit-transfomr: translateY(-20px);
transform: translateY(-20px)
}
80%{
-webkit-transfomr: translateY(-10px);
transform: translateY(-10px)
}
}
.pulo:hover{
animation: pular 1s;
}
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.margem-esquerda{
margin-left: -20%;
}
.video{
max-width:100%;
height:auto;
right: 0;
bottom: 0;
position:relative;
}
#imagem-position{
position:absolute;
top:0%;
right:0%;
margin-top:47%;
margin-right: 36%;
max-width: 30%;
max-height: 59%;
padding-top: 10%;
margin-left: 10%;
}
/*#imagem-position2{
position:absolute;
bottom: 0%;
right: 0%;
margin-right: 25%;
}
*/
.transicao{
max-width:100%;
height:auto;
right: 0;
bottom: 0;
margin-top: -10%;
}
.circulo{
max-width:100%;
height:auto;
right: 0;
bottom: 0;
position:relative;
top:0%;
margin-top: -105%;
}
.pedra{
max-width:48%;
height:auto;
right: 0;
bottom: 0;
position:absolute;
top:0%;
margin-top:55.5%;
margin-right: 26%;
margin-left:-10%;
}
#sombra{
max-width:100%;
height:auto;
right: 0;
bottom: 0;
top:0%;
position:relative;
margin-top: -1%;
margin-left:0%;
}
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Pokemon Generations</title>
<link rel="icon" href="Logo/Dream_Poké_Ball_Sprite.png">
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial scale=1.0">
<meta name="author" content="Daniel Lucas">
<meta name="description" content="Tela Inicial do site">
<meta name="keywords" content="pokémon,bingo,história">
<link rel="stylesheet" href="estilo.css">
<link rel="stylesheet" href="node_modules/bootstrap/compiler/bootstrap.css">
<link rel="stylesheet" href="node_modules/bootstrap/compiler/style.css">
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<body style="background-image:url(Fundo/fundo_triangulo_roxo.png)">
<nav class="navbar sticky-top navbar-expand-lg navbar-dark" style="background-color:#38102b; overflow:auto;" >
<div class="container fixado">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSite" >
<ul class="navbar-nav">
<img>
<li class="nav-item"><a class="nav-link mt-2" class="margem-esquerda"href="#"><button type="button" class="btn btn-outline-warning" class="ml-1"><img src="Icones/icone_personagens_gold.png" >Personagens</button></a></li>
<li class="nav-item"><a class="nav-link mt-2" class="margem-esquerda"href="#"><button type="button" class="btn btn-outline-warning" class="ml-1"><img src="Icones/icone_comojogar_gold.png" >Como jogar</button></a></li>
<li class="nav-item"><a class="nav-link mt-2" href="#"><button type="button" class="btn btn-outline-warning" class="ml-1"><img src="Icones/icone_jogar_gold1.png" >Jogar</button></a></li>
<a class="navbar-brand h1 mb-0 " href="site_inicial.htm"><img src="Logo/shining_legends.png"></a>
<li class="nav-item"><a class="nav-link mt-2" href="#"><button type="button" class="btn btn-outline-warning" class="ml-1"><img src="Icones/icone_atualizacoes_gold.png" >Atualizações</button></a></li>
<li class="nav-item "><a class="nav-link mt-2" href="#"><button type="button" class="btn btn-outline-warning" class="ml-1"><img src="Icones/icone_quemsou_gold.png" >Quem Sou</button></a></li>
<li class="nav-item " id="charmander"><a class="navbar-brand h1 mb-0 pulo mt-2" target="_blank" href="https://www.youtube.com/channel/UC6VdsMMnL-GdcoKc9qZEtQA?disable_polymer=true"><img src="Icones/icone_charmander.png"></a></li>
<li class="nav-item"><a class="navbar-brand h1 mb-0 pulo mt-2" target="_blank " href="http://api.whatsapp.com/send?1=pt_BR&phone=5584996011922"><img src="Icones/icone_bulbasaur.png"></a></li>
<li class="nav-item"><a class="navbar-brand h1 mb-0 pulo mt-2" target="_blank" href="https://twitter.com/LegendsShining"><img src="Icones/icone_squirtle.png"></a></li>
</ul>
</div>
</div>
</nav>
<div>
<video class="video" autoplay loop muted="true" >
<source src="Fundo/fundo_prisma_full.mp4" type="video/mp4" >
</video>
<img src="Fundo/fundo_preto_best_oficial_real_oficial.png" id="sombra">
<img src="Fundo/fundo_circulo_cinza.png" class="circulo">
<img src="Fundo/fundo_placa_pedra_dourado_novo.png" class="pedra">
<img src="Fundo/1200px-Shining_Legends_Logo.png" id="imagem-position">
</div>
<div style="width:100%;height:600px;margin-top:-1%; margin-bottom:20%; background-color:black;">
</div>
</body>
</html>full screen photo:
Photo of the resized screen:
NOTE: If someone wants the file of the program with the images and videos I send by email
Your margin and padding measurements are all in %, so with percentage values it is common on screens with different sizes elements change position... Try using pixel values for these things that will make it easier for you
– hugocsl
But is it resized? Because so, my teacher kind of encouraged us to use % because of the resizing and Talz.
– Akali
Avoid measures in % mainly in padding, because the padding in % is relative to the container width, does not work exactly as you imagine... try to leave the% for width, height and margin in some cases, but not for padding. Another thing, you did not make it clear how you want the image to be on small screens. Nomo the image should be when on smaller screens??
– hugocsl
I wanted them to look exactly the way they look in full screen, or else the nearest.
– Akali