Tips for altering the design of a registration page

Question

Tips for altering the design of a registration page

I'm struggling to modify my registration page layout so that the avatar is positioned on the left while the username, password input boxes are on the right. I attempted to use split divs without success and also tried adjusting the positioning of the avatar with no luck. Below is my style and body code snippets:

body {
  font-family: Arial, Helvetica, sans-serif;
}

form {
  border: 3px solid #f1f1f1;
}

* {
  margin: 0;
  padding: 0;
}

#logo {
  float: left;
  display: inline-block;
  object-fit: none;
  background: transparent;
  padding-bottom: 0;
  padding-top: 0;
  padding-left: 10px;
}

.navbar {
  overflow: hidden;
  background-color: #D47ACE;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1001;
}

.navbar-logo {
  font-size: 25px;
  word-spacing: 0px;
}

.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px 18px;
  text-decoration: none;
  font-size: 23px;
  font-style: normal;
  font-family: "Rockwell", Monaco, monospace;
  letter-spacing: 0px;
  word-spacing: 5px;
  font-weight: 700;
}

#nav li {
  display: inline;
  padding-right: 30px;
}

.navbar a:hover {
  color: #ffffff;
}

#demoFont {
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 29px;
  letter-spacing: 5.2px;
  word-spacing: 2px;
  color: #000000;
  font-weight: 700;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: uppercase;
}

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;
}

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

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
  padding-top: 10vh;
  padding-bottom: 0vh;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

.button {
  background-color: pink;
}


/* Change styles for span and cancel button on extra small screens */

@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}

<form action="/action_page.php" method="post">
  <div class="imgcontainer">
    <img src="https://via.placeholder.com/568" alt="Avatar" class="avatar">
  </div>

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

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

    <button type="submit">Enter</button>
    <label>
          <input type="checkbox" checked="checked" name="remember"> Remember me
        </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

If you have any suggestions or advice, please let me know.

html css forms avatar

Answer 1

Answer №1

To implement a flexible layout, you can utilize the display: flex; property as demonstrated in the example below.

body {
  font-family: Arial, Helvetica, sans-serif;
}

form {
  border: 3px solid #f1f1f1;
}

* {
  margin: 0;
  padding: 0;
}

.d-flex{ 
 display: flex;
 flex-wrap: wrap;
 align-items: center;
}
.img-container, .input-container {
  width: 50%;
}

.img-container {
  text-align: center;
}

#logo {
  display: inline-block;
  object-fit: none;
  background: transparent;
  padding-bottom: 0;
  padding-top: 0;
  padding-left: 10px;
}

.navbar {
  overflow: hidden;
  background-color: #D47ACE;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1001;
}

.navbar-logo {
  font-size: 25px;
  word-spacing: 0px;
}

.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px 18px;
  text-decoration: none;
  font-size: 23px;
  font-style: normal;
  font-family: "Rockwell", Monaco, monospace;
  letter-spacing: 0px;
  word-spacing: 5px;
  font-weight: 700;
}

#nav li {
  display: inline;
  padding-right: 30px;
}

.navbar a:hover {
  color: #ffffff;
}

#demoFont {
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 29px;
  letter-spacing: 5.2px;
  word-spacing: 2px;
  color: #000000;
  font-weight: 700;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: uppercase;
}

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;
}

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

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
  padding-top: 10vh;
  padding-bottom: 0vh;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

.button {
  background-color: pink;
}


/* Change styles for span and cancel button on extra small screens */

@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}

<form action="/action_page.php" method="post" class="d-flex">
  <div class="img-container">
    <img src="https://via.placeholder.com/140x100" alt="Avatar" class="avatar">
  </div>

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

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

      <button type="submit">Enter</button>
      <label>
            <input type="checkbox" checked="checked" name="remember"> Remember me
          </label>
    </div>

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" class="cancelbtn">Cancel</button>
      <span class="psw">Forgot <a href="#">password?</a></span>
    </div>
  </div>
</form>

Answer 2

To implement a flexible layout, you can utilize the display: flex; property as demonstrated in the example below.

body {
  font-family: Arial, Helvetica, sans-serif;
}

form {
  border: 3px solid #f1f1f1;
}

* {
  margin: 0;
  padding: 0;
}

.d-flex{ 
 display: flex;
 flex-wrap: wrap;
 align-items: center;
}
.img-container, .input-container {
  width: 50%;
}

.img-container {
  text-align: center;
}

#logo {
  display: inline-block;
  object-fit: none;
  background: transparent;
  padding-bottom: 0;
  padding-top: 0;
  padding-left: 10px;
}

.navbar {
  overflow: hidden;
  background-color: #D47ACE;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1001;
}

.navbar-logo {
  font-size: 25px;
  word-spacing: 0px;
}

.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px 18px;
  text-decoration: none;
  font-size: 23px;
  font-style: normal;
  font-family: "Rockwell", Monaco, monospace;
  letter-spacing: 0px;
  word-spacing: 5px;
  font-weight: 700;
}

#nav li {
  display: inline;
  padding-right: 30px;
}

.navbar a:hover {
  color: #ffffff;
}

#demoFont {
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 29px;
  letter-spacing: 5.2px;
  word-spacing: 2px;
  color: #000000;
  font-weight: 700;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: uppercase;
}

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;
}

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

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
  padding-top: 10vh;
  padding-bottom: 0vh;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

.button {
  background-color: pink;
}


/* Change styles for span and cancel button on extra small screens */

@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}

<form action="/action_page.php" method="post" class="d-flex">
  <div class="img-container">
    <img src="https://via.placeholder.com/140x100" alt="Avatar" class="avatar">
  </div>

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

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

      <button type="submit">Enter</button>
      <label>
            <input type="checkbox" checked="checked" name="remember"> Remember me
          </label>
    </div>

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" class="cancelbtn">Cancel</button>
      <span class="psw">Forgot <a href="#">password?</a></span>
    </div>
  </div>
</form>

Answer 3

Answer №2

If you want to ensure that your form displays properly, consider adding a display: flex property to the form element. This will allow the contents of the form to wrap when there is limited space on the line. Additionally, setting a width of 100% on the last .container containing the cancel button and forgotten password link will push it onto a new line.

Here's the updated CSS:

form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.imgcontainer .avatar {
  padding-top: 0;
}

.imgcontainer,
.imgcontainer+.container {
  flex: 1;
}

.container+.container {
  width: 100%;
}

This code snippet results in:

https://i.sstatic.net/ABCde.png

Check out the demo below:

/* Your CSS styles here */

<form action="/action_page.php" method="post">
  <div class="imgcontainer">
    <img src="https://via.placeholder.com/123" alt="Avatar" class="avatar">
  </div>

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

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

    <button type="submit">Enter</button>
    <label>
          <input type="checkbox" checked="checked" name="remember"> Remember me
        </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

Answer 4

If you want to ensure that your form displays properly, consider adding a display: flex property to the form element. This will allow the contents of the form to wrap when there is limited space on the line. Additionally, setting a width of 100% on the last .container containing the cancel button and forgotten password link will push it onto a new line.

Here's the updated CSS:

form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.imgcontainer .avatar {
  padding-top: 0;
}

.imgcontainer,
.imgcontainer+.container {
  flex: 1;
}

.container+.container {
  width: 100%;
}

This code snippet results in:

https://i.sstatic.net/ABCde.png

Check out the demo below:

/* Your CSS styles here */

<form action="/action_page.php" method="post">
  <div class="imgcontainer">
    <img src="https://via.placeholder.com/123" alt="Avatar" class="avatar">
  </div>

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

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

    <button type="submit">Enter</button>
    <label>
          <input type="checkbox" checked="checked" name="remember"> Remember me
        </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

Tips for altering the design of a registration page

Answer №1

Answer №2

Similar questions

Tips on adjusting the scrollbar color with CSS

Menu Design Inspired by Amazon Using jQuery

Comparing Ajax HTML with XML/JSON responses: which is better for speed or other considerations

Once the <a> element is clicked, ensure that the function finishes executing before attempting to click/process it again

Why isn't my textarea in jQUERY updating as I type?

Tips for breaking out of an infinite loop while loading HTML containing a carousel into a blank <div> within another HTML file using jQuery's $(document).ready() function

PHP HTML Decoding Unveiled

Unable to access account: HTML Javascript login issue

Having trouble getting my angular form validation to function properly

The reason behind the clickable issue with my duplicate <ion-select>

Executing an SQL delete query with a button click using a JavaScript function in PHP

When the section comes into view on the screen, the CSS animation will play only one time

Access the document on the desktop and open it in a new popup window

utilize jquery to submit numerous forms using ajax

What is the best way to automatically convert the 'echo' function of PHP from HTML code?

What could be causing the vertical alignment issue of this logo in its parent container?

Tips for organizing a grid to achieve the desired layout

Using Android to Load HTML Content from a Database and Display in a WebView

Modify radio button colors upon selection with a variety of colors

What is the best way to implement spacing between the navigation bar logo, search bar, and links using flex in Bootstrap 5?