Html Question posted in
Some basic documentation can be found here.

Html – What's the way of aligning this things properly?

I have just started learning HTML & CSS and today I wanted to create a pretty basic sign up page. It looked pretty good until the point in which I got to find out that:

  1. I don’t know align the h4 asterisk that I wanted to be red and highlight the fact that that field is not optional;
  2. While trying to make the input fields wider, I found out that the "I understood and accept the Terms and Conditions." checkbox created a big gap, of which I don’t know to get rid of.
* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  max-width: 100%;
}

a:visited {
  color: inherit;
}

.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #dfdfdf;
  height: 60px;
  padding: 0 20px;
}


/* Style for the logo */

.navbar__home {
  font-size: 1.2rem;
  font-weight: 500;
}


/* Style for the nav list */

.navbar__list {
  display: flex;
  list-style: none;
}

li {
  padding-right: 4rem;
}


/* Style for the nav links */

.navbar__link--active {
  color: orangered;
}

.signup__today {
  margin-top: 2rem;
  line-height: 5rem;
}

.signup__div form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4%;
}

.form-example {
  height: fit-content;
  background-color: lightblue;
  margin: 2rem;
}

.signup__button {
  margin: 0.5rem;
  padding: 0.2rem;
}

input {
  width: 200px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700;800&display=swap" rel="stylesheet" />
  <title>My first webpage</title>
</head>

<body>
  <header>
    <nav class="header-nav">
      <div class="navbar__home">
        <h1>Home</h1>
      </div>
      <ul class="navbar__list">
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Portofolio</a></li>
      </ul>
    </nav>
  </header>
  <center>
    <div class="main__containter">
      <div class="signup__div">
        <form class="form-example" action="" method="get">
          <h1 class="signup__today">Sign-up Today</h1>
          <div class="cta__signup">
            Join us today for the best webdev experience
          </div>
          <div class="form-example">
            <h4>User:
              <h5>*</h5>
            </h4>
            <label for="name"></label>
            <input class="name__input" type="text" name="name" id="name" placeholder="Enter your name" required />
          </div>
          <div class="form-example">
            <h4>Password:
              <h5>*</h5>
            </h4>
            <label for="password"></label>
            <input class="password__input" type="password" name="password" id="password" placeholder="Enter your Password" required />
          </div>
          <div class="form-example">
            <label>
                            <input class="terms__checkbox" type="checkbox" name="terms" required />
                            I understand and accept the <a href="#">Terms and Conditions</a>.
                          </label>
          </div>
          <div class="form-example">
            <input class="signup__button" type="submit" value="Sign-up" />
          </div>
        </form>
      </div>
  </center>
</body>

</html>

I wanted the ** that I included in h4 to go on the same line as "User:" and "Password:" h3s that are placed next to, and not to have such a big gap between the checkbox and the text for accepting Terms and Conditions.

Tags:

2

Answers


  1. 0

    It is invalid to have a <h5> inside a <h4> and browsers will render the <h5> outside the <h4>. Use a <span> element instead of a <h5> tag for the asterisk and target the <span> elements and make the text red, something like:

    h4 span {
  color: red;
}

    Also consider using a <label> tag instead of a <h4> so that you can associate the text to the input. This will especially help users of assistive technologies.

    For the checkbox spacing, limit the CSS selector to only the User and Password fields, something like:

    input:is([type=text], [type=password]) {
  width: 200px;
}

    All together:

    * {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  max-width: 100%;
}

a:visited {
  color: inherit;
}

.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #dfdfdf;
  height: 60px;
  padding: 0 20px;
}


/* Style for the logo */

.navbar__home {
  font-size: 1.2rem;
  font-weight: 500;
}


/* Style for the nav list */

.navbar__list {
  display: flex;
  list-style: none;
}

li {
  padding-right: 4rem;
}


/* Style for the nav links */

.navbar__link--active {
  color: orangered;
}

.signup__today {
  margin-top: 2rem;
  line-height: 5rem;
}

.signup__div form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4%;
}

.form-example {
  height: fit-content;
  background-color: lightblue;
  margin: 2rem;
}

.signup__button {
  margin: 0.5rem;
  padding: 0.2rem;
}

input:is([type=text], [type=password]) {
  width: 200px;
}

h4 span {
  color: red;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700;800&display=swap" rel="stylesheet" />
  <title>My first webpage</title>
</head>

<body>
  <header>
    <nav class="header-nav">
      <div class="navbar__home">
        <h1>Home</h1>
      </div>
      <ul class="navbar__list">
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Portofolio</a></li>
      </ul>
    </nav>
  </header>
  <center>
    <div class="main__containter">
      <div class="signup__div">
        <form class="form-example" action="" method="get">
          <h1 class="signup__today">Sign-up Today</h1>
          <div class="cta__signup">
            Join us today for the best webdev experience
          </div>
          <div class="form-example">
            <h4>User:
              <span>*</span>
            </h4>
            <label for="name"></label>
            <input class="name__input" type="text" name="name" id="name" placeholder="Enter your name" required />
          </div>
          <div class="form-example">
            <h4>Password:
              <span>*</span>
            </h4>
            <label for="password"></label>
            <input class="password__input" type="password" name="password" id="password" placeholder="Enter your Password" required />
          </div>
          <div class="form-example">
            <label>
                            <input class="terms__checkbox" type="checkbox" name="terms" required />
                            I understand and accept the <a href="#">Terms and Conditions</a>.
                          </label>
          </div>
          <div class="form-example">
            <input class="signup__button" type="submit" value="Sign-up" />
          </div>
        </form>
      </div>
  </center>
</body>

</html>
    Login or Signup to reply.
  2. 0

    For point 2 with this css input { width: 200px; } you override the width to all inputs therefore the checkbox will have width of 200

    To get rid of this remove the style of input and add your own class.. i named it my_input and put the width only on that class and apply it to name and password elements:

    * {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  max-width: 100%;
}

a:visited {
  color: inherit;
}

.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #dfdfdf;
  height: 60px;
  padding: 0 20px;
}


/* Style for the logo */

.navbar__home {
  font-size: 1.2rem;
  font-weight: 500;
}


/* Style for the nav list */

.navbar__list {
  display: flex;
  list-style: none;
}

li {
  padding-right: 4rem;
}


/* Style for the nav links */

.navbar__link--active {
  color: orangered;
}

.signup__today {
  margin-top: 2rem;
  line-height: 5rem;
}

.signup__div form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4%;
}

.form-example {
  height: fit-content;
  background-color: lightblue;
  margin: 2rem;
}

.signup__button {
  margin: 0.5rem;
  padding: 0.2rem;
}

/* make your own style for input*/
.my_input {
  padding: 4px;
  width: 200px;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700;800&display=swap" rel="stylesheet" />
  <title>My first webpage</title>
</head>

<body>
  <header>
    <nav class="header-nav">
      <div class="navbar__home">
        <h1>Home</h1>
      </div>
      <ul class="navbar__list">
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Portofolio</a></li>
      </ul>
    </nav>
  </header>
  <center>
    <div class="main__containter">
      <div class="signup__div">
        <form class="form-example" action="" method="get">
          <h1 class="signup__today">Sign-up Today</h1>
          <div class="cta__signup">
            Join us today for the best webdev experience
          </div>
          <div class="form-example">
            <h4>User:
              <h5>*</h5>
            </h4>
            <label for="name"></label>
            <!-- add my_input to customise the element -->
            <input class="name__input my_input" type="text" name="name" id="name" placeholder="Enter your name" required />
          </div>
          <div class="form-example">
            <h4>Password:
              <h5>*</h5>
            </h4>
            <label for="password"></label>
            <!-- add my_input to customise the element -->
            <input class="password__input my_input" type="password" name="password" id="password" placeholder="Enter your Password" required />
          </div>
          <div class="form-example">
            <input class="" type="checkbox" name="terms" required />
            <label>I understand and accept the <a href="#">Terms and Conditions</a>.
            </label>
          </div>
          <div class="form-example">
            <input class="signup__button" type="submit" value="Sign-up" />
          </div>
        </form>
      </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search