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;}
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;
}
How do I get login and register buttons to align side by side using HTML and CSS?
I want the register button to point out to register.php
I have tried to create register button with element, but it doesn't seem to work. If I try to put display:inline; it doesn't put the two buttons side by side.
*{
font-family: 'Montserrat', sans-serif;
}
body,
html{
margin: 0px;
padding: 0px;
background-color: #0E0E0E;
}
.login-box{
background-color: #010100;
width: 400px;
height: 388px;
margin: 250px auto;
}
.login-box h1{
color: #FFFFFF;
margin:0px 35px;
margin-bottom: 35px;
padding-top: 25px;
}
.login-box form input{
display: block;
width: 324px;
height: 50px;
margin-left: 35px;
margin-right: 41px;
margin-bottom: 24px;
}
#submit{
display: inline;
color: #010100;
background-color: #E4FF77;
border: 2px solid transparent;
border-radius: 12px;
width: 150px;
height: 50px;
margin-left: 24px;
margin-right: 41px;
margin-bottom: 33px;
}
#pwdreset{
display: block;
color: #FFFFFF;
text-decoration: none;
margin: 20px 0px;
margin-left: 225px;
}
#register-button {
display: inline;
color: #010100;
background-color: #E4FF77;
border: 2px solid transparent;
border-radius: 12px;
width: 150px;
height: 50px;
margin-left: 24px;
margin-right: 41px;
margin-bottom: 33px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="signin.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<title>Agreya - Login</title>
</head>
<body>
<div class="login-box">
<h1>Login</h1>
<form class="login-form" action="login.php" method="post">
<input id="username" type="text" name="username" placeholder="Email" >
<input id="password" type="password" name="password" placeholder="Password">
<a id="pwdreset" href="#">Forgot password?</a>
<input id="submit" type="submit" name="submit" value="Login">
</form>
<form action="https://www.w3docs.com/">
<input id="register-button" type="submit" name="register" value="Register">
</form>
</div>
</body>
</html>
Is this what you desire ?
* {
font-family: 'Montserrat', sans-serif;
}
body,
html {
margin: 0px;
padding: 0px;
background-color: #0E0E0E;
}
.login-box {
background-color: #010100;
width: 400px;
height: 388px;
margin: 250px auto;
position: relative;
}
.login-box h1 {
color: #FFFFFF;
margin: 0px 35px;
margin-bottom: 35px;
padding-top: 25px;
}
.login-box form input {
display: block;
width: 324px;
height: 50px;
margin-left: 35px;
margin-right: 41px;
margin-bottom: 24px;
}
#submit {
display: inline;
color: #010100;
background-color: #E4FF77;
border: 2px solid transparent;
border-radius: 12px;
width: 150px;
height: 50px;
position: absolute;
bottom: 0;
}
#pwdreset {
display: block;
color: #FFFFFF;
text-decoration: none;
margin: 20px 0px;
margin-left: 225px;
}
#register-button {
display: inline;
color: #010100;
background-color: #E4FF77;
border: 2px solid transparent;
border-radius: 12px;
width: 150px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<div class="login-box">
<h1>Login</h1>
<form class="login-form" action="login.php" method="post">
<input id="username" type="text" name="username" placeholder="Email">
<input id="password" type="password" name="password" placeholder="Password">
<a id="pwdreset" href="#">Forgot password?</a>
<input id="submit" type="submit" name="submit" value="Login">
</form>
<form action="https://www.w3docs.com/">
<input id="register-button" type="submit" name="register" value="Register">
</form>
</div>
Use the formaction attribute, put the two buttons in the same form as follow.
This is HTML5, on IE works on version 10 and more.
<form class="login-form" action="login.php" method="post">
<input id="username" type="text" name="username" placeholder="Email" >
<input id="password" type="password" name="password" placeholder="Password">
<a id="pwdreset" href="#">Forgot password?</a>
<input id="submit" type="submit" name="submit" value="Login">
<input formaction="/register.php" id="register-button" type="submit" name="register" value="Register" >
</form>
I would advice to add position: relative; to class:
.login-box.
And set a class to your register form like:
.form-2{
position:absolute;
bottom: 0;
right:0;
}
here you can wrap your second form and button in first form into new div with style display flex, and you will have side by side buttons.
* {
font-family: "Montserrat", sans-serif;
}
body,
html {
margin: 0px;
padding: 0px;
background-color: #0e0e0e;
}
.login-box {
background-color: #010100;
width: 400px;
height: 388px;
margin: 250px auto;
}
.login-box h1 {
color: #ffffff;
margin: 0px 35px;
margin-bottom: 35px;
padding-top: 25px;
}
.login-box form input {
display: block;
width: 324px;
height: 50px;
margin-left: 35px;
margin-right: 41px;
margin-bottom: 24px;
}
#submit {
display: inline;
color: #010100;
background-color: #e4ff77;
border: 2px solid transparent;
border-radius: 12px;
width: 150px;
height: 50px;
margin-left: 24px;
margin-right: 41px;
margin-bottom: 33px;
}
#pwdreset {
display: block;
color: #ffffff;
text-decoration: none;
margin: 20px 0px;
margin-left: 225px;
}
#register-button {
display: inline;
color: #010100;
background-color: #e4ff77;
border: 2px solid transparent;
border-radius: 12px;
width: 150px;
height: 50px;
margin-left: 24px;
margin-right: 41px;
margin-bottom: 33px;
}
.submits {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<title>Agreya - Login</title>
</head>
<body>
<div class="login-box">
<h1>Login</h1>
<form class="login-form" action="login.php" method="post">
<input id="username" type="text" name="username" placeholder="Email" >
<input id="password" type="password" name="password" placeholder="Password">
<a id="pwdreset" href="#">Forgot password?</a>
<div class="submits">
<input id="submit" type="submit" name="submit" value="Login">
<form action="https://www.w3docs.com/">
<input id="register-button" type="submit" name="register" value="Register">
</form>
</div>
</form>
</div>
</body>
</html>
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.
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 am trying to increase the text input height inside a form on a site I am programming. I try to override the default bootstrap css of 20px height but nothing seems to be changing. Here is my code--
css
.inputfield
{
position:relative;
top:30px;
font-size: 60px!important;
font-family:'Lato', sans-serif !important;
font-weight: 400;
color:white ;
width:400px;
line-height: 100px!important;
opacity:0.2;
}
and
the form HTML
<form class="text-center" action="" method="post">
<div class="row">
<input type="text" id="username" name="name" class="inputfield" placeholder="Username"><br><br>
</div>
<input id="password" type="password" name="password" class="inputfield" placeholder="Password"><br><br>
<br>
<input type="submit" id="submit" value="Login" /><br>
</form>
please help
You can use css height attribute both as
inline css :
<input style="height:50px"/>
or class
<input class="inputfield"/>
and the css
.inputfield {
height: 50px
}
For Bootstrap 4+ use
<input type="text" class="form-control form-control-lg mb-2">
Although It is possible to attach a CSS file to apply your request, Bootstrap has got some predefined classes that can be helpful for your aim.
In bootstrap 4:
You can manipulate the size of the form control with .form-control-sm or .form-control-lg classes.
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
Of course, you can change the default settings of classes by overriding them:
.form-control-sm {
height: calc(1.5em + .5rem + 2px);
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.5;
border-radius: .2rem;
}
In bootstrap 3:
You can set the heights of input elements using classes like .input-lg and .input-sm.
<input class="form-control input-sm" id="inputsm" type="text">
<input class="form-control" id="inputdefault" type="text">
<input class="form-control input-lg" id="inputlg" type="text">
Based from the code you gave, you are not using bootstrap so I will just assume that this is what you are trying to achieve. https://jsfiddle.net/127c14bu/
If you want to override the height, you can add another css class on your input text that contains the desired height. See the .overrideheight and change the value of height.
I hope it helps.
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="/demo/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-responsive.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
<style >
*{
margin:0 !important;
padding:0 ! important;
}
body {
width: 100%;
min-height: 800px;
background-size: 100%;
background-repeat: no-repeat;
position:absolute;
background-image: url(demo_BG_1024.png);
background-color: rgb(0,0,0);
}
ul{
padding-top: 0px;
}
.form-signin {
width:500px !important;
height:300px ! important;
}
.form-signin {
max-width: 500px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
.left {
float: left;
display: block;
width: 25%;
padding-left: 0px;
text-align: left;
}
.right {
float: right;
display: block;
width: 75%;
text-align: right;
padding-right: 0px;
}
.header
{
font-family: 'Lato', sans-serif;
font-weight: 700;
color: white;
font-size: 64px;
padding-top: 60px;
}
.header2
{
padding-top: 0px;
font-family: 'Lato', sans-serif;
font-weight: 300;
color: white;
font-size: 46px;
}
.header3
{
padding-top: 0px;
font-family: 'Lato', sans-serif;
font-weight: 300;
color: white;
font-size: 30px;
}
.header4
{
padding-top: 0px;
font-family: 'Lato', sans-serif;
font-weight: 300;
color: white;
font-size: 18px;
}
nav{
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
width: 100%;
height: 78px;
padding:0 px;
background-color: rgb(0,0,0);
}
ul li {
list-style-type: none;
margin: 0px;
display: inline-block;
}
#logo_image
{
padding: 10px 30px!important;
}
.menu_buttons
{
font-family:'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
color:white ;
display: inline-block;
padding: 10px 30px !important;
}
.demobtn {
height:1.3em;
width:2.5em;
background-color:#00b6ee;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:'Lato', sans-serif;
font-weight: 300;
font-size:30px;
padding:10px 100px;
text-decoration:none;
text-shadow:0px 0px 0px #2f6627;
}
.demobtn:hover {
`enter code here`background-color:#00b6ee;
text-decoration:none;
}
.demobtn:active {
position:relative;
text-decoration:none;
top:1px;
}
.inputfield
{
position:relative;
top:30px;
font-size: 60px!important;
font-family:'Lato', sans-serif !important;
font-weight: 400;
color:white ;
width:400px;
line-height: 100px!important;
opacity:0.2;
}
.overrideheight {
height: 90px;
}
.sign-in
{
padding-top: 100px;
margin-top:100px;
}
.myForm
{
position:relative;
top:230px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="row">
<nav>
<ul class="left" ><li id="logo_image"><img alt="logo" src="img/demo_logo.png"></li></ul>
<ul class="right" >
<li><a class="menu_buttons" href="#">Login</a></li>
</ul>
</nav>
</div>
<div class="row ">
<div class="myForm">
<div class="row sign-in ">
<div class="col-xs-6 col-md-4 col-lg-4"></div>
<div class="col-xs-6 col-md-4 col-lg-4 text-center"><h2 class="header2">Login to demo</h2></div>
<div class="col-xs-6 col-md-4 col-lg-4"></div>
</div>
<br>
</div>
</div>
<form class="text-center form-group" action="" method="post">
<div class="row">
<input type="text" id="username" name="name" class="form-control overrideheight" placeholder="Username"><br><br>
</div>
<input id="password" type="password" name="password" class="form-control overrideheight" placeholder="Password"><br><br>
<br>
<input type="submit" id="submit" value="Login" /><br>
</form>
<div class="navbar-fixed-bottom">
<ul class="left">
<li><a href="#" class="menu_buttons" >Home</a></li>
<li><a href="#" class="menu_buttons" >About</a></li>
<li><a href="#" class="menu_buttons" >Support</a></li>
</ul>
<ul class="right">
<li><a href="#" class="menu_buttons" >Powered by Demo</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#submit").attr("disabled",true);
var username = '';
$("#username").on('change keyup paste mouseup', function() {
if ($(this).val() != username) {
username = $(this).val();
}
});
var password = '';
$("#username").on('change keyup paste mouseup', function() {
if ($(this).val() != password) {
password = $(this).val();
if(username!=""&&password!="")
{
$("#submit").attr("disabled",false);
}
}
});
});
</script>
</body>
</html>