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>
Related
I have this HTML & CSS Code.
I would like that:
First label and second label equal size,
third label should be full width.
This should then give:
I have been playing around with flex and the possible options.
I have watched tutorials and read specifications, but for some reason I'm unable to get this working in a simple manner.
Here you can find my html and css:
#import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght#400;800&display=swap');
* {
box-sizing: border-box;
}
body {
display: flow-root;
font-family: 'Montserrat Alternates', sans-serif;
/* background-image: url(../images/background-cars.jpg); */
background-size: cover ;
min-height: (1vh-1em);
background-color: saddlebrown;
font-size: 0.75rem;
font-weight: 400;
}
input,
select,
button {
width: 100%;
border-radius: 0.5em;
padding: 15px;
}
input,
select{
color: gray;
}
/* flex */
fieldset{
display: flex;
flex-wrap: wrap;
gap: 1em;
}
label{
flex: 1 1 0;
}
/* layout */
form {
background-color: black;
padding: 15px;
color: white;
width: 75%;
max-width: 800px;
margin: auto;
border-radius: 0.5em;
}
button{
background-color: gold;
font-weight: 800;
border-radius: 0.5em;
margin-top: 15px;
}
h1{
color: gold;
font-weight: 800;
font-size: 4rem;
text-align: center;
}
legend{
font-weight: 800;
}
fieldset{
border-radius: 0.5em;
}
<!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>Boo! Ka Car.</title>
<link rel="stylesheet" href="css/main copy.css">
</head>
<body>
<h1>test</h1>
<form id="form1" action="mailto:naam#domein.be?subject=Booking&m" method="post">
<fieldset>
<legend>DATE & TIME</legend>
<label>
PICKUP DATE
<input type="date">
</label>
<label>
HOUR
<input type="number" min="1" max="12">
</label>
<label>
AM/PM
<select name="ampm" id="amAndpm">
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
</label>
</fieldset>
<button type="submit" form="form1" value="BOOKNOW">BOOK NOW</button>
</form>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght#400;800&display=swap');
* {
box-sizing: border-box;
}
body {
display: flow-root;
font-family: 'Montserrat Alternates', sans-serif;
/* background-image: url(../images/background-cars.jpg); */
background-size: cover ;
min-height: (1vh-1em);
background-color: saddlebrown;
font-size: 0.75rem;
font-weight: 400;
}
input,
select,
button {
width: 100%;
border-radius: 0.5em;
padding: 15px;
}
input,
select{
color: gray;
}
/* flex */
fieldset{
display: flex;
flex-wrap: wrap;
gap: 1em;
}
label{
flex: 1 1 0;
flex-basis: unset;
}
/* layout */
form {
background-color: black;
padding: 15px;
color: white;
width: 75%;
max-width: 800px;
margin: auto;
border-radius: 0.5em;
}
button{
background-color: gold;
font-weight: 800;
border-radius: 0.5em;
margin-top: 15px;
}
h1{
color: gold;
font-weight: 800;
font-size: 4rem;
text-align: center;
}
legend{
font-weight: 800;
}
fieldset{
border-radius: 0.5em;
}
<!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>Boo! Ka Car.</title>
<link rel="stylesheet" href="css/main copy.css">
</head>
<body>
<h1>test</h1>
<form id="form1" action="mailto:naam#domein.be?subject=Booking&m" method="post">
<fieldset>
<legend>DATE & TIME</legend>
<label>
PICKUP DATE
<input type="date">
</label>
<label>
HOUR
<input type="number" min="1" max="12">
</label>
<label>
AM/PM
<select name="ampm" id="amAndpm">
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
</label>
</fieldset>
<button type="submit" form="form1" value="BOOKNOW">BOOK NOW</button>
</form>
</body>
</html>
You can change the heights of the input field to your liking, for the code below, it's just their naturally inherent heights.
#import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght#400;800&display=swap');
* {
box-sizing: border-box;
}
body {
display: flow-root;
font-family: 'Montserrat Alternates', sans-serif;
/* background-image: url(../images/background-cars.jpg); */
background-size: cover ;
min-height: (1vh-1em);
background-color: saddlebrown;
font-size: 0.75rem;
font-weight: 400;
}
input,
select,
button {
width: 100%;
border-radius: 0.5em;
padding: 15px;
}
input,
select{
color: gray;
}
/* flex */
fieldset{
gap: 1em;
}
label{
flex: 1 1 0;
}
/* layout */
form {
background-color: black;
padding: 15px;
color: white;
width: 75%;
max-width: 800px;
margin: auto;
border-radius: 0.5em;
}
button{
background-color: gold;
font-weight: 800;
border-radius: 0.5em;
margin-top: 15px;
}
h1{
color: gold;
font-weight: 800;
font-size: 4rem;
text-align: center;
}
legend{
font-weight: 800;
}
fieldset{
border-radius: 0.5em;
}
.outer{
display:flex;
flex-direction: column;
}
.inner{
width: 100%;
margin-bottom: 7px;
display: flex;
flex-direction:row;
justify-content:space-between;
}
.date{
flex: 1;
margin-right: 10px;
}
.hour{
flex: 1;
}
<!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>Boo! Ka Car.</title>
<link rel="stylesheet" href="css/main copy.css">
</head>
<body>
<h1>test</h1>
<form id="form1" action="mailto:naam#domein.be?subject=Booking&m" method="post">
<fieldset>
<legend>DATE & TIME</legend>
<div class="outer">
<div class="inner">
<div class="date">
PICKUP DATE
<input type="date">
</div>
<div class="hour">
HOUR
<input type="number" min="1" max="12" class="hour">
</div>
</div>
<div>
AM/PM
<select name="ampm" id="amAndpm">
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
</div>
<div>
</fieldset>
<button type="submit" form="form1" value="BOOKNOW">BOOK NOW</button>
</form>
</body>
</html>
The contact section of my website has the same menu, however the logo still hovers in red although the class you mentioned before is applied, it's also applied in the right image with social media.
Also, I have a footer created which has no style, how can I align it to the center and have them ordered including the icons? (which cannot be seen)
* {
padding: 0;
margin: 0;
}
input[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: rgb(151, 37, 37);
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #9E1B2F;
}
.testform {
border-radius: 5px;
background-color: black;
padding: 10px;
font-family: calibri;
color: white;
width: 25%;
margin-top: 200px;
margin-left: 700px;
margin-bottom: 300px;
}
.logo {
display: flex;
padding: 6px;
border: 0;
margin-left: 350px;
margin-bottom: 0px;
justify-content: center;
}
.bbicons {
padding: 6px;
border: 0;
margin-left: 1650px;
margin-bottom: 5px;
margin-top: -60px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 20px;
font-weight: bold;
border-style: dashed;
border-color: black;
border-radius: 20px;
height: 80px;
width: 1900px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 12px;
text-decoration: none;
border-style: none;
margin-left: 24px;
margin-top: 11px;
}
li a:hover {
background-color: #9E1B2F;
}
logo:hover {
background-color: transparent;
}
<!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="shortcut icon" href="./img/favicon.png">
<link rel="stylesheet" href="./css/style.css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Contact</title>
<body>
<div class="navigation active">
<ul>
<li>Tours</li>
<li>Listen to Music</li>
<li>Contact</li>
<li>About</li>
<li>
<img class="logo" src="./img/logo.jpg" alt="logo">
</li>
<li>
<a class="bbicons"><img src="./img/bbicons.jpg"></a>
</li>
</ul>
</div>
<div class="testform">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4><a class="textDecoration" href="./terms.html">Terms and Conditions</a></h4>
<h4><a class="textDecoration" href="./privacy.html">Privacy
and Policy</a></h4>
<h4>Follow Us</h4>
</div>
<div class="social-links">
<img src="./img/face4.png"></a>
<img src="./img/ig3.png"></a>
<img src="./img/tw2.png"></a>
<img src="./img/yt2.png"></a>
</div>
</div>
</div>
</footer>
</body>
</html>
I personally would use it this way, just implement it... If you need anything, just ask me!
.logo img {
transition: transform 1s ease;
}
.logo:hover img {
transform: scale(1.2,1.2);
}
When I hit the button I want to make my code shows a success field. Choosing the background color of the <div> wouldn't work. Is it just my browser or is something wrong with my code?
.div {
float: top;
background-color: white;
border-radius: 10px;
padding: 10px;
width: 275px;
height: 375px;
margin-left: 500px;
margin-right: 500px;
margin-top: 125px;
box-shadow: 0px 0px 20px #00000010;
}
body {
background-color: #c9ecff;
overflow-y: hidden;
overflow-x: auto;
font-family: 'Ubuntu', sans-serif;
}
textarea {
border-color: #c4c4c4;
border-radius: 5px;
width: 250px;
font-family: 'Ubuntu', sans-serif;
resize: none;
}
input {
border: 1px solid #c4c4c4;
border-radius: 5px;
font-family: 'Ubuntu', sans-serif;
width: 250px;
}
form {
padding: 10px;
}
section {
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
flex-direction: column;
font-family: 'Ubuntu', sans-serif;
clear: left;
}
label {
font-family: 'Ubuntu', sans-serif;
font-weight: 300px;
}
button {
border: 0px;
border-radius: 5px;
width: 100%;
height: 50px;
font-family: 'Ubuntu', sans-serif;
color: #38b9ff;
background-color: #bae7ff;
cursor: pointer;
font-size: 16px;
transition: 1.5s ease background-color;
}
button:hover {
background-color: #8ad6ff;
}
#status {
width: 100px;
height: 200px;
max-width: 500px;
text-align: center;
align-items: center;
padding: 10px;
margin: 0 auto;
border-radius: 10px;
}
#status.success {
width: 90%;
max-width: 500px;
text-align: center;
padding: 10px;
margin: 0 auto;
border-radius: 10px;
background-color: #7de000;
}
<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=Ubuntu&display=swap" rel="stylesheet">
<section>
<div class="div">
<form action="" method="get">
<label for="name">Name</label><br>
<input name="name" id="name"><br><br>
<label for="mail">G-Mail</label><br>
<input name="mail" id="mail"><br><br>
<label for="sub">Subject</label><br>
<input name="sub" id="sub"><br><br>
<label for="mess">Message</label><br>
<textarea id="mess" rows="5" col="80"></textarea><br><br>
<button type="submit">Submit</button>
</form>
</div>
<div id="status" class="success">Success</div>
</section>
Removing the last div , it's working well here in my machine. The color change. So remove the last div(yes, i know that you said it was only in the copy, but check again your code).
<section>
<div class="div">
<form action="" method="get">
<label for="name">Name</label><br>
<input name="name" id="name"><br><br>
<label for="mail">G-Mail</label><br>
<input name="mail" id="mail"><br><br>
<label for="sub">Subject</label><br>
<input name="sub" id="sub"><br><br>
<label for="mess">Message</label><br>
<textarea id="mess" rows="5" col="80"></textarea><br><br>
<button type="submit">Submit</button>
</form>
</div>
<div id="status" class='success'>Success</div>
</section>
I have been trying to style a Register form. I want the heading to be in the center of the div. I have another login form just beside it.
I have styled them using flex box and then used justify content as center. I also want to add a vertical line between the register form and login form. I don't want to use one of the borders of the form. Apart from using one of the form's border is there any way to do it.
Things I've tried but didn't work
1.text-align: center:
2.margin: 0 auto;
body {
margin: 0px;
}
#head {
text-align: center;
background: linear-gradient(to right, cyan, purple);
margin: 0px;
padding: 20px;
border-bottom: 2px solid lightgrey;
}
#head h1 {
margin: 0px;
font-family: 'Great Vibes', cursive;
color: white;
font-size: 40px;
}
.cont {
display: flex;
flex-direction: row;
justify-content: center;
}
input {
padding: 2px;
margin: 2px;
}
input [name="register"] {
background-color: green;
}
#login {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
#login h1 {
margin: 0 auto;
}
#register {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
<!DOCTYPE html>
<html>
<head>
<title>The Joint.</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>
<body>
<div id="head">
<h1>The Joint.</h1>
</div>
<div id="whtpg">
<div class="cont">
<div id="register">
<h3>Register</h3>
<form action="reglog.php" method="POST">
<input type="text" name="name" placeholder="Name"><br>
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="pass" placeholder="Password"><br>
<input type="password" name="cpass" placeholder="Confirm Password"><br>
<input type="submit" name="register" value="Register">
</form>
</div>
<div id="login">
<h3>Login</h3>
<form action="reglog.php" method="POST">
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="lpass" placeholder="Password"><br>
<input type="submit" name="login" value="Log In">
</form>
</div>
</div>
</div>
</body>
</html>
It would be helpful if you could post the html and css.
My guess is that the container div has no width settings, so the div is the same width as the text, so you cannot center it. Maybe set the width to 100% of its container and set the text-align to center and see if that helps.
From your code you could try
#register h3 {
text-align:center;
}
this will mean any h3 tags inside the div with the id register will have the text-align:center attribute applied to them
Otherwise post the HTML and CSS and we can take a look. (I see the HTML now, add the CSS too please
you can draw a line in the middle using CSS pseudo selector::after following is the piece of CSS rule to do that.
div#register::after {
content: "";
display: block;
width: 0px;
height: 250px;
border: 1px solid #b6b6b6;
position: absolute;
top: 110px;
left: 50%;
}
.cont h3 {
text-align: center;
}
body {
margin: 0px;
}
#head {
text-align: center;
background: linear-gradient(to right, cyan, purple);
margin: 0px;
padding: 20px;
border-bottom: 2px solid lightgrey;
}
#head h1 {
margin: 0px;
font-family: 'Great Vibes', cursive;
color: white;
font-size: 40px;
}
.cont {
display: flex;
flex-direction: row;
justify-content: center;
}
input {
padding: 2px;
margin: 2px;
}
input [name="register"] {
background-color: green;
}
#login {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
#login h1 {
margin: 0 auto;
}
#register {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
div#register::after {
content: "";
display: block;
width: 0px;
height: 250px;
border: 1px solid #b6b6b6;
position: absolute;
top: 110px;
left: 50%;
}
.cont h3 {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>The Joint.</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>
<body>
<div id="head">
<h1>The Joint.</h1>
</div>
<div id="whtpg">
<div class="cont">
<div id="register">
<h3>Register</h3>
<form action="reglog.php" method="POST">
<input type="text" name="name" placeholder="Name"><br>
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="pass" placeholder="Password"><br>
<input type="password" name="cpass" placeholder="Confirm Password"><br>
<input type="submit" name="register" value="Register">
</form>
</div>
<div id="login">
<h3>Login</h3>
<form action="reglog.php" method="POST">
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="lpass" placeholder="Password"><br>
<input type="submit" name="login" value="Log In">
</form>
</div>
</div>
</div>
</body>
</html>
For centering the heading of the register form, use:
#register h3 {
text-align: center;
}
And similarly, for centering the heading of the login form, use:
#login h3 {
text-align: center;
}
And, for the vertical line, create an empty div and style it. I've used divider class here:
.divider {
border-left: 1px solid black;
border-right: 1px solid black;
height: 200px;
margin-top: 40px;
}
See the full code below:
body {
margin: 0px;
}
#head {
text-align: center;
background: linear-gradient(to right, cyan, purple);
margin: 0px;
padding: 20px;
border-bottom: 2px solid lightgrey;
}
#head h1 {
margin: 0px;
font-family: 'Great Vibes', cursive;
color: white;
font-size: 40px;
}
.cont {
display: flex;
flex-direction: row;
justify-content: center;
}
input {
padding: 2px;
margin: 2px;
}
input [name="register"] {
background-color: green;
}
#login {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
#login h3 {
text-align: center;
}
#register {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
#register h3 {
text-align: center;
}
.divider {
border-left: 1px solid black;
border-right: 1px solid black;
height: 200px;
margin-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>The Joint.</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>
<body>
<div id="head">
<h1>The Joint.</h1>
</div>
<div id="whtpg">
<div class="cont">
<div id="register">
<h3>Register</h3>
<form action="reglog.php" method="POST">
<input type="text" name="name" placeholder="Name"><br>
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="pass" placeholder="Password"><br>
<input type="password" name="cpass" placeholder="Confirm Password"><br>
<input type="submit" name="register" value="Register">
</form>
</div>
<div class="divider"></div>
<div id="login">
<h3>Login</h3>
<form action="reglog.php" method="POST">
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="lpass" placeholder="Password"><br>
<input type="submit" name="login" value="Log In">
</form>
</div>
</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;}