This login is made with boostrap 4, actually it was a preset which I customized. Im new into boostrap and css and didn't understood how to make it responsive. The top cuts off and is not scrollable when resizing the window. It doesn't scale down.
The Login page:
.login-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 340px;
}
.login-form form {
margin-bottom: 15px;
background: #101010;
padding: 30px;
width: 100%;
}
.login-form h2 {
margin: 20px 0 35px;
}
.form-control, .btn {
min-height: 38px;
}
.btn {
font-size: 15px;
font-weight: bold;
}
.clearfix{
margin-bottom: 30px;
color: white;
}
.text-center{
color: white;
font-family: Montserrat;
font-weight: 200;
}
.btn{
border-radius: 0;
padding: 10px;
}
.form-control{
border: 0;
border-radius: 0;
background: #191919;
color: white;
padding: 25px 20px;
}
.pull-right{
color: #fff;
}
.btn-primary{
font-family: Montserrat;
font-weight: 200;
color:#fff;
background-color:#5852eb;
border: 0;
padding: 12px;
}
.btn-primary:hover{
color:#fff;
background-color:#3c3986;
border: 0;
}
.btn-primary:focus,.btn-primary.focus{
outline: none;
box-shadow:none !important;
}
.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff;
background-color:#5852eb;
}
.btn-outline-primary{
color:#5852eb;
background-color:transparent;
background-image:none;
border-color:#5852eb
}
.btn-outline-primary:hover{
color:#5852eb;
background-color:#5852eb;
border-color:#5852eb;
}
.btn:focus {
outline: none !important;
}
input[type="text"], textarea {
outline: none;
box-shadow:none !important;
}
input[type="password"], textarea {
outline: none;
box-shadow:none !important;
}
input[type="email"], textarea {
outline: none;
box-shadow:none !important;
}
.g-recaptcha {
margin-bottom: 10px;
transform:scale(0.93);
transform-origin:0 0;
text-align: center;
}
<!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">
<title>Hash.ms | Login</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body style="background-color:#0D0D0D; ">
<div class="login-form ">
<form action="Login.html" method="post">
<h2 class="text-center">LOGIN</h2>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="2FA code" required="required">
</div>
<div class="clearfix">
<label class="pull-left checkbox-inline"><input type="checkbox"> Remember me</label>
Forgot Password?
</div>
<div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" data-theme="dark"></div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Log in</button>
</div>
</form>
<p class="text-center">Create an Account</p>
</div>
</body>
</html>
The top just cuts off, I can't scroll either.
You can user a div .container and insert your form there, bootstrap have his own classes to make responsive your content (.col-xl-4 .col-md-4 .col-sm-4) you can read more about this here bootstrap responsive-breakpoints
Verify your CDN, this is a CDN for bootstrap 4
Bootstrap CDN
I strongly recommend you to read about the GRID SYSYEM:
https://getbootstrap.com/docs/4.5/layout/grid/
And also you could add like a card:
https://getbootstrap.com/docs/4.5/components/card/
Obviously, you have to use you same css file.
Related
I just started learning HTML and CSS none of the fixes google has suggested have managed to align my contact box to the center of the page. I have tried justify-content, align-items, align-content, and display flex in combination with the stuff above. My page either stays the same or the box aligns itself to the upper left.
I have had a lot of trouble with the things I have built in html so far never aligning center. I would just like to understand why this is happening.
<!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" />
<title>Contact Us</title>
<link rel="stylesheet" href="./CSS/Style.CSS" />
</head>
<body>
<div class="contact-box">
<form>
<!--unsure what HTML validations means but I added required to the name and email fields-->
<input
type="text"
class="input-field"
placeholder="Full Name"
required
/>
<input
type="text"
class="input-field"
placeholder="Your Email"
required
/>
<!--puts drop down in form-->
<select id="Priority">
<option value="Priority">Message Priority</option>
<option value="High">High Priority</option>
<option value="Medium">Medium Priority</option>
<option value="Low">Low Priority/ non-urgent</option>
</select>
<!--I don't understand why the placeholder isn't showing-->
<textarea
type="text"
class="input-field textarea-field"
placeholder="Your Message"
>
</textarea>
<!--Makes button-->
<button type="button" class="btn">Send Message</button>
</form>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
background-color: lightpink;
font-family: sans-serif;
}
/*styles contact box*/
.contact-box{
width: 500px;
background-color: antiquewhite;
box-shadow: 0 0 20px 0 #999;
/*below here I comment everything out within contact box styling and tried all the center alignment things I could find*/
top: 50%;
left: 50%;
transform: translate(-50%.-50%);
position: absolute;
}
form{
margin: 35px;
}
/*styles inputs name, email,etc*/
.input-field{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
/*Makes message box bigger*/
.textarea-field{
height: 150px;
padding-top: 10px;
}
/*styles send message button*/
.btn{
border-radius: 20px;
color: #fff;
margin-top: 18px;
padding: 10px;
background-color: #47c35a;
font-size: 12px;
border: none;
cursor: pointer;
}
/*styles dropdown menu*/
input [type=text], select{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
I guess you just have a typo here:
transform: translate(-50%.-50%);
It should look like this:
transform: translate(-50%,-50%);
please replace "margin : 35px" with "padding : 35px" in form class and use below 4 lines in contact-box class to center your form:
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
attaching the corrected code for your reference, hope it helps!
<!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" />
<title>Contact Us</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: lightpink;
font-family: sans-serif;
}
/*styles contact box*/
.contact-box{
width: 500px;
background-color: antiquewhite;
box-shadow: 0 0 20px 0 #999;
/*below here I comment everything out within contact box styling and tried all the center alignment things I could find*/
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
}
form{
padding: 35px;
}
/*styles inputs name, email,etc*/
.input-field{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
/*Makes message box bigger*/
.textarea-field{
height: 150px;
padding-top: 10px;
}
/*styles send message button*/
.btn{
border-radius: 20px;
color: #fff;
margin-top: 18px;
padding: 10px;
background-color: #47c35a;
font-size: 12px;
border: none;
cursor: pointer;
}
/*styles dropdown menu*/
input [type=text], select{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
</style>
</head>
<body>
<div class="contact-box">
<form>
<!--unsure what HTML validations means but I added required to the name and email fields-->
<input
type="text"
class="input-field"
placeholder="Full Name"
required
/>
<input
type="text"
class="input-field"
placeholder="Your Email"
required
/>
<!--puts drop down in form-->
<select id="Priority">
<option value="Priority">Message Priority</option>
<option value="High">High Priority</option>
<option value="Medium">Medium Priority</option>
<option value="Low">Low Priority/ non-urgent</option>
</select>
<!--I don't understand why the placeholder isn't showing-->
<textarea
type="text"
class="input-field textarea-field"
placeholder="Your Message"
>
</textarea>
<!--Makes button-->
<button type="button" class="btn">Send Message</button>
</form>
</div>
</body>
</html>
You should try to put the code below in your CSS file. When you start writing, upper left is the starting point, that's where your content is going.
html {
text-align: center;
}
I have coded a small form, it is part of a bigger webpage and I am taking small steps, according to specification.
I am curious if I could have done it better in some way. If I could streamlined the code or used some other command or syntax that is better?
Perhaps there are some redundancies?
Also is there a good way to move the Send button so it is centered in the middle and is there a way to move it closed to the bottom without too much hassle? Or to move the placeholder text close to the left?
I will enclose a link to a pen and you can check out the code there.
https://codepen.io/anon/pen/pYNPrw
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<form action="#">
<h2>xyz xyz</h2>
<div class="input-wrapper">
<label for="name">Name:</label>
<input type="text" name="Name" placeholder="Name...." id="name">
</div>
<div class="input-wrapper">
<label for="email">Epost:</label>
<input type="text" name="Epost" placeholder="Epost...." id="epost">
</div>
<button type="submit">Senden</button>
</form>
</body>
</html>
I have changed your code by adding margin property to adjust position of the button and commenting transform property. but if you could use a style library like bootstrap or material design you can sort out a form way more faster
h2 {
margin: 0;
padding: 0;
margin-bottom: 2.3rem;
}
form {
float: left;
display: inline-block;
padding: .5rem;
height: 205px;
width: 168px;
border: 2px solid black;
font-family: Sans-Serif;
font-size: 12px;
}
.input-wrapper {
margin-bottom: .5rem;
}
label {
width: 50px;
display: inline-block;
text-align: left;
font-family: Sans-Serif;
font-size: 14px;
}
input {
width: 90px;
padding: .5rem;
height: 3px;
border: 2px solid black;
text-align: left;
}
button {
padding: .5rem;
display: block;
width: 55%;
background: lightgrey;
color: black;
border: 2px solid black;
text-align: center;
border-radius: 5px;
font-size: inherit;
/* transform: translate(50%, 50%); */
margin: 60px auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<form action="#">
<h2>xyz xyz</h2>
<div class="input-wrapper">
<label for="name">Name:</label>
<input type="text" name="Name" placeholder="Name...." id="name">
</div>
<div class="input-wrapper">
<label for="email">Epost:</label>
<input type="text" name="Epost" placeholder="Epost...." id="epost">
</div>
<button type="submit">Senden</button>
</form>
</body>
</html>
I need to float my columns on the right but I don't know how I can put them under each other with space between them. The CSS is linked to the HTML page some of the CSS is in the HTML page because I used google fonts for them.
#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>
<!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>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>
This is what you want?
#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>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>
You need to specify clear property for wrapper2 class in your CSS
Per Mozilla Developer Documentation Web technology for developers > CSS > clear:
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements.
More specifically for the floating elements, as in this case:
When applied to floating elements, it moves the margin edge of the element below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.
You can achieve this by setting the clear property to either both or right, as follows--
.wrapper2 {
background-color: white;
margin: 0 auto;
margin-top:20px;
float: right;
width: 350px;
clear:both;
}
Full demo posted on: 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;
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;
}
<!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>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>
I want to apply the background color inside the red border except that yellow circle.
Here my code and help me out to fix my problem:
http://codepen.io/mgkrish/pen/YNwqVO
<html>
<head>
<title>newtab</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
body{
background-color: #f5683d;
}
legend i{
font-size: 52px !important;
padding: 24px;
padding-left: 33px;
padding-right: 33px;
color:#ffffff;
background-color: #ffd200;
border: 1px solid #ffd200;
border-radius: 168px;
}
form{
width: 300px;
margin: 0 auto;
background-color: #ececec;
}
input{
margin-bottom: 20px;
width: 264px;
height: 40px;
text-align: center;
border:none;
color:#717171;
}
a{
padding-left: 29%;
text-decoration: none;
color:#f5683d;
}
#loginbutton{
background-color: #4591fb;
color:#ececec;
}
fieldset{
margin-right: 0;
margin-left: 0;
border-color:red;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend style="margin:0 auto;"><i class="fa fa-user"></i></legend>
<div>
<h1 style="font-size: 29PX; color:#717171;text-align: center;"> Member Login</h1>
<input type="name" name="username" placeholder="username" >
<br>
<input type="password" name="pswd" placeholder="password" >
<br>
<input type="button" value="LOGIN" id="loginbutton" >
Forgot Password?
</div>
</form>
</body>
Thanks in advance for help.
You need to move definition background-color: #ececec; from form to fieldset
http://codepen.io/anon/pen/EZPKRo
<html>
<head>
<title>newtab</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
body{
background-color: #f5683d;
}
legend i{
font-size: 52px !important;
padding: 24px;
padding-left: 33px;
padding-right: 33px;
color:#ffffff;
background-color: #ffd200;
border: 1px solid #ffd200;
border-radius: 168px;
}
form{
width: 300px;
margin: 0 auto;
}
input{
margin-bottom: 20px;
width: 264px;
height: 40px;
text-align: center;
border:none;
color:#717171;
}
a{
padding-left: 29%;
text-decoration: none;
color:#f5683d;
}
#loginbutton{
background-color: #4591fb;
color:#ececec;
}
fieldset{
margin-right: 0;
margin-left: 0;
border-color:red;
background-color: #ececec;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend style="margin:0 auto;"><i class="fa fa-user"></i></legend>
<div>
<h1 style="font-size: 29PX; color:#717171;text-align: center;"> Member Login</h1>
<input type="name" name="username" placeholder="username" >
<br>
<input type="password" name="pswd" placeholder="password" >
<br>
<input type="button" value="LOGIN" id="loginbutton" >
Forgot Password?
</div>
</form>
</body>
I'm not sure if I understand your question correctly.
But try to add an background-color to fieldset like that:
fieldset{
margin-right: 0;
margin-left: 0;
background-color: #ececec;
border-color:red;
}
add the style background-color to your fieldset
fieldset {background-color: green;}
So I have four inputs and a button. I tried editing them with CSS but I can't seem to get them to separate. They are all together. No matter what numbers I try to change. Here's my code for both files. Sorry if I get something totally wrong i'm a noob.
nav ul input{
margin: 0px 0px 10px 0px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 300px;
background-color: transparent;
color: black;
border: solid;
font-size: 30px;
text-align: center;
}
#signInBtn{
margin: 0px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 300px;
background-color: transparent;
color: black;
border: solid;
font-size: 30px;
text-align: center;
}
::-webkit-input-placeholder {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NAME</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</html>
<header>
<nav>
<ul>
<?php
echo "<form action='includes/signup.inc.php' method='POST'>
<input id='nameInput' type='text' name='first' placeholder='Firstname'>
<input id='lstInput' type='text' name='last' placeholder='Lastname'>
<input id='usrInput' type='text' name='uid' placeholder='Username'>
<input id='pwdInput' type='password' name='pwd' placeholder='Password'>
<button id='signInBtn' type='submit'>Sign Up</button>
</form>";
?>
</ul>
</nav>
</header>
Try button,input {display:block} and the ul needs min. of one li
In your css your are using position absolute for all the input. That's why all input come all together.
nav ul input {
position: relative;
display: block;
}
#signInBtn {
position: relative;
}
just change it to something position relative or what suitable for you.
nav ul input{
/* delete position */
/* add */
display: block;
margin: 0 auto;
float: none;
}
/* do the same*/
#signInBtn{
/* delete position */
/* add */d
display: block;
margin: 0 auto;
float: none;
}
!you don't have to keep the margin 0 and float: none but i think its a good start before figureing out where you want everything
You are using position absolute, causing the overlap issue
and also you having wrong closing tag so I corrected your code, Please see demo below and tell me if you need anything else.
.wrapper {
margin: 0 auto;
}
.input_block {
text-align: center;
margin-top: 10px;
}
input {
padding: 20px;
width: 200px;
color: black;
border: solid;
font-size: 15px;
}
#signInBtn {
padding: 20px
width: 200px;
color: black;
border: solid;
font-size: 30px;
}
::-webkit-input-placeholder {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NAME</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<form action='includes/signup.inc.php' method='POST'>
<div class="input_block">
<input id='nameInput' type='text' name='first' placeholder='Firstname'>
</div>
<div class="input_block">
<input id='lstInput' type='text' name='last' placeholder='Lastname'>
</div>
<div class="input_block">
<input id='usrInput' type='text' name='uid' placeholder='Username'>
</div>
<div class="input_block">
<input id='pwdInput' type='password' name='pwd' placeholder='Password'>
</div>
<div class="input_block">
<button id='signInBtn' type='submit'>Sign Up</button>
</div>
</form>
</div>
</body>
</html>