I am trying to keep my content centered when I decrease my browser width (or use a mobile device such as an iPhone.
Everything is centered until about a max-width of 560px, at which point anything less than 560px covers up the right hand side of the page.
I have margin: 0 auto for my main groups within the body, and I thought that would always keep content centered.
Here is my JSFiddle for compactness
Here is a picture of what the page looks like on an iPhone 6.
HTML:
<body>
<div class="header">
<p>TWIN CAT AUDIO</p>
</div>
<div class="container">
<p class="center">Sign up for updates!</p>
<!--SIGN UP -->
<form method="post" name="signup" id="signup" class="center" >
<input type="text" name="first-name" id="first-name" placeholder="First name" class="all-input-text" />
<br />
<input type="text" name="last-name" id="last-name" placeholder="Last name" class="all-input-text"/>
<br />
<input type="email" name="email" id="email" placeholder="Email address" class="all-input-text" />
<br />
<input type="password" name="password" id="password" class="all-input-text" placeholder="Password" />
<br />
<input type="password" name="pass-confirm" id="pass-confirm" class="all-input-text" placeholder="Confirm password" />
<br />
<input type="submit" name="submit" id="signup-btn" value="SIGN UP" />
</form>
<div class="error-message center"></div>
<p class="redirect center">Already have an account? Log in </p>
</div>
<script src="../Bootstrap/js/bootstrap.min.js"></script>
CSS:
html, body {
font-family: "Dosis", "Open Sans", sans-serif;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
color: #333;
}
.container {
margin: 0 auto;
max-width: 600px;
max-height: 100%;
padding: 0 15px 0 15px;
border: none;
}
.header {
color: #4F94CD;
padding-bottom: 10px;
text-align: center;
font-size: 4.5em;
width: 100%;
height: 100px;
background-color: white;
margin-bottom: 40px;
border-bottom: thin lightGrey solid;
display: block;
white-space: nowrap;
}
.container > p {
font-size: 2em;
margin-bottom: 20px;
color: #4F94CD;
}
a.no-link-style:link, a.no-link-style:visited, a.no-link-style:hover {
color: #4F94CD;
text-decoration: none;
}
a.no-link-style:hover{
font-weight: bold;
}
.center {
text-align: center;
}
form {
max-width: 800px;
margin: 0 auto;
}
.all-input-text {
margin-bottom: 12px;
border: 1px solid #ccc;
border-radius: 1px;
padding: 3px;
font-size: 1.2em;
width: 426px;
height: 45px;
color: #555;
font-family: 'Dosis', sans-serif;
}
/*Removes the yellow background color when Chrome autofills*/
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
-webkit-text-fill-color: #777;
}
input::-webkit-input-placeholder {
color: #bbb;
}
input:-moz-placeholder {
color: #777;
}
input::-moz-placeholder {
color: #777;
}
input:-ms-input-placeholder {
color: #bbb;
}
input:focus::-webkit-input-placeholder {
color: #ddd;
}
input:focus::-moz-placeholder {
color: #aaa;
}
input[type="submit"] {
border-radius: 20px;
border: none;
width: 430px;
height: 35px;
font-size: 1.2em;
color: white;
margin-top: 5px;
margin-bottom: 20px;
background-color: #4F94CD;
font-family: 'Dosis', sans-serif;
}
input[type="submit"]:hover {
background-color: #7EC0EE;
}
.error-message {
display: none;
margin: 0 auto;
padding: 6px;
margin-top: 30px;
max-width: 300px;
background-color: #333;
color: white;
font-size: 20px;
border-radius: 8px;
}
p.redirect {
font-size: 1.2em;
color: #333;
}
p.redirect a {
color: #4F94CD;
font-weight: bold;
text-decoration: none;
}
p.redirect a:hover {
color: #82b0d6;
}
#media (max-width: 670px) {
.header {
font-size: 2.7em;
height: 60px;
margin-bottom: 20px;
}
.container > p {
font-size: 1.5em;
margin-bottom: 15px;
}
form {
max-width: 80%;
}
}
It does not align to right, it has horizontal scroll because width of input field is in px, make it in %
#media (max-width: 670px) {
.header {
font-size: 2.7em;
height: 60px;
margin-bottom: 20px;
}
.container > p {
font-size: 1.5em;
margin-bottom: 15px;
}
form,input {
max-width: 80%;
}
}
See updated: https://jsfiddle.net/ku9wsne8/2/
It's because some elements have widths specifically declared.
Add this to your media query and it should solve your problem;
.all-input-text,
input[type="submit"] {
width: 100%;
}
Updated fiddle: https://jsfiddle.net/ku9wsne8/3/
Related
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'm trying fix the Log-In & registration form. When you click on "Register" on my menu, you can see that the labels are perfectly formatted in the form but the input box are offset. I tried to fix it with float:left but it didn't work out too well. If somebody could help me with that, that would be awesome.
var popup = document.getElementById('id01');
var popupreg = document.getElementById('id02');
window.onclick = function(event) {
if (event.target == popup) {
popup.style.display = "none";
}
if (event.target == popupreg) {
popupreg.style.display = "none";
}
}
body {
margin: 0 auto;
background: #fff;
}
div.container {
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 5px;
background-color: #000;
}
a.nounderline span {
color: #00B200;
}
.main-menu {
width: 200px;
margin: 0 auto;
right: 26px;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
height: 35%;
}
.floating-sidebar li {
text-decoration: none;
outline: none;
line-height: 2em;
display: block;
border-radius: auto;
position: relative;
top: 10px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.floating-sidebar li a {
background-color: #fff;
color: #444950;
display: block;
padding: 7px;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 18;
font-weight: bold;
border-radius: 9px;
}
.floating-sidebar li a:hover {
background-color: #eee;
color: #00B200;
}
.floating-sidebar li a.active {
background-color: #eee;
color: #00B200;
}
.floating-sidebar:hover li a.register-link {
color: #b5e7a0;
background: #fff;
}
.floating-sidebar li a.active:hover {
background-color: #00B200;
color: #fff;
}
.topnav input[type=text] {
float: left;
padding: 4.5px;
padding-left: 28px;
width: 305px;
border: 2px solid #00B200;
border-radius: 18px;
outline: inherit;
margin-top: 80px;
margin-left: 115px;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 18px;
direction: inherit;
}
input::placeholder {
color: #BEBEBE;
}
span.topnav {
right: 50px;
}
.sortby-box {
padding-top: 124px;
padding-left: 44;
margin: 0 auto;
position: fixed;
}
.select-opt {
padding: 4px;
width: 120px;
border-radius: 8px;
outline: none;
border: 1px solid #00B200;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.select-opt option {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.popup,
.popupreg {
display: none;
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.8);
/* Black w/ opacity */
padding-top: 60px;
}
.popup-content,
.popupreg-content {
float: left;
position: fixed;
background-color: rgb(245, 245, 245);
width: 600px;
height: 400px;
border-radius: 39px;
left: 666px;
top: 210px;
border: 2px solid rgb(109, 196, 109);
}
.popup,
.popupreg label {
font-family: Arial, Helvetica, sans-serif;
}
.popup [type=text],
[type=password] {
padding: 6px 8px;
width: 250px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
margin: 10px 0;
margin-left: 15px;
box-sizing: border-box;
}
.popupreg [type=text],
[type=password] {
padding: 6px 8px;
width: 250px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
margin: 10px 0;
margin-left: 15px;
box-sizing: border-box;
}
.popup input[type=submit] {
padding: 8px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
}
.popupreg input[type=submit] {
padding: 8px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
}
.popup [type=submit] {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: #fff;
color: #00B200;
font-size: 22px;
padding: 180px;
margin-left: 88px;
margin-top: 5px;
width: 250px;
height: 60px;
}
.popupreg [type=submit] {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: #fff;
color: #00B200;
font-size: 22px;
padding: 180px;
margin-left: 88px;
margin-top: 5px;
width: 250px;
height: 60px;
}
.popup .submit-log:hover {
color: #fff;
background-color: #00B200;
cursor: pointer;
}
.popupreg .submit-log:hover {
color: #fff;
background-color: #00B200;
cursor: pointer;
}
.cancel {
text-align: right;
position: relative;
cursor: pointer;
}
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
.username-section,
.reg-section {
padding: 32px;
margin-left: 75px;
margin-top: 20px;
}
span.psswrd {
float: right;
padding-top: 16px;
}
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<header>
<div class="container">
Hello
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<div class="main-menu">
<ul class="floating-sidebar">
<li>Log In</li>
<li>Register</li>
<li>About</li>
<li>Language</li>
</ul>
</div>
</sidebar>
<div class="sortby-box">
<select class="select-opt">
<option>Newest</option>
<option>Popularity</option>
<option>Recommended</option>
</select>
</div>
<div class="topnav">
<input style="position:relative;" type="text" name: "searchText" placeholder="Search here.." maxlength="18">
<span style="position:absolute; left: 126px; top: 119px;" class="fa fa-search icon"></span>
</div>
<div id="id01" class="popup">
<form class="popup-content" action="/action_page.php" method="get">
<div class="cancel">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="username-section">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" minlength="6" maxlength="20"><br><br>
<label for="psswrd">Password</label>
<input type="password" id="passwrd" name="psswrd" minlength="6" maxlength="20"><br><br>
<input type="submit" class="submit-log" value="Log In">
</div>
</form>
</div>
<div id="id02" class="popupreg">
<form class="popupreg-content" action="/action_page.php" method="get">
<div class="cancel">
<span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="reg-section">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" minlength="6" maxlength="20"><br><br>
<label for="usrname">Mail</label>
<input type="text" id="mail" name="mail" minlength="6" maxlength="20"><br><br>
<label for="psswrd">Password</label>
<input type="password" id="passwrd" name="psswrd" minlength="6" maxlength="20"><br><br>
<input type="submit" class="submit-log" value="Register">
</div>
</form>
</div>
<script src="index.js"></script>
<footer>
</footer>
A simple fix would be to give the label elements a display: inline-block; and give them a defined width such as width: 100px;.
I quickly created a JSFiddle to illustrate.
Hope this helped.
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>
I am new to css so I cannot figure out the way of changing the color of pop up menus two buttons (Submit and Reset). Both of these are placed at the end of the pop up menu, but are not readable because of the color. I have used this code from this site and here the color of button is teal but in my code the button and text color is white and because of this I am unable to read the buttons.
I have tried changing the background color, text color in css but nothing is working
image
Current Image
Current image
I expect the button to be blue
```
.gbtn{
background: #d0d0d0;
color: #444444;
padding: 0 15px;
text-transform: uppercase;
height: 40px;
line-height: 40px;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
font-size: 12px;
}
.gbtn.btn-estimate{
padding:0 22px;
margin-top:7px;
}
.gbtn.btn-discount{
padding:0 26px;
}
.gbtn:hover{
background: #fbc443;
color: #25BCE9;
}
.gbtn:hover span{
color: #25BCE9;
}
.gbtn span{
display: inline-block;
}
button{
/* border:none;
background: #25BCE9;
color: #fff;
display: flex;
justify-content: flex-start;*/
}
#contactForm {
display: none;
z-index: 10000;
border: 3px solid #25BCE9;
padding: 2em;
width: 400px;
text-align: center;
background: #fff;
position: fixed;
top:50%;
left:50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%)
}
input{
height: 40px;
margin: .8em auto;
font-family: inherit;
text-transform: inherit;
font-size: inherit;
display: block;
width: 280px;
padding: .4em;
}
textarea {
height: 80px;
width:337px;
margin-right: 5px;
margin-bottom: 5px;
font-family: inherit;
text-transform: inherit;
font-size: inherit;
display: block;
padding: .4em;
resize: none;}
.formBtn {
display: inline-block;
background: teal;
color: #fff;
width: 140px;
font-weight: 100;
font-size: 1.2em;
padding: 5px 0;
border: none;
}
<div class="block-currency">
<div class="gbtn btn-estimate">
<div id="contact">Get Quote</div>
</div>
<div id="contactForm">
<h1>Keep in touch!</h1>
<small>We'll get back to you as quickly as possible</small>
<form action="#">
<input placeholder="Name" type="text" required />
<input placeholder="Email" type="email" required />
<input placeholder="Subject" type="text" required />
<textarea placeholder="Comment"></textarea>
<input class="formBtn" type="submit" />
<input class="formBtn" type="reset" />
</form>
</div>
</div>
Block Currency Code
.block-currency{
position:relative;
float:right;
cursor:pointer;
line-height:50px;
height:50px;
}
.block-currency:hover ul{
visibility:visible;
top:50px;
opacity:1;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
}
```
.gbtn{
background: #d0d0d0;
color: #444444;
padding: 0 15px;
text-transform: uppercase;
height: 40px;
line-height: 40px;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
font-size: 12px;
}
.gbtn.btn-estimate{
padding:0 22px;
margin-top:7px;
}
.gbtn.btn-discount{
padding:0 26px;
}
.gbtn:hover{
background: #fbc443;
color: #25BCE9;
}
.gbtn:hover span{
color: #25BCE9;
}
.gbtn span{
display: inline-block;
}
button{
/* border:none;
background: #25BCE9;
color: #fff;
display: flex;
justify-content: flex-start;*/
}
#contactForm {
z-index: 10000;
border: 3px solid #25BCE9;
padding: 2em;
width: 400px;
text-align: center;
background: #fff;
position: relative;
top:0%;
left:0%;
}
input{
height: 40px;
margin: .8em auto;
font-family: inherit;
text-transform: inherit;
font-size: inherit;
display: block;
width: 280px;
padding: .4em;
}
textarea {
height: 80px;
width:337px;
margin-right: 5px;
margin-bottom: 5px;
font-family: inherit;
text-transform: inherit;
font-size: inherit;
display: block;
padding: .4em;
resize: none;}
.formBtn {
display: inline-block;
background: teal;
color: #fff;
width: 140px;
font-weight: 100;
font-size: 1.2em;
padding: 5px 0;
border: none;
}
<div class="block-currency">
<div class="gbtn btn-estimate">
<div id="contact">Get Quote</div>
</div>
<div id="contactForm">
<h1>Keep in touch!</h1>
<small>We'll get back to you as quickly as possible</small>
<form action="#">
<input placeholder="Name" type="text" required />
<input placeholder="Email" type="email" required />
<input placeholder="Subject" type="text" required />
<textarea placeholder="Comment"></textarea>
<input class="formBtn" type="submit" />
<input class="formBtn" type="reset" />
</form>
</div>
</div>
The quickest and easiest way is to add IDs to the input elements:
<input id="submitButton"class="formBtn" type="submit" />
<input id="resetButton"class="formBtn" type="reset" />
and change their color by targeting directly:
#submitButton {
background: blue;
}
#resetButton {
background: blue;
}
/* CSS Document */
#import url('https://fonts.googleapis.com/css?family=Exo+2');
body {
margin: 0;
padding: 0;
font-family: 'Exo 2', sans-serif, arial, helvetica, roboto, callibri, verdana;
text-align: center;
}
button {
background-color: #069;
color: #FFF;
width: 150px;
height: 40px;
border: none;
margin: 0 auto;
display: block;
font-size: 16px;
cursor: pointer;
}
div#modal {
background-color: #0004;
width: 100%;
height: 100%;
position: fixed;
top: 0;
padding-top: 120px;
}
.img_contr {
border: 1px solid red;
}
.close {
float: right;
font-size: 25px;
font-weight: bold;
width: 50px;
}
form {
border: 1px solid #666;
width: 60%;
text-align: ;
margin: 20px auto;
padding: 20px;
background-color: #fff;
}
<h2>Modal Login Form</h2>
<button>Login</button>
<div id="modal">
<form action="action_page.php">
<div class="img_contr">
<img src="https://dummyimage.com/200x200/000/fff" alt="magic">
<span class="close">×</span>
</div>
<label for="user_name">Username</label>
<input type="text" placeholder="Enter Username" />
<label for="user_pass">Password</label>
<input type="password" placeholder="Password" />
</form>
</div>
this is my code and entity, it is showing to me forward slash in span, div and p tag (both browsers.. chrome and firefox)