CSS problem, page size

Asked

Viewed 27 times

-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.

html css

  • you are using the flex, so it is not working the top 50%

1 answer

0


Friend, I suggest you study some of the property display and position of css, fix all the elements so it is not the correct form. I redid your code using flexbox, hope I can help you.

        body {
            background: #fafafa;
        }
        .boxWrapper{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        } 
        .box{
            padding: 2rem;
            box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

        }      
        .form{
            display: block;
            padding: 10px;
            margin: 20px;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
    <div class="boxWrapper">
        <div class="box">
            <h1>Formulario</h1>
            <form action="">
                <input type="text" name="" id="" class="form">
                <input type="text" name="" id="" class="form">
                <input type="text" name="" id="" class="form">
                <input type="text" name="" id="" class="form" >
                <button type="submit" class="form">Enviar</button>
            </form>
        </div>
    </div>
</body>
</html>

Browser other questions tagged html css

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