Sorry I am very very new to CSS
I am trying to align "Low" under "Work", but no luck. Could anyone suggest me. Please refer screenshot.enter image description here
.contact-form {
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
max-width: 600px;
font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
font-size: 20px;
}
.contact-form label {
display: block;
margin: 0px 0px 15px 0px;
text-transform: uppercase; /* New */
}
.contact-form label > span {
padding-top: 8px;
}
.contact-form label > span, #recaptcha::before {
width: 100px;
text-align: right;
float: left;
padding-right: 20px;
content: "";
}
.contact-form input, .contact-form textarea {
margin-bottom: 15px;
padding: 10px;
border: none;
}
.contact-form input.input-field {
width: 70%;
height: 20px;
font-size: 18px;
}
.contact-form .textarea-field {
height: 250px;
margin-bottom: 11px;
}
.contact-form .textarea-field, .g-recaptcha {
width: 70%;
font-size: 18px;
display: inline-block;
}
.g-recaptcha {
height: 78px !important;
}
#recaptcha {
display: block;
margin: 0px 0px 24px 0px;
}
textarea {
resize: none;
}
textarea:focus, input:focus {
outline: 0;
}
input.submit-button {
background-image: url("../img/submit-button.jpg");
width: 225px;
height: 60px;
border: none;
}
.appraisals .section-title {
width: 100%;
}
#appraisals-form {
width: 100%;
max-width: 700px;
top: auto;
transform: none;
}
#appraisals-form label > span {
width: 150px;
font-size: 16px
}
#appraisals-form span.label-sm {
display: block;
font-size: 14px;
text-transform: none;
}
#appraisals-form input, #appraisals-form textarea {
background-color: #d7d7d7;
}
#appraisals-form textarea {
height: 100px;
}
#appraisals-form .centred-button {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="appraisals-form" class="contact-form">
<form role="form" method="post" action="contact-form.php">
<label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label>
<label for="name"><span>Type of Artwork</span><span class="label-sm">(i.e. sculpture, painting...)</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your item's type of artwork." /></label>
<label for="message"><span>Message</span><textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your message."></textarea></label>
<div class="centred-button"><input type="submit" value="submit" class="submit-button" /></div>
</form>
</div>
</body>
</html>
Related
I just made a for and I'm trying to put 2 divs next to each other in another div but there is this huge margin that won't let it happen I'm trying to figure it out but I can't get anything to work. please help me I have been trying to figure this out for hours. https://i.stack.imgur.com/JHAT1.png
just look at the /contact page/ in the CSS section that's the only code that I'm trying to fix. its only on the bottom.
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
color: #ffffff;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #222;
}
nav {
display: flex;
height: 120px;
width: 100%;
background: #192841;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
color: #fff;
font-size: 30px;
font-weight: 600;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: #f2f2f2;
text-decoration: none;
font-size: 16px;
font-weight: 500;
padding: 8px 14px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: #111;
background: #fff;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked ~ .menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
background: #111;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked ~ ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked ~ ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: cyan;
}
}
/* Footer */
.footer {
text-align: center;
display: inline-block;
bottom: 0;
width: 100%;
height: 50px;
padding-bottom: 1%;
}
.footer {
height: 100%;
}
/* Footer */
/*home page*/
.contentHeader {
text-align: center;
z-index: -1;
width: 100%;
padding-top: 2%;
color: #1b1b1b;
font-size: 30px;
font-weight: 400;
}
#media screen and (max-width: 768px) {
.contentHeader {
text-align: center;
z-index: -1;
width: 100%;
padding-top: 10px;
color: #1b1b1b;
padding: 2%;
padding-left: 5%;
padding-right: 5%;
}
}
.AboutOnHomepage {
padding: 5% 10%;
padding-top: 2%;
padding-bottom: 4%;
width: 100%;
text-align: justify;
align-items: center;
display: inline-block;
}
#media screen and (max-width: 768px) {
.AboutOnHomepage {
padding-top: 15%;
width: 100%;
text-align: justify;
height: 100px;
text-align: center;
}
.AboutOnHomepage p {
text-align: justify;
}
}
.AboutOnHomepage h2 {
white-space: nowrap;
}
.mainUpdate {
padding-left: 10%;
padding-right: 10%;
}
#media screen and (max-width: 768px) {
.mainUpdate {
width: 100%;
}
}
.recentUpdates {
padding-bottom: 3%;
text-align: center;
font-size: 20px;
}
#media screen and (max-width: 768px) {
.recentUpdates {
padding-top: 20%;
}
}
.up1Home {
text-align: center;
font-size: 18px;
font-weight: lighter;
}
.up2Home {
text-align: center;
padding-top: 3%;
font-size: 18px;
font-weight: lighter;
}
.up3Home {
text-align: center;
padding-top: 3%;
font-size: 18px;
font-weight: lighter;
}
.updateHome1 {
text-align: center;
width: 100%;
padding-bottom: 3%;
margin-top: 0%;
border-bottom: 1px solid white;
}
.par1 {
padding-top: 2%;
padding-left: 5%;
}
.img1 {
text-align: center;
padding-top: 2%;
width: 100px;
height: 100px;
}
#media screen and (max-width: 768px) {
.updateHome1 {
width: 100%;
margin-top: 2.5%;
margin-bottom: 20px;
}
.par1 {
margin-left: 10px;
}
.img1 {
margin-top: 12%;
margin-bottom: 10%;
width: 150px;
height: 100px;
}
}
.updateHome2 {
text-align: center;
padding-bottom: 3%;
margin-top: 0%;
border-bottom: 1px solid white;
}
.par2 {
text-align: center;
padding-top: 2%;
}
.img2 {
text-align: center;
margin-top: 2%;
width: 100px;
height: 100px;
}
#media screen and (max-width: 768px) {
.updateHome2 {
width: 100%;
margin-top: 2.5%;
margin-bottom: 20px;
}
.par2 {
margin-left: 10px;
}
.img2 {
margin-top: 12%;
margin-bottom: 10%;
width: 150px;
height: 100px;
}
}
.updateHome3 {
text-align: center;
padding-bottom: 10%;
margin-top: 0%;
}
.par3 {
padding-top: 2%;
float: left;
margin-left: 10px;
}
.img3 {
text-align: center;
margin-top: 2%;
width: 100px;
height: 100px;
}
#media screen and (max-width: 768px) {
.updateHome3 {
width: 100%;
margin-top: 2.5%;
margin-bottom: 20px;
}
.par3 {
margin-left: 10px;
}
.img3 {
margin-top: 12%;
margin-bottom: 10%;
width: 150px;
height: 100px;
}
}
/*home page*/
/*Google form*/
#media screen and (max-width: 768px) {
.content {
padding-bottom: 10%;
}
}
.googleFormHeading {
text-align: center;
z-index: -1;
width: 100%;
padding-top: 2%;
color: #1b1b1b;
font-size: 30px;
font-weight: 400;
}
#media screen and (max-width: 768px) {
.googleFormHeading {
text-align: center;
z-index: -1;
width: 100%;
padding-top: 2%;
color: #1b1b1b;
font-size: 30px;
font-weight: 400;
padding-left: 5%;
padding-right: 5%;
}
}
.bothGoogleForms {
padding-top: 3%;
display: inline-block;
text-align: center;
width: 100%;
}
.googleFormTv {
padding-left: 4%;
display: inline-block;
}
.googleFormTv iframe {
width: 700px;
height: 900px;
text-align: center;
display: inline-block;
}
.googleFormMovie {
padding-left: 3%;
display: inline-block;
margin-bottom: 10%;
}
.googleFormMovie iframe {
width: 700px;
height: 900px;
text-align: center;
display: inline-block;
}
#media screen and (max-width: 768px) {
.bothGoogleForms {
text-align: center;
width: 100%;
}
.googleFormTv {
text-align: center;
width: 90%;
padding-bottom: 11%;
border-bottom: 1px solid white;
}
.googleFormTv iframe {
width: 100%;
padding-left: 2%;
height: 976px;
}
.googleFormMovie {
text-align: center;
width: 100%;
padding-top: 11%;
margin-bottom: 15%;
}
.googleFormMovie iframe {
padding-left: 2%;
width: 90%;
height: 976px;
}
}
/*Google form*/
/*Contact Page*/
.ContactPageAll {
padding-left: 15px;
padding-right: 15px;
width: 100%;
display: inline-block;
}
.contactForm {
color: #111;
text-align: left;
width: 30%;
}
.contactForm input,
textarea,
label {
display: block;
color: #ffffff;
}
.contactForm input,
textarea,
button {
display: block;
padding: 4%;
width: 120%;
background-color: white;
color: #111;
}
.contactFormName {
padding-bottom: 2%;
font-size: 20px;
}
.socials {
width: 55%;
display: inline-block;
}
/*Contact Page*/ ;
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Responsive Navigation Menu</title>
<link rel="stylesheet" href="../style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<div class="logo"> Reviews</div>
<input type="checkbox" id="click" />
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li>Home</li>
<li>Google Form</li>
<li>Movies</li>
<li>Tv-Shows</li>
<li>Top Movies</li>
<li>Top Tv-Shows</li>
<li><a class="active" href="contact.html">Contact</a></li>
</ul>
</nav>
<div class="ContactPageAll">
<div class="socials">fklghliabgljglabg</div>
<div class="contactForm">
<form action="https://formsubmit.co/myemail#aol.com" method="POST">
<label class="contactFormName" for="name">Name:</label>
<input
type="text"
name="name"
required
placeholder="Enter Your Name"
/>
<label class="contactFormEmail" for="Email">Email:</label>
<input
type="email"
name="email"
required
placeholder="Email Address"
/>
<label
class="contactForMessage"
for="message"
placeholder="Write Your Message here"
>What Do You Want to Say:</label
>
<textarea
name="message"
id="message"
placeholder="Write Your mEssage here"
cols="30"
rows="10"
></textarea>
<input
type="hidden"
name="_subject"
value="New submission From My website"
/>
<input
type="hidden"
name="_next"
value="https://sunnymoon25.github.io/mainPages/thanks.html"
/>
<input type="hidden" name="_captcha" value="false" />
<button type="submit">Send</button>
</form>
</div>
</div>
</body>
</html>
just look at the /contact page/ section that's the only code that I'm trying to fix
This is not margin this actual width as you have given
If you want to side by side div so you need to add below html and CSS so you get as you want output.
<div class="ContactPageAll">
<div class="socials">fklghliabgljglabg</div>
<div class="contactForm">
<form action="https://formsubmit.co/myemail#aol.com" method="POST">
<label class="contactFormName" for="name">Name:</label>
<input type="text" name="name" required="" placeholder="Enter Your Name">
<label class="contactFormEmail" for="Email">Email:</label>
<input type="email" name="email" required="" placeholder="Email Address">
<label class="contactForMessage" for="message" placeholder="Write Your Message here">What Do You Want to Say:</label>
<textarea name="message" id="message" placeholder="Write Your mEssage here" cols="30" rows="10"></textarea>
<input type="hidden" name="_subject" value="New submission From My website">
<input type="hidden" name="_next" value="https://sunnymoon25.github.io/mainPages/thanks.html">
<input type="hidden" name="_captcha" value="false">
<button type="submit">Send</button>
</form>
</div>
</div>
and put css below like
.ContactPageAll {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.socials {
width: 50%;
}
.contactForm {
width: 50%;
}
.contactForm input, textarea, button {
display: block;
padding: 2%;
width: 100%;
background-color: white;
color: #111;
}
here I have taken 50:50 width, you can take any width and update it as you want
I'm trying to change my sign-up page so that the avatar is to the left and the username, password boxes etc are to the right. I've tried using split divs but this doesn't seem to work. I've also tried positioning the avatar to the left but that also hasn't worked. Here is my style and body code.
body {
font-family: Arial, Helvetica, sans-serif;
}
form {
border: 3px solid #f1f1f1;
}
* {
margin: 0;
padding: 0;
}
#logo {
float: left;
display: inline-block;
object-fit: none;
background: transparent;
padding-bottom: 0;
padding-top: 0;
padding-left: 10px;
}
.navbar {
overflow: hidden;
background-color: #D47ACE;
position: fixed;
top: 0;
width: 100%;
z-index: 1001;
}
.navbar-logo {
font-size: 25px;
word-spacing: 0px;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 23px;
font-style: normal;
font-family: "Rockwell", Monaco, monospace;
letter-spacing: 0px;
word-spacing: 5px;
font-weight: 700;
}
#nav li {
display: inline;
padding-right: 30px;
}
.navbar a:hover {
color: #ffffff;
}
#demoFont {
font-family: "Lucida Console", Monaco, monospace;
font-size: 29px;
letter-spacing: 5.2px;
word-spacing: 2px;
color: #000000;
font-weight: 700;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: uppercase;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: pink;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
padding-top: 10vh;
padding-bottom: 0vh;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
.button {
background-color: pink;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<form action="/action_page.php" method="post">
<div class="imgcontainer">
<img src="https://via.placeholder.com/568" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Enter</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
Any help would be great.
You can use display: flex; property as shown in the below sample.
body {
font-family: Arial, Helvetica, sans-serif;
}
form {
border: 3px solid #f1f1f1;
}
* {
margin: 0;
padding: 0;
}
.d-flex{
display: flex;
flex-wrap: wrap;
align-items: center;
}
.img-container, .input-container {
width: 50%;
}
.img-container {
text-align: center;
}
#logo {
display: inline-block;
object-fit: none;
background: transparent;
padding-bottom: 0;
padding-top: 0;
padding-left: 10px;
}
.navbar {
overflow: hidden;
background-color: #D47ACE;
position: fixed;
top: 0;
width: 100%;
z-index: 1001;
}
.navbar-logo {
font-size: 25px;
word-spacing: 0px;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 23px;
font-style: normal;
font-family: "Rockwell", Monaco, monospace;
letter-spacing: 0px;
word-spacing: 5px;
font-weight: 700;
}
#nav li {
display: inline;
padding-right: 30px;
}
.navbar a:hover {
color: #ffffff;
}
#demoFont {
font-family: "Lucida Console", Monaco, monospace;
font-size: 29px;
letter-spacing: 5.2px;
word-spacing: 2px;
color: #000000;
font-weight: 700;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: uppercase;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: pink;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
padding-top: 10vh;
padding-bottom: 0vh;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
.button {
background-color: pink;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<form action="/action_page.php" method="post" class="d-flex">
<div class="img-container">
<img src="https://via.placeholder.com/140x100" alt="Avatar" class="avatar">
</div>
<div class="input-container">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Enter</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</div>
</form>
One thing you can do is add a display: flex on the form, setting its contents to wrap when there is no more available space on the line. Then you can set a width of 100% on the last .container which is housing the cancel button and forgotten password link, forcing it to a new line.
Here is that new CSS:
form {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.imgcontainer .avatar {
padding-top: 0;
}
/* .imgcontainer+.container means the .container adjacent to `.imgcontainer */
.imgcontainer,
.imgcontainer+.container {
flex: 1;
}
/* .container+.container means the last .container in your case */
.container+.container {
width: 100%;
}
Which produces:
Demo
form {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.imgcontainer,
.imgcontainer+.container {
flex: 1;
}
.imgcontainer .avatar {
padding-top: 0;
}
.container+.container {
width: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
form {
border: 3px solid #f1f1f1;
}
* {
margin: 0;
padding: 0;
}
#logo {
float: left;
display: inline-block;
object-fit: none;
background: transparent;
padding-bottom: 0;
padding-top: 0;
padding-left: 10px;
}
.navbar {
overflow: hidden;
background-color: #D47ACE;
position: fixed;
top: 0;
width: 100%;
z-index: 1001;
}
.navbar-logo {
font-size: 25px;
word-spacing: 0px;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 23px;
font-style: normal;
font-family: "Rockwell", Monaco, monospace;
letter-spacing: 0px;
word-spacing: 5px;
font-weight: 700;
}
#nav li {
display: inline;
padding-right: 30px;
}
.navbar a:hover {
color: #ffffff;
}
#demoFont {
font-family: "Lucida Console", Monaco, monospace;
font-size: 29px;
letter-spacing: 5.2px;
word-spacing: 2px;
color: #000000;
font-weight: 700;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: uppercase;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: pink;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
padding-top: 10vh;
padding-bottom: 0vh;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
.button {
background-color: pink;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<form action="/action_page.php" method="post">
<div class="imgcontainer">
<img src="https://via.placeholder.com/568" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Enter</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
I have the image formated how I want, I just can't get it to float to the top so it looks nice next to the form I made. I have tried making a div and having that float up to no avail. Help?
header {
background-color: #030303;
color: #ffffff;
height: 60px;
text-align: left;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo {
float: right;
height: 50px;
}
header h1 {
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox {
float: left;
height: 750px;
width: 15%;
float: left;
background-color: #bd0202;
text-align: center;
}
#homecontent {
height: 750px;
width: 84.3%;
float: left;
background-color: #030303;
color: white;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
border-radius: 10px;
}
nav li {
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
/*nav li:hover{
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}*/
nav ul {
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer {
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1 {
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html {
background-color: #030303;
}
button {
background-color: #030303;
border: none;
color: white;
font-size: 20px;
height: 27px;
}
button:hover {
background-color: white;
color: #030303;
border-radius: 5px;
transition: 0.5s;
}
main {
border: white solid;
border-radius: 10px;
order-radius: 10px;
}
#wrapper {
padding: 20px;
}
#schedulebox {
border-right: white solid;
}
#dragonpic {
width: 1556.5px;
height: auto;
}
#homecontent2 {
border: solid white;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
#homecontent h2,
#homecontent h3 {
padding-left: 10px;
}
#resourcescontent {
color: white;
padding-left: 10px;
}
a img:visited {
border: black;
}
a img:hover {
border: white solid;
border-width: thin;
transition: 0.3s;
}
a.button {
-webkit-appearance: button;
-moz-appearance: button;
border: none;
color: white;
text-decoration: none;
height: 20px;
padding: 5px;
font-size: 20px;
}
a.button:hover {
background-color: white;
color: #030303;
transition: 0.3s;
border-radius: 5px;
}
#beyondlogo {
margin-left: auto;
margin-right: auto;
width: 50%;
display: block;
border-radius: 10px;
}
#resourcescontent p,
#resourcescontent h2 {
text-align: center;
}
form {
color: white;
}
label {
float: left;
display: block;
text-align: right;
width: 120px;
padding-right: 1em;
}
input,
textarea {
display: block;
margin-bottom: 20px;
}
#joiningcontent h2 {
color: white;
padding-left: 20px;
width: 20%;
text-align: center;
}
#joiningpic {
margin-left: auto;
margin-bottom: auto;
width: 50%;
display: block;
border-radius: 10px;
}
#joiningcontent {}
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main class="clearfix">
<nav>
<ul>
<li>Home</li>
<li>Resources</li>
<li>Join Us!</li>
</ul>
</nav>
<div id="joiningcontent">
<h2>If you wish to join, provide us with some information so we can contact you!</h2>
<form>
<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" name="FName" required>
<label for="LastName">Last Name:</label>
<input type="text" id="LastName" name="LName" required>
<label for="emailboi">Email:</label>
<input type="email" id="emailboi" name="Email" required>
<label for="GuestOrMember">Are you signing up as a Guest?</label>
<input id="GuestOrMember" type="checkbox">
<button type="submit" value="submit">Submit</button>
</form>
<img src="assets/signuppic.png" id="joiningpic">
</div>
</main>
</div>
I'm still a little lost on what to do and I'm fairly new to web development so I appologize for any ameteur mistakes made.
For both the img and the form you need to:
float: left;
display: inline;
This is due to the form being a block level element so you need to float both left and set them to be inline, rather than block. If you put img before form then it will be on the left of the form, put it after the form and it will be on the right of the form.
Be aware that if the image and form do not fit within the width of the browser window then they will wrap and one will be below the other, whichever way round you have them.
https://jsfiddle.net/bryanwadd/o1da8buw/
For correct working float, the floated element should be the first. Just move img as a first element in parent, like this:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
<meta charset="UTF-8">
<title>Sign Up</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main class="clearfix">
<nav><ul><li>Home</li> <li>Resources</li> <li>Join Us!</li></ul></nav>
<div id="joiningcontent">
<img src="assets/signuppic.png" id="joiningpic">
<h2>If you wish to join, provide us with some information so we can contact you!</h2>
<form>
<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" name="FName" required>
<label for="LastName">Last Name:</label>
<input type="text" id="LastName" name="LName" required>
<label for="emailboi">Email:</label>
<input type="email" id="emailboi" name="Email" required>
<label for="GuestOrMember">Are you signing up as a Guest?</label>
<input id="GuestOrMember" type="checkbox">
<button type="submit" value="submit">Submit</button>
</form>
</div>
</main>
</div>
</body>
</html>
UPDATED2
header{
background-color: #030303;
color:#ffffff;
height: 60px;
text-align: left;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo{
float: right;
height: 50px;
}
header h1{
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox{
float: left;
height: 750px;
width: 15%;
float: left;
background-color: #bd0202;
text-align: center;
}
#homecontent{
height: 750px;
width: 84.3%;
float: left;
background-color: #030303;
color: white;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
border-radius: 10px;
}
nav li{
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
/*nav li:hover{
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}*/
nav ul{
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer{
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1{
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html{
background-color: #030303;
}
button{
background-color: #030303;
border: none;
color: white;
font-size: 20px;
height: 27px;
}
button:hover{
background-color: white;
color: #030303;
border-radius: 5px;
transition: 0.5s;
}
main{
border: white solid;
border-radius: 10px;
order-radius: 10px;
}
#wrapper{
padding: 20px;
}
#schedulebox{
border-right: white solid;
}
#dragonpic{
width: 1556.5px;
height: auto;
}
#homecontent2{
border: solid white;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
#homecontent h2, #homecontent h3{
padding-left: 10px;
}
#resourcescontent{
color: white;
padding-left: 10px;
}
a img:visited{
border: black;
}
a img:hover{
border: white solid;
border-width: thin;
transition: 0.3s;
}
a.button {
-webkit-appearance: button;
-moz-appearance: button;
border: none;
color: white;
text-decoration: none;
height: 20px;
padding: 5px;
font-size: 20px;
}
a.button:hover{
background-color: white;
color: #030303;
transition: 0.3s;
border-radius: 5px;
}
#beyondlogo{
margin-left: auto;
margin-right: auto;
width: 50%;
display: block;
border-radius: 10px;
}
#resourcescontent p, #resourcescontent h2{
text-align: center;
}
form{
color: white;
display: inline-block;
vertical-align: top;
max-width: 40%;
box-sizing: border-box;
}
label{
float: left;
display: block;
text-align: right;
width: 120px;
padding-right: 1em;
}
input, textarea{
display: block;
margin-bottom: 20px;
}
#joiningcontent h2{
color: white;
padding-left: 20px;
width: 20%;
text-align: center;
}
#joiningpic{
margin-left: auto;
margin-bottom: auto;
width: 50%;
border-radius: 10px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
#joiningcontent{
}
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main class="clearfix">
<nav><ul><li>Home</li> <li>Resources</li> <li>Join Us!</li></ul></nav>
<div id="joiningcontent">
<h2>If you wish to join, provide us with some information so we can contact you!</h2>
<form>
<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" name="FName" required>
<label for="LastName">Last Name:</label>
<input type="text" id="LastName" name="LName" required>
<label for="emailboi">Email:</label>
<input type="email" id="emailboi" name="Email" required>
<label for="GuestOrMember">Are you signing up as a Guest?</label>
<input id="GuestOrMember" type="checkbox">
<button type="submit" value="submit">Submit</button>
</form>
<img src="assets/signuppic.png" id="joiningpic">
</div>
</main>
</div>
Good day, somehow my check box and the text that needs to be beside it do not align in the same row. I have the code on JS Fiddle.
https://jsfiddle.net/6ejwdg9v/
The checkbox code is:
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
</div>
the classes form-group and checkbox are not touched with custom css code which is why I wonder how are they affected.
EDIT: I added the code in the "duplicate of another question" it did not do anything I still need help
changed class for .checkbox added
vertical-align: middle;
width: 20px;
also added
input[type=checkbox] {
width: 20px;
}
#font-face {
font-family: 'brandon_reg';
src: url('../fonts/brandon-grotesque-light.otf');
}
#font-face {
font-family: 'brandon_med';
src: url('../fonts/brandon-grotesque-medium.otf');
}
#font-face {
font-family: 'brandon_black';
src: url('../fonts/brandon-grotesque-black.otf');
}
html {
font-size: 100%;
}
body {
margin: 0 auto;
display: block;
/*REGISTER BACKGROUND*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/*REGISTER BACKGROUND*/
}
.regular_bg {
font-family: 'brandon_reg';
}
.med_bg {
font-family: 'brandon_med';
}
.sml_padding {
margin: -10;
padding: -10;
}
.thick_bg {
font-family: 'brandon_black';
}
.thick_bg2 {
font-size: 35px;
}
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.fadeIn {
-webkit-animation: animat_show 0.8s;
animation: animat_show 0.8s;
visibility: visible !important;
}
#-webkit-keyframes animat_show{
0%{opacity:0}
100%{opacity:1}
}
.btn-group-sm>.btn, .btn-sm {
float: none;
}
.navbar-toggle {
display: inline-block;
float: none;
}
.full_width {
height: auto;
width:100%;
}
.ul_login {
color: #00a6a6;
}
.ul_reg {
color: #f08300;
}
.justify_text {
transform: translateT(-50);
text-align: justify;
padding: 2%;
display: flex;
justify-content: center;
align-items: center;
}
/*
.row_center {
display: flex;
}
.row_center>* {
flex: 1;
}
*/
.center-block {
margin-left:auto;
margin-right:auto;
display:block;
}
.icon_text_padding {
padding-bottom: 20px;
align-items: center;
margin: 0 auto;
}
.fab {
padding: 20px;
font-size: 50px;
color: #FFF;
}
.fab:hover {
color: #c9c9c9;
text-decoration: none;
}
/*IMPORTANT CSS FOR HEADER*/
.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: .5s;
}
.list1 {
float: left;
font-size: 200%;
}
.list2 {
float: right;
font-size: 200%;
}
.list2 li a:hover {
color: #fff;
}
/*
.lines {
position: relative;
padding: 10px 0;
}
.lines:before {
content: '';
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
top: 0;
left: 0;
width: 32%;
height: 1px;
background: #cfcfcf;
}
.lines:after {
content: '';
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
bottom: 0;
left: 0;
width: 32%;
height: 1px;
background: #cfcfcf;
}
.lines_med:before {
width: 24%;
}
.lines_med:after {
width: 24%;
}
.lines_med2:before {
width: 27%;
}
.lines_med2:after {
width: 27%;
}
.lines_long:before {
width: 38%;
}
.lines_long:after {
width: 38%;
}
*/
nav .logo {
float: left;
}
nav .logo img {
height: 80px;
transition: 5s;
}
nav ul {
float: left;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
line-height: 80px;
color: #262626;
padding: 5px 20px;
text-decoration: none;
transition: .5s;
}
nav ul li a:hover {
color: #fff;
background: #00a6a6;
text-decoration: none;
}
footer {
width: 100%;
background-color: #00a6a6;
padding: 3%;
color: #FFF;
}
.carousel-control.left, .carousel-control.right {
background-image:none !important;
filter:none !important;
}
.container-fluid {
max-width: 1200px;
}
footer .container-fluid {
max-width: 100%;
}
.footer_links a h4 {
color: #fff;
}
.footer_links a:hover {
color: #fff;
text-decoration: underline;
}
.faq a:hover {
text-decoration: none !important;
}
.info_container {
max-width: 1920px;
width: 100%;
margin: 0 auto;
}
.info_box h2 {
text-align: center;
}
.info_header {
padding-top: 4%;
padding-bottom: 4%;
}
.bottom_padding {
padding-bottom: 4%;
}
.info_font {
font-size: 18px;
}
.mv_font {
font-size: 20px;
text-align: left;
}
.contact_font {
font-size: 20px;
text-align: center;
}
.center_font {
margin: 0 auto;
text-align: center;
}
#icon {
max-width: 90%;
}
#media (max-width: 600px){
#icon {
max-width: 150px;
}
h4 {
font-size: 1.7em;
}
}
/*CONTACT PAGE*/
.text_field_design {
padding: 50px 0 80px;
text-align: center;
}
.text_field_design p {
padding-bottom: 80px;
color: #737373;
}
.text_field_design h2 {
color: #4c4c4c;
margin: 20px 0 20px;
}
.text_field_design .input-group {
margin-bottom: 25px;
}
.input-group-addon {
padding: -50px !important;
font-size: 20px;
}
.text_field_design .form-control {
border-radius: 0 !important;
}
.text_field_design span {
border-radius: 0 !important;
}
.text_field_design .btn {
border-radius: 0;
width: 100%;
font-size: 15px;
background-color: #f08300;
color: #fff;
}
.text_field_design .btn:hover {
background-color: #f3a64c;
color: #fff !important;
}
.box_shadow {
box-shadow: 10px 10px 5px grey;
}
.curved_img {
border-radius: 10px;
}
/*REGISTER*/
.reg_box {
width: 90%;
padding: 70px 70px 10px;
background: #fff;
top: 50%;
left: 50%;
margin: 0 auto;
opacity: 0.9;
border-radius: 30px;
}
.reg_box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.reg_box input {
width: 100%;
margin-bottom: 20px;
}
.reg_box input[type="text"], input[type="password"] {
border: none;
border-bottom: 1px solid #000;
background: transparent;
outline: none;
height: 40px;
}
.reg_box input[class="reg_signup"] {
font-family: 'brandon_med';
border: none;
outline: none;
height: 40px;
background: #f08300;
color: #fff;
font-size: 18px;
margin-top: 20px;
}
.reg_box input[class="reg_fb"] {
font-family: 'brandon_med';
border: none;
outline: none;
height: 40px;
background: #3b579d;
color: #fff;
font-size: 18px;
}
.reg_box input[class="reg_google"] {
font-family: 'brandon_med';
border: none;
outline: none;
height: 40px;
background: #2eaa52;
color: #fff;
font-size: 18px;
}
.checkbox {
float: left !important;
display: block;
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
vertical-align:middle;
}
/*
.register_form {
text-align: center;
margin: 100px 400px;
}
.registration {
width: 100%;
background-color: #fff;
opacity: 0.9;
padding: 50px 0px;
}
.align_left_reg {
text-align: left;
font-size: 18px;
}
#text_field {
width: 250px;
border-radius: 5px;
padding: 5px;
}
#phone {
width: 250px;
padding: 5px;
border-radius: 5px;
outline: 0px;
}
#rd {
font-family: 'brandon_med';
}
.button_container {
max-width: 60%;
}
.ref_button {
width: 100px;
height: 40px;
font-size: 18px;
background-color: #f08300;
color: #fff;
}
.fb_button {
width: 200px;
height: 40px;
font-size: 18px;
background-color: #3b579d;
color: #fff;
}
.fb_button:hover {
background-color: #3662d0;
}
.ref_button:hover {
background-color: #f3a64c;
color: #fff !important;
}
element.style {
color: white;
}
REGISTER*/
input[type=checkbox] {
width: 20px;
}
<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>My White Card</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body style="background-color:#000;" class="regular_bg">
<br><br>
<div class="reg_box">
<div class="row">
<div class="col-md-6">
<input type="submit" value="Sign Up With Facebook" class="reg_fb"></i>
</div>
<div class="col-md-6">
<input type="submit" value="Sign Up With Google" class="reg_google"></i>
</div>
</div>
<br>
<form>
<div class="row">
<div class="col-md-6 col-sm-12">
<p>First Name</p>
<input type="text" placeholder="First Name">
<p>Email</p>
<input type="text" placeholder="Email">
<p>Password</p>
<input type="password" placeholder="Password">
</div>
<div class="col-md-6 col-sm-12">
<p>Last Name</p>
<input type="text" placeholder="Last Name">
<p>Number</p>
<input type="text" placeholder="Number">
<p>Retype Password</p>
<input type="password" placeholder="Retype Password">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
</div>
<input type="submit" value="Sign Up" class="reg_signup">
</div>
</form>
</div>
</body>
</html>
Turning the label into a flexbox will give you vertical alignment.
.checkbox label {
display: flex;
align-items: center; /* Vertical alignment */
}
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
</div>
I have a very simple form consisting of an <input type="text"> and an <input type="submit">.
Here is the HTML:
body {
font-family: sans-serif;
}
input {
border: none;
outline: none;
}
form {
background-color: #679;
height: 3rem;
padding: 1rem;
}
input[type="text"] {
height: 100%;
width: 15rem;
font-size: 1rem;
padding: 0 1rem;
background-color: #eee;
}
input[type="submit"] {
height: 100%;
border-radius: 0;
background-color: #999;
cursor: pointer;
}
<p>The form:</p>
<form action="index.html">
<input type="text" placeholder="Search..."><input type="submit">
</form>
And here is the problem. This looks like this in all browsers that I tested:
The blue background is the <form>.
Why is the submit button shifted down and not in line with the text input element?
Furthermore, if the padding of the <form> element is removed, the submit button even sticks out of the <form> element.
Add a vertical-align: top to your input element.
body {
font-family: sans-serif;
}
input {
border: none;
outline: none;
}
form {
background-color: #679;
height: 3rem;
padding: 1rem;
}
input[type="text"] {
height: 100%;
width: 15rem;
font-size: 1rem;
padding: 0 1rem;
background-color: #eee;
vertical-align: top;
}
input[type="submit"] {
height: 100%;
border-radius: 0;
background-color: #999;
cursor: pointer;
vertical-align: top;
}
<p>The form:</p>
<form action="index.html">
<input type="text" placeholder="Search..."><input type="submit">
</form>
In your example a flexbox would work even better, giving you a little bit more control and flexibility:
body {
font-family: sans-serif;
}
input {
border: none;
outline: none;
}
form {
display: flex;
align-items: center;
background-color: #679;
height: 3rem;
padding: 1rem;
}
input[type="text"] {
height: 100%;
width: 100%;
font-size: 1rem;
padding: 0 1rem;
background-color: #eee;
}
input[type="submit"] {
height: 100%;
border-radius: 0;
background-color: #999;
cursor: pointer;
vertical-align: top;
}
<p>The form:</p>
<form action="index.html">
<input type="text" placeholder="Search..."><input type="submit">
</form>
This is due to vertical alignement, you need to make it top or bottom to avoid the issue :
body {
font-family: sans-serif;
}
input {
border: none;
outline: none;
vertical-align:top;
}
form {
background-color: #679;
height: 3rem;
padding: 1rem;
}
input[type="text"] {
height: 100%;
width: 15rem;
font-size: 1rem;
padding: 0 1rem;
background-color: #eee;
}
input[type="submit"] {
height: 100%;
border-radius: 0;
background-color: #999;
cursor: pointer;
}
<p>The form:</p>
<form action="index.html">
<input type="text" placeholder="Search..."><input type="submit">
</form>