-1
I’m starting in HTML and CSS and I don’t know how to configure the positions of the objects in the page. My CSS:
#Register_BackGround_Img{
width: 400px;
position: fixed;
top: 19%;
right: 42%;
height: 450px;
box-shadow: 2px 2px 8px black;
}
#Register_Position0_BackGround{
}
#Register_Position1{
}
#Register_Img_Logo{
position: fixed;
width: 184px;
height: 64px;
top: 20%;
right: 50%;
}
#Register_Input_Name{
position: fixed;
height: 26px;
top: 29%;
width: 236px;
right: 50%;
}
#Register_Input_Email{
position: fixed;
height: 26px;
width: 236px;
top: 36%;
right: 50%;
}
#Register_Input_Pass{
position: fixed;
height: 26px;
width: 236px;
top: 44%;
right: 50%;
}
#Register_Input_ConfirmPass{
position: fixed;
height: 26px;
width: 236px;
top: 52%;
right: 50%;
}
#Register_Button{
position: fixed;
height: 33px;
width: 106px;
top: 59%;
right: 50%;
}
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Cadastre-se</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Register_CSS.css">
</head>
<body>
<div id="Register_Position0_BackGround">
<img id="Register_BackGround_Img" src="Images/BackGround_White.png" alt=""/>
</div>
<div id="Register_Position1">
<img id="Register_Img_Logo" src="Images/Logo.png" alt="Logo"/>
<input id="Register_Input_Name" type="text" name="Name" value="" />
<input id="Register_Input_Email" type="text" name="Email" value="" />
<input id="Register_Input_Pass" type="password" name="Pass" value="" />
<input id="Register_Input_ConfirmPass" type="text" name="ConfirmPass" value="" />
<input id="Register_Button" type="submit" value="Cadastrar" />
</div>
</body>
</html>
Problem: Video of the prblema
As you can see, all this bugging. Objects don’t stay in their proper place when I touch the page. How can I fix this?
And as I do to use percentage on the page, when I put top : 50%; the Object does not really go to half the page.
you are using the flex, so it is not working the top 50%
– Murilo Melo