CODEWITHSUNDEEP
htmlcss
Aaron T
Aaron T

Reputation: 47

How to keep items in the center in html page

Im creating a project to help me fully understand html and css. I decided to make a simple login page that if the user successfully put in data they can go to the next page and if not an alert will pop up saying invalid information try again, Currently I have my page working except for the looks. I am having issues keeping the page centered unless the browser is in an exact size, so if the I have the window smaller everything is looks unorganized. How do I fix this?

This is the background

Image if the screen is normal size

What it looks like if window size is moved 

body{
  margin: auto;
  padding: auto;
  background-image: url("BackgroundAxure.jpg");
  position: absolute;
  background-size: cover;
  background-position: center;
  font-family: sans-serif;
}
.form_sketch {
  border-color:transparent;
  background-color:transparent;
}
#base {
  position:absolute;
  z-index:0;
}

#Box {
  border-width:0px;
  position:absolute;
  left:568px;
  top:221px;
  width:812px;
  height:639px;
  display:flex;
}
#GreenLine_img {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:812px;
  height:26px;
}
#GreenLine {
  border-width:0px;
  position:absolute;
  left:568px;
  top:220px;
  width:812px;
  height:26px;
  display:flex;
}
#Logo_img {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:300px;
  height:46px;
}
#Logo {
  border-width:0px;
  position:absolute;
  left:595px;
  top:270px;
  width:300px;
  height:46px;
  display:flex;
}
#h1_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:131px;
  height:62px;
  background:inherit;
  background-color:rgba(255, 255, 255, 0);
  border:none;
  border-radius:0px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  font-family:'Poppins', sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:39px;
  color:#828282;
}
#h1 {
  border-width:0px;
  position:absolute;
  left:599px;
  top:344px;
  width:131px;
  height:62px;
  display:flex;
  font-family:'Poppins', sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:39px;
  color:#828282;
}
#Username_input {
  position:absolute;
  left:0px;
  top:0px;
  width:700px;
  height:57px;
  padding:2px 2px 2px 2px;
  font-family:'ArialMT', 'Arial', sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:13px;
  letter-spacing:normal;
  color:#000000;
  vertical-align:none;
  text-align:left;
  text-transform:none;
  background-color:transparent;
  border-color:transparent;
  /* Usename FONT SIZE */
  font-size: 22px;
}
#Username_input.disabled {
  position:absolute;
  left:0px;
  top:0px;
  width:700px;
  height:57px;
  padding:2px 2px 2px 2px;
  font-family:'ArialMT', 'Arial', sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:13px;
  letter-spacing:normal;
  color:#000000;
  vertical-align:none;
  text-align:left;
  text-transform:none;
  background-color:transparent;
  border-color:transparent;
}
#Username_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:700px;
  height:57px;
  background:inherit;
  background-color:rgba(255, 255, 255, 0.996078431372549);
  box-sizing:border-box;
  border-width:2px;
  border-style:solid;
  border-color:rgba(1, 104, 71, 1);
  border-radius:5px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
}
#Username {
  border-width:0px;
  position:absolute;
  left:595px;
  top:483px;
  width:700px;
  height:57px;
  display:flex;
}
#Username .text {
  position:absolute;
  align-self:center;
  padding:2px 2px 2px 2px;
  box-sizing:border-box;
  width:100%;
}
#Password_input {
  position:absolute;
  left:0px;
  top:0px;
  width:700px;
  height:57px;
  padding:2px 2px 2px 2px;
  font-family:'ArialMT', 'Arial', sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:13px;
  letter-spacing:normal;
  color:#000000;
  vertical-align:none;
  text-align:left;
  text-transform:none;
  background-color:transparent;
  border-color:transparent;
  /* PASSWORD FONT SIZE */
  font-size: 22px;
}
#Password_input.disabled {
  position:absolute;
  left:0px;
  top:0px;
  width:700px;
  height:57px;
  padding:2px 2px 2px 2px;
  font-family:'ArialMT', 'Arial', sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:13px;
  letter-spacing:normal;
  color:#000000;
  vertical-align:none;
  text-align:left;
  text-transform:none;
  background-color:transparent;
  border-color:transparent;
  
}
#Password_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:700px;
  height:57px;
  background:inherit;
  background-color:rgba(255, 255, 255, 0.996078431372549);
  box-sizing:border-box;
  border-width:2px;
  border-style:solid;
  border-color:rgba(1, 104, 71, 1);
  border-radius:5px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
}
#Password {
  border-width:0px;
  position:absolute;
  left:595px;
  top:634px;
  width:700px;
  height:57px;
  display:flex;
  
}
#Password .text {
  position:absolute;
  align-self:center;
  padding:2px 2px 2px 2px;
  box-sizing:border-box;
  width:100%;
  
}
#Password_div.disabled {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:700px;
  height:57px;
  background:inherit;
  background-color:rgba(240, 240, 240, 1);
  box-sizing:border-box;
  border-width:2px;
  border-style:solid;
  border-color:rgba(1, 104, 71, 1);
  border-radius:5px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
}

#u12_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:336px;
  height:32px;
  background:inherit;
  background-color:rgba(255, 255, 255, 0);
  border:none;
  border-radius:0px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  font-family:'Poppins', sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:20px;
  color:#373737;
}
#u12 {
  border-width:0px;
  position:absolute;
  left:595px;
  top:441px;
  width:336px;
  height:32px;
  display:flex;
  font-family:'Poppins', sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:20px;
  color:#373737;
}
#u12 .text {
  position:absolute;
  align-self:flex-start;
  padding:0px 0px 0px 0px;
  box-sizing:border-box;
  width:100%;
}
#u12_text {
  border-width:0px;
  word-wrap:break-word;
  text-transform:none;
}
#u13_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:336px;
  height:32px;
  background:inherit;
  background-color:rgba(255, 255, 255, 0);
  border:none;
  border-radius:0px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  font-family:'Poppins', sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:20px;
  color:#373737;
}
#u13 {
  border-width:0px;
  position:absolute;
  left:595px;
  top:597px;
  width:336px;
  height:32px;
  display:flex;
  font-family:'Poppins', sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:20px;
  color:#373737;
}
#u13 .text {
  position:absolute;
  align-self:flex-start;
  padding:0px 0px 0px 0px;
  box-sizing:border-box;
  width:100%;
}
#u13_text {
  border-width:0px;
  word-wrap:break-word;
  text-transform:none;
}
.Login input[type="submit"]
{
  left:782px;
  top:758px;
  border-width:0px;
  position:absolute;
  width:326px;
  height:46px;
  background:inherit;
  background-color:rgba(1, 104, 71, 1);
  color: white;
  border:none;
  border-radius:5px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  font-family:'Poppins-Medium', 'Poppins Medium', 'Poppins', sans-serif;
  font-weight:500;
  font-style:normal;
  font-size:21px;
}
.Login input[type="submit"]:hover
{
    cursor: pointer;
    background: lightgreen;
    color: #fff;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Login page</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/login_page/styles.css" type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <div id="base" class="">

        <!-- MainBox -->
        <div id="Box">
          <img id="Box_img" class="img " src="images/login_page/u6.svg"/>
        </div>

        <div id="GreenLine">
          <img id="GreenLine_img" class="img " src="images/login_page/u7.svg"/>
        </div>

        <!-- Logo -->
        <div id="Logo">
          <img id="Logo_img" class="img " src="images/login_page/u8.svg"/>
        </div>

        <div id="h1">
            <p><span>Log in</span></p>
          </div>
        </div>

        <!-- Username textbox -->
        <div id="Username">
          <div id="Username_div" class=""></div>
          <input id="Username_input" type="text" value=""/>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u12">
          <div id="u12_div" class=""></div>
          <div id="u12_text" class="text ">
            <p><span>Username:</span></p>
          </div>
        </div>

        <!-- Password textbox -->
        <div id="Password">
          <div id="Password_div" class=""></div>
          <input id="Password_input" type="text" value=""/>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u13" class="ax_default paragraph">
          <div id="u13_div" class=""></div>
          <div id="u13_text" class="text ">
            <p><span>Password:</span></p>
          </div>
        </div>
        <!-- Login Button -->
        <!-- Unnamed (Rectangle) -->
        <div id="Login" class="Login">
          <div id="Login_div" class=""></div>
          <div id="Login_text" class="text ">
            <input type="submit" name="" value="Log in" >
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 0

Views: 126

Answers (2)

Liliana Violet
Liliana Violet

Reputation: 11

So what I usually like to do with this kind of stuff is create your website in css grid. This way you can make sure that everything stays in the position that you want it to be in. A good website for explaining how this works is: https://learncssgrid.com/

One other point is that you should also make use of media queries. Say that you make a grid of 3 by 3 and your log in field in in the middle (so coordinates 2,2) it will stay in the middle. But if you use say a phone for visiting this website, then you can put in a media query that the left and right columns have a width of 20px instead of 300px for example.

Upvotes: 1

Stairss
Stairss

Reputation: 176

So at the begining you should read a article about RWD (Responsive Web Design). There are many things to improve:

  1. Try to avoid styling everything in positions absolute and relative because it's parent-child related and you are making really deep connections inside elements.
  2. I would recommend you to use flexbox or grid to position everything on page. It's responsive and will scal to almost any resolution.
  3. Instead of using absolute units px, you should use realtive units like: em, rem, vh, vw
  4. If something looks bad in resolutions use @media and simply change the look of layout.
  5. Instead of using everything above learn about aby type of library like Bootstrap :)

Upvotes: 0

Related Questions