Creating a CSS login system for a website

I am struggling with floating my columns to the right and having them stack vertically with spacing in between. The CSS is linked to the HTML page, but some of it is included in the HTML file due to using Google Fonts.

@charset "ISO-8859-1";


body {
background-image: url("https://i.imgur.com/5fHm9Kt.png");
}
.wrapper {
background-color: white;
margin: 0 auto; 
float: right;
width: 350px;
}
.wrapper2 {
background-color: white;
margin: 0 auto;
margin-top:20px; 
float: right;
width: 350px;
}
.grid {
display:block;
}
form{
margin: auto;
text-align: center;
}
signup-form input[type="text"] {
margin: auto;
margin-bottom: 10px;
width: 70%;
}
input{
display: block;
text-align: center;
margin: auto;
width: 70%;
padding: 5px;
}
signup-form input input[type="text"] {
margin-top:20px;
margin-bottom: 10px;
width: 70%;
}
button{
display: center;
padding: 5px;
border: gray;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <title>Document</title>
</head>
<body>

<style>
 .wrapper h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
.wrapper2 h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}

button{
display: center;
padding: 5px;
width: 75%; 
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
font-family: 'Roboto', sans-serif;
}
</style>
 
 <div class="grid">
   <div id="wrapper" class="wrapper">
   <h2>Registreer</h2>
            <form class="signup-form" id="signup-form" action="signup.inc.php" method="POST">
                <input type="text" name="first" placeholder="Voornaam">
                <input type="text" name="last" placeholder="Achternaam">
                <input type="text" name="email" placeholder="E-mail">
                <input type="text" name="uid" placeholder="Gebruikersnaam">
                <input type="password" name="pwd" placeholder="Password">
                <button type="submit" name="submit">Account aanmaken</button>
            </form>          
      </div>
      <div id="wrapper2" class="wrapper2">
      <h2>Login</h2>
      <form>
            <input type="text" placeholder="voornaam">
            <input type="text" placeholder="achternaam">
            <input type="password" placeholder="Wachtwoord">
            <button type="submit" name="login">Login !</button>
            </form>         
      </div>
 </div>
</body>
</html>

htmlcss

Answer №1

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <title>Document</title>
</head>
<body>

<style>
 .wrapper h2 {  

  color: #48B758;
  text-align:center;
  padding: 10px;
  border-bottom: 1px solid #000000;
  border-radius-top: 5px;
  border-color: silver;
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  font-weight: lighter;
}
.wrapper2 h2 {  

  color: #48B758;
  text-align:center;
  padding: 10px;
  border-bottom: 1px solid #000000;
  border-radius-top: 5px;
  border-color: silver;
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  font-weight: lighter;
}

button{
  display: center;
  padding: 5px;
  width: 75%; 
  background-color: light-gray;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: 'Roboto', sans-serif;
}


@charset "ISO-8859-1";


body {
  background-image: url("https://i.imgur.com/5fHm9Kt.png");
}
.wrapper {
  background-color: white;
  margin: 0 auto; 

  width: 350px;
}
.wrapper2 {
  background-color: white;
  margin: 0 auto;
  margin-top:20px; 

  width: 350px;
}
.grid {
  float: right;
}
form{
  margin: auto;
  text-align: center;
}
signup-form input[type="text"] {
  margin: auto;
  margin-bottom: 10px;
  width: 70%;
}
input{
  display: block;
  text-align: center;
  margin: auto;
  width: 70%;
  padding: 5px;
}
signup-form input input[type="text"] {
  margin-top:20px;
  margin-bottom: 10px;
  width: 70%;
}
button{
  display: center;
  padding: 5px;
  border: gray;
  background-color: light-gray;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>

 <div class="grid">
    <div id="wrapper" class="wrapper">
        <h2>Sign Up</h2>
        <form class="signup-form" id="signup-form" action="signup.inc.php" method="POST">
            <input type="text" name="first" placeholder="First Name">
            <input type="text" name="last" placeholder="Last Name">
            <input type="text" name="email" placeholder="Email">
            <input type="text" name="uid" placeholder="Username">
            <input type="password" name="pwd" placeholder="Password">
            <button type="submit" name="submit">Create Account</button>
        </form>
    </div>
    <div id="wrapper2" class="wrapper2">
        <h2>Login</h2>
        <form>
            <input type="text" placeholder="First Name">
            <input type="text" placeholder="Last Name">
            <input type="password" placeholder="Password">
            <button type="submit" name="login">Login !</button>
        </form>
    </div>
</div>
</body>
</html>

Answer №2

Is this the answer you're looking for?

@charset "ISO-8859-1";
body {
background-image: url("https://i.imgur.com/5fHm9Kt.png");
}
.wrapper {
background-color: white;
margin: 20px 0; 
float: right;
width: 350px;
}
.wrapper2 {
background-color: white;
margin: 0 auto;
margin-top:20px; 
float: right;
width: 350px;
}
.wrapper2 form{
padding-bottom: 59px;
}
.grid {
display:block;
}
form{
margin: auto;
text-align: center;
}
signup-form input[type="text"] {
margin: auto;
margin-bottom: 10px;
width: 70%;
}
input{
display: block;
text-align: center;
margin: auto;
width: 70%;
padding: 5px;
}
signup-form input input[type="text"] {
margin-top:20px;
margin-bottom: 10px;
width: 70%;
}
button{
display: center;
padding: 5px;
border: gray;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <title>Document</title>
</head>
<body>

<style>
 .wrapper h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}
.wrapper2 h2 {
color: #48B758;
text-align:center;
padding: 10px;
border-bottom: 1px solid #000000;
border-radius-top: 5px;
border-color: silver;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: lighter;
}

button{
display: center;
padding: 5px;
width: 75%; 
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
font-family: 'Roboto', sans-serif;
}
</style>
 
 <div class="grid">
   <div id="wrapper" class="wrapper">
   <h2>Register</h2>
            <form class="signup-form" id="signup-form" action="signup.inc.php" method="POST">
                <input type="text" name="first" placeholder="First Name">
                <input type="text" name="last" placeholder="Last Name">
                <input type="text" name="email" placeholder="Email">
                <input type="text" name="uid" placeholder="Username">
                <input type="password" name="pwd" placeholder="Password">
                <button type="submit" name="submit">Create Account</button>
            </form>          
      </div>
      <div id="wrapper2" class="wrapper2">
      <h2>Login</h2>
      <form>
            <input type="text" placeholder="First Name">
            <input type="text" placeholder="Last Name">
            <input type="password" placeholder="Password">
            <button type="submit" name="login">Login !</button>
            </form>         
      </div>
 </div>
</body>
</html>

Answer №3

To ensure proper alignment, make sure to include the clear property for the wrapper2 class in your CSS code

According to the Mozilla Developer Documentation Web technology for developers > CSS > clear:

The clear CSS property indicates whether an element can be positioned beside floating elements that come before it or if it needs to be moved below them. This property applies to both floating and non-floating elements.

Specifically when dealing with floating elements, consider the following:

When applied to floating elements, it adjusts the positioning of the element so that it appears below all relevant floats. This impacts the placement of subsequent floats as they cannot be positioned higher than preceding ones.

To implement this, set the clear property to either both or right, like so--

.wrapper2 {
    background-color: white;
    margin: 0 auto;
    margin-top:20px; 
    float: right;
    width: 350px;
    clear:both;
}

For a complete demonstration, visit: JsFiddle

@charset "ISO-8859-1";
body {
background-image: url("https://i.imgur.com/5fHm9Kt.png");
}
.wrapper {
background-color: white;
margin: 0 auto; 
float: right;
width: 350px;
}
.wrapper2 {
background-color: white;
margin: 0 auto;
margin-top:20px; 
float: right;
width: 350px;
  clear:both;
}
.grid {
display:block;
}
form{
margin: auto;
text-align: center;
}
signup-form input[type="text"] {
margin: auto;
margin-bottom: 10px;
width: 70%;
}
input{
display: block;
text-align: center;
margin: auto;
width: 70%;
padding: 5px;
}
signup-form input input[type="text"] {
margin-top:20px;
margin-bottom: 10px;
width: 70%;
}
button{
display: center;
padding: 5px;
border: gray;
background-color: light-gray;
margin-top: 10px;
margin-bottom: 10px;
}

 .wrapper h2 {
color: #48B758;

... (The rest of the content has been omitted for brevity)... 

font-weight: lighter;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <title>Document</title>
  </head>
  <body>
  <div class="grid">
     <div id="wrapper" class="wrapper">
     <h2>Register</h2>
        <form class="signup-form" id="signup-form" action="signup.inc.php" method="POST">
            <input type="text" name="first" placeholder="First Name">
            <input type="text" name="last" placeholder="Last Name">
            <input type="text" name="email" placeholder="Email">
            <input type="text" name="uid" placeholder="Username">
            <input type="password" name="pwd" placeholder="Password">
            <button type="submit" name="submit">Create Account</button>
        </form>          
     </div>
     <div id="wrapper2" class="wrapper2">
        <h2>Login</h2>
        <form>
          <input type="text" placeholder="First Name">
          <input type="text" placeholder="Last Name">
          <input type="password" placeholder="Password">
          <button type="submit" name="login">Login !</button>
        </form>         
      </div>
   </div>
  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling with making an Ajax and Jquery drop down menu work? Wondering how to use Javascript to retrieve a variable and then utilize it in PHP? Let's troubleshoot

Currently, I am utilizing Ajax/Jquery to present a dropdown menu with data retrieved from my SQL database. The process involves using javascript to obtain a variable that is then utilized in PHP. However, the function doesn't seem to be working as exp ...

javascriptphpjqueryhtmlajax

Arrange the divs in numerical order based on the number of downloads

I wrote a basic code to organize parent divs based on their titles. However, when I attempted to do the same for download counts, nothing happened - no errors or actions from the code. There are two functions in total, both of which are triggered by butto ...

javascripthtml

CSS/JS Label Positioner using Mootools, perhaps?

I have been tasked with incorporating a form into our website. It seems simple at first, but this particular form has some interesting JavaScript code in place to ensure that the label for each input field sits inside it. This is a clever feature, but unfo ...

javascripthtmlcssmootools

What steps should be taken to refresh a page following an AJAX file upload?

I need some help creating a progress bar to track file uploads on my website. Here's what I have so far: HTML: <form action="upload/files.php" method="post" enctype="multipart/form-data" id="frmUpload"> <input type="file" name="upfile" ...

javascripthtmlajaxupload

CSS position: sticky not keeping search bar at the top of the page

I'm having trouble getting a search bar to stick at the top of a div using position: sticky. I've checked for common issues like overflow: hidden on parent elements without specified height, but that's not the problem in this case. Here&apos ...

cssreactjscss-position

What is the best way to implement custom sorting for API response data in a mat-table?

I have been experimenting with implementing custom sorting in a mat-table using API response data. Unfortunately, I have not been able to achieve the desired result. Take a look at my Stackblitz Demo https://i.sstatic.net/UzK3p.png I attempted to implem ...

htmlangulartypescript

Is there a way to trigger the animation of this text effect only when the mouse is scrolled to that specific section?

Here is a cool typing text effect created using HTML, CSS, and JavaScript. Check out the code below: (function($) { var s, spanizeLetters = { settings: { letters: $('.js-spanize'), }, init: function() { ...

javascripthtmlcss

Identifying the precise image dimensions required by the browser

When using the picture tag with srcset, I can specify different image sources based on viewport widths. However, what I really need is to define image sources based on the actual width of the space the image occupies after the page has been rendered by th ...

javascripthtmlcss

Bootstrap 4 Vertical Timeline Layout Showing Uneven Columns Due to Large Margins

I'm currently working on my very first website and trying to implement a vertical timeline using Bootstrap 4. My goal is to have the timeline bar situated between two columns. However, I'm encountering an issue where I can't align text in th ...

htmlcssbootstrap-4timelinemargins

Ionic Troubleshoot: Issue with Reading Property

Encountering an error: A TypeError occurs: Cannot Read Property of "username" of Undefined The HTML code responsible for the error is as follows: <ion-content padding style="text-align: center; margin-top: 35px"> <form (ngSubmit)="logFor ...

htmlangularionic-frameworkauthenticationcredentials

Tips for customizing image-cropping functionality within a modal with material UI

When it comes to positioning elements on a basic page using CSS, I consider myself decently skilled. However, things get confusing when working inside a modal. I attempted to use the Dialog component from mui-material to wrap the cropper, but that approac ...

cssreactjsmaterial-ui

Adjust the background color of the default Angular material theme

I'm currently working with the pre-made purple-green angular material theme using .css. I want to switch to a white background, but I'm having trouble changing it from dark grey. I've attempted removing the class "mat-app-background" from th ...

cssangularsassangular-material

The background images aren't tiling properly on mobile safari

Having a peculiar issue with Mobile Safari. Background images on some divs are not reaching all the way across the page, stopping just before halfway. Interestingly, they display properly in Safari on both PC and Mac. You can view the site online at: www. ...

cssiosmobilesafari

Update the text content in the specific span element when the class attribute matches the selected option in the

How can I dynamically update text inside a span based on matching classes and attributes without hardcoding them all? An ideal solution would involve a JavaScript function that searches for matches between span classes and select field options, updating t ...

javascriptjqueryhtmldrop-down-menu

Cross-origin resource sharing (CORS) issue encountered while trying to play an mp

I am facing an issue with my React application where it is unable to play audio from a different source due to a CORS error. Example: Interestingly, when I visit https://www.w3schools.com/tags/tag_audio.asp, input the above URL and click play, it works fi ...

htmlreactjshtml5-audio

What is the best way to display a Facebook-like pop-up on a website

I am looking to implement a Facebook like box pop-up on my website for visitors. While I know how to show the pop-up, I am trying to determine how I can detect if someone has already liked my page in order to prevent the Facebook pop-up from appearing agai ...

javascripthtmlfacebook

What is the method for altering the order of each consecutive div?

Looking to rearrange the order of div elements, a common query on forums. However, this one presents a unique challenge. #A {background-color: pink;} #B {background-color: yellow;} #C {background-color: lightblue;} #D {background-color: lightgray;} ...

jqueryhtml

Having trouble with a basic jQuery selector not functioning as expected

Having trouble parsing this HTML code: <tr id="a"> <td class="classA"> <span class="classB">Toronto</span> </td> <td class="classC"> <span class="classD">Winnipeg</span> </ ...

javascriptjqueryhtmljquery-selectors

Upon selecting the checkbox, the user will be redirected to an input textbox

Can I make it so that when I check a checkbox, it automatically directs me to a textbox as if I pressed the TAB key? Is there a way to achieve this using only HTML and CSS? ...

htmlcsshttp-redirectcheckbox

Require assistance in getting a slider operational

Hello there! I could really use your assistance with this code. I have been trying to make it work using JavaScript, but I'm determined not to incorporate any external JS files. Here is the snippet of JavaScript code I am working with: "use strict"; ...

javascriptjquerycss