CODEWITHSUNDEEP
htmlcss
Ne7WoRK
Ne7WoRK

Reputation: 161

CSS & HTML Moving elements

I am currently working on a website project,but I encountered some issues while developing it.Basically,for now I am trying to create a login page.I am experiencing quite a common error in the web,which makes everything ugly and moving when the browser is resized.

Before : enter image description here

After: enter image description here

/* Bordered form */
form {

     margin-left: 220px;
     margin-right: 220px;
     background-position: top center;

}

body{
    background-image: url("/images/background.jpeg");
    background-position: top center;
    min-width:450px;
    max-width:960px; 


}

/* Full-width inputs */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background-position : top center;
}

/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

/* Center the avatar image inside this container */
.imgcontainer {
    padding-top: 60px;
    position: relative;
    left: 17%;
    top: 200%;
    width: 150%;
    text-align: center;
    font-size: 18px;
}


/* Avatar image */
img.avatar {
    text-align: center;
    width: 40%;
    border-radius: 50%;
      display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Add padding to containers */
.container {
    padding: 20px;
    margin-left: 232px;
    margin-right: 200px;   
     min-width:450px;
  max-width:960px; 
}

/* The "Forgot password" text */
span.psw {
    float: right;
    padding-top: 16px;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="login.css" media="screen" />
<title>Admin Panel</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id = form >
<form action="action_page.php">
<div class="imgcontainer">
    <img src="/images/treasure.jpeg" alt="Avatar" class="avatar">
  </div>

  <div class="container">
    <label><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit">Login</button>
    <input type="checkbox" checked="checked"> Remember me
    <span class="psw"><a href="#">Forgotten password?</a></span>
  </div>
</form>
</div>
</body>

The code below I posted is the code I wrote up to now.I have a feeling that the issue is really small and stupid,but I just don't see it.I know there are many topics similar to this one,but for the 2 hours I spent browsing for an answer I didn't find anything useful.Hope you can help me :)

Upvotes: 0

Views: 165

Answers (3)

Prateek
Prateek

Reputation: 1105

You can take a look at the grid layout of the bootstrap. It is the most easy and widely used platform which saves you from the cross-browser testing of your code and from covering all the different screens. Here's the link to bootstrap grid System:

http://getbootstrap.com/css/#grid (try resizing the browser here in the example).

You just need to use incorporate their css and js file and you are good to go.

Upvotes: 0

Brad
Brad

Reputation: 8668

In addition to the answer supplied by cnsvnc.

As well as using responsive tools like % values rather than fixed px size etc. You may also want to look into media queries.

Media queries allow you to apply specific styles based on the viewport size. You can learn more here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

An example media query:

@media only screen and (max-width: 500px) {
 // your styles here
}

In addition I have put a quick example together to demonstrate. try resizing the browser in this fiddle and see the new styles get applied.

https://jsfiddle.net/kfy3jj1q/

Upvotes: 0

cnsvnc
cnsvnc

Reputation: 724

you should be codding responsive

example

/* Bordered form */

form {
  max-width: 500px;
  background-position: top center;
  margin: 0 auto;
}

body {
  background-image: url("/images/background.jpeg");
  background-position: top center;
}


/* Full-width inputs */

input[type=text],
input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  background-position: top center;
}


/* Set a style for all buttons */

button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}


/* Center the avatar image inside this container */


/* Avatar image */

img.avatar {
  text-align: center;
  width: 40%;
  border-radius: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* Add padding to containers */


/* The "Forgot password" text */

span.psw {
  float: right;
  padding-top: 16px;
}
<!DOCTYPE HTML>

<head>
  <link rel="stylesheet" type="text/css" href="login.css" media="screen" />
  <title>Admin Panel</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
  <div class="container">
    <div class="row">

      <form action="action_page.php">
        <div class="imgcontainer">
          <img src="/images/treasure.jpeg" alt="Avatar" class="avatar">
        </div>

        <div class="form">
          <label><b>Username</b></label>
          <input type="text" placeholder="Enter Username" name="uname" required>

          <label><b>Password</b></label>
          <input type="password" placeholder="Enter Password" name="psw" required>

          <button type="submit">Login</button>
          <input type="checkbox" checked="checked"> Remember me
          <span class="psw"><a href="#">Forgotten password?</a></span>
        </div>
      </form>

    </div>
  </div>
</body>

Upvotes: 1

Related Questions