I am trying to make a login form. The outer box of the form is big and does not fit with the input field. How can I minimize the size of the outer box? I am trying it for the first time. So, I have no idea.
templatemo_style.css: The css part
form {
border: 3px solid #f1f1f1;
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 10px 5px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
align-content: center;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
margin: 8px 0;
border: none;
cursor: pointer;
width: 80px;
height: 25px;
padding: 3px 22px 0 0;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
}
/* Add a hover effect for buttons */
button:hover {
opacity: 0.8;
}
/* Extra style for the cancel button (red) */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the avatar image inside this container */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
/* Avatar image */
img.avatar {
width: 40%;
border-radius: 50%;
}
/* Add padding to containers */
.container {
margin: 25px auto;
position: relative;
width: 900px;
}
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}
/* 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%;
}
}
index.jsp: Html code for the form
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Student Profile</title>
<link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="index.jsp">
<div class="container">
Username:
<input type="text" placeholder="Enter Username" name="uname" required>
Password:
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</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>
</body>
</html>
One way to achieve this is
Change the Html Like this
<div class="container">
<form action="index.jsp">Username:
<input type="text" placeholder="Enter Username" name="uname" required>
Password:
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<div style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</div>
And your css Like this
form {
border: 3px solid #f1f1f1;padding: 10px;
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 10px 5px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
align-content: center;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
margin: 8px 0;
border: none;
cursor: pointer;
width: 80px;
height: 25px;
padding: 3px 22px 0 0;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
}
/* Add a hover effect for buttons */
button:hover {
opacity: 0.8;
}
/* Extra style for the cancel button (red) */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the avatar image inside this container */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
/* Avatar image */
img.avatar {
width: 40%;
border-radius: 50%;
}
/* Add padding to containers */
.container {
margin: 25px auto;
position: relative;
width: 900px;
}
enter code here
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}
/* 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%;
}
}
the result will be
hope this will do
If you put your <form> tag inside the <div class="container"> tag, the outline only goes around the form.
<body>
<div class="container">
<form action="index.jsp">
Username: ...
You might want to add some padding to make it look nice, too ;)
Also, please don't have a stroke to be able to ask your question. The "It looks like your post is mostly code; please add some more details." warning is there for a reason.
Related
I am trying to create a login page based on this one in HTML and CSS. Of course, my logo will be different, and I am trying to add some transparency to the background image.
I'm new to web dev, but I don't think this is too complicated. It's just one background pic, with a single div spreading across the screen to hold the username and password bars.
I have put what I've got so far into this JSFiddle: https://jsfiddle.net/6eLuw2th/
Here's the code:
body {
opacity: 0.2;
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-size:cover;
z-index: -1;
}
form {
border: 3px solid #f1f1f1;
z-index: 0;
}
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;
z-index: 0;
}
button {
background-color: #8C1515;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
font-size: 15px;
width: 100%;
z-index: 0;
}
button:hover {
opacity: 0.8;
z-index: 0;
}
.container {
padding: 16px;
z-index: 0;
}
span.psw {
float: right;
padding-top: 16px;
z-index: 0;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: left;
width: 100%;
z-index: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<form action="/action_page.php" method="post">
<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">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</body>
</html>
As you can see, the username/password content appears to be behind the image (even though the z-index is -1 for the background?). I do want to make the background appear slightly transparent, but have been having a bit of trouble that as well. Furthermore, my username and password bars stretch across the entire screen; I would prefer for them to be more like the example page I'm trying to recreate, with the login info bars restricted to the middle of the screen.
Any help or suggestions would be greatly appreciated!
Actually the issue you are facing is not about z-index. the issue is that you have opacity:0.2 set on the body, that's why it looks weird:
body {
opacity: 0.2; /* just remove this line */
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-size:cover;
z-index: -1;
}
also I amended the form to have less width and centered:
form {
border: 3px solid #f1f1f1;
z-index: 0;
width: 60%;
margin: 0 auto;
}
label {
color: #FFF;
}
Here is a working snippet:
body {
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-size:cover;
z-index: -1;
}
form {
border: 3px solid #f1f1f1;
z-index: 0;
width: 60%;
margin: 0 auto;
}
label {
color: #FFF;
}
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;
z-index: 0;
}
button {
background-color: #8C1515;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
font-size: 15px;
width: 100%;
z-index: 0;
}
button:hover {
opacity: 0.8;
z-index: 0;
}
.container {
padding: 16px;
z-index: 0;
}
span.psw {
float: right;
padding-top: 16px;
z-index: 0;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: left;
width: 100%;
z-index: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<form action="/action_page.php" method="post">
<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">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</body>
</html>
1) You are not loading a faded background. You're loading a solid background and trying to fade the body, which faded EVERYTHING within the body, including your form.
2) Remove "width=100%" from your INPUT parts in the CSS and it will not stretch across the screen.
Body opacity affects everything in the body, so don't do it there.
Instead put the background image in a div
<div id="background"></div>
Then the css for it
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.8;
filter:alpha(opacity=80);
}
For the input fields make sure not to have the width as 100%
If you want to have columns then check out:
https://www.w3schools.com/howto/howto_css_three_columns.asp
/*
Make the background in a div
*/
.bg {
width: 100%;
height: 100%;
position: fixed;
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-position: center;
background-repeat: no-repeat;
opacity: 0.2;
z-index: -1;
}
form {
border: 3px solid #f1f1f1;
}
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: #8C1515;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
font-size: 15px;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: left;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<!-- the div that contains the background -->
<div class="bg"></div>
<form action="/action_page.php" method="post">
<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">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</body>
</html>
Please see the code snippets for the effect you want to achieve.
body {
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-size: cover;
}
form {
border: 3px solid #f1f1f1;
}
input[type=text],
input[type=password] {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #8C1515;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
font-size: 15px;
width: 50%;
}
button:hover {
opacity: 0.8;
}
.container {
padding: 16px 16px 16px 180px;
background-color: rgba(238, 238, 238, 0.3);
;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: left;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<form action="/action_page.php" method="post">
<div class="container">
<label for="uname"><b>Username</b></label><br>
<input type="text" placeholder="Enter Username" name="uname" required><br>
<label for="psw"><b>Password</b></label><br>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button><br>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</body>
</html>
Hi I am studying and trying to make my website mobile responsive and no matter what I try have had no luck. So I have tried a range of ways to turn a menu into a mobile menu when I resize. I have also been trying to get the content to centre properly when in smaller screen. I have googled alot and worked out most now I just need help finishing it off properly.
Edit: Updated code as per request #https://stackoverflow.com/users/13447870/tobias-kristensen
/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
/* Main Body */
body {
background-image: url(Image/footballField.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100hv;
min-width: 100hv;
background-size: 100% 100%;
font-family: "Lucinda Sans", "Arial", sans-serif;
text-decoration: none;
color: black
}
/*Header with logo*/
#header {
text-align: center;
margin-bottom: 20px;
margin-top: 20px;
padding: 10px;
}
#container1 {
position: relative;
background-color: #FFFFFF;
position: absolute;
min-height: 100vh;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding-bottom:120px;
}
/* footer for all pages */
#footer {
position: absolute;
clear: both;
color: white;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
font-weight: 300;
bottom: 0;
background: linear-gradient(to bottom, #C61618 5%, black 100%);
width: 100%;
height: 100px; /* Footer height */
}
.fa-facebook {
padding: 10px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
background: #3B5998;
color: white;
margin-right: 50px;
border-radius: 30%;
} /* Facebook Icon and link in Footer */
* {
box-sizing: border-box;
}
/*Search Field */
input:focus,
textarea:focus,
select:focus {
outline-color: #C61618;
}/* Search Area on Header */
form.search input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid black;
float: right;
width: 20%;
background: white;
margin-right: 5%;
} /* Style the search field from W3Schools*/
form.search button {
float: right;
width: 5%;
padding: 10px;
background: #C61618;
color: white;
font-size: 17px;
border: 1px solid black;
border-right: none;
/* Prevent double borders */
cursor: pointer;
} /* Style the submit button from W3Schools */
form.search button:hover {
background: #C61618;
} /* Search button hover */
form.search::after {
content: "";
clear: both;
display: table;
} /* Clear floats on Search from W3Schools */
/*Nav Bar*/
#navbar {
position: relative;
margin-top: 40px;
margin-right: 5%;
margin-left: 8%;
}/*Main White Background*/
li a {
display: inline;
text-decoration: none;
color: white;
font-size: 16px;
} /*link look on Nav Bar */
#navbar ul li {
list-style-type: none;
display: inline;
padding: 15px;
text-align: center;
border-radius: 30px; /*curved corners on buttons*/
background: linear-gradient(to bottom, #C61618 5%, black 100%);
} /*Menu look*/
#navbar ul li:hover {
background: black;
} /*Menu hover Colour*/
#navbar .btn.active {
background: black;
} /*Menu active Colour*/
/* Text Styling */
p,
h2,
a {
text-decoration: none;
color: black;
} /*all paragraph text*/
h1 {
text-align: center;
margin-top: 5%;
}/*position of h1*/
h2 {
text-align: center;
margin-top: 5%;
text-decoration: none;
color: black;
} /*position of h2*/
h4 a {
text-decoration: none;
color: black;
}
p {
margin-left: 50px;
margin-right: 50px;
text-align: justify-all;
line-height: 150%;
} /*format text <p> */
/*Index Page*/
#image_index {
padding-top: 41px;
float: left;
margin-left: 30px;
margin-bottom: 30px;
max-width: 30%
} /* Image on home page format */
#image_contact {
padding-top: 41px;
float: left;
margin-left: 30px;
margin-bottom: 30px;
} /* Image on home page format */
#index_table {
float: right;
padding-right: 10px;
padding-bottom: 30px;
margin-right: 5%;
} /* Table Index Page format */
/*Competitions Page */
table.c {
table-layout: auto;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
.competition_table p {
text-align: center;
margin-left: auto;
margin-right: auto;
}/* format for <p> Competitions Page */
th {
text-emphasis: bold;
font-size: 20px;
height: 10px;
background-color: lightgrey;
border-color: black;
} /* Table Header*/
table,
th,
td {
padding: 10px;
border-style: solid;
border-color: black;
border-width: thin;
border-collapse: collapse;
}
/* Contact Us Page */
#secretary {
padding-top: 41px;
float: left;
margin-left: 30px;
margin-bottom: 30px;
}
.column1 {
float: left;
width: 40%;
padding: 10px;
}
.right {
width: 75%;
}
.row:after {
/* Clear floats after the columns */
content: "";
display: table;
clear: both;
}
#contact_form {
float: right;
padding-right: 10px;
padding-bottom: 30px;
margin-right: 5%;
width: 50%;
}
* {
box-sizing: border-box;
} /*format for Contact Us form*/
input[type=text],
[type=email],
[type=tel],
select,
textarea,
email {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
} /*format for Contact Us form*/
label {
padding: 12px 12px 12px 0;
display: inline-block;
} /*format for Contact Us form*/
input[type=submit] {
background-color: black;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
font-size: 20px;
font-weight: bold;
} /*format for Contact Us form*/
input[type=submit]:hover {
background-color: #C61618;
} /*format for Contact Us form*/
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/*Merch Page*/
.merch_order_form {
clear:both;
text-align: left;
margin-bottom: 5%;
margin-right: 5%;
margin-left: 5%;
padding:10px;
}
.col-50 {
float: left;
width: 40%;
margin-left: 10%;
align-content: inline;
text-align: center;
} /*Column setout for Merch & Information Pages*/
.col-45 {
float: right;
width: 40%;
margin-right: 10%;
align-content: inline;
text-align: center;
} /*Column setout for Merch & Information Pages*/
.row:after {
content: "";
display: table;
clear: both;
} /* Clear floats after the columns */
input[type=submit_merch] {
background-color: black;
color: white;
text-align: center;
padding: 12px 20px;
font-size: 30px;
border-radius: 30px;
cursor: pointer;
margin-left: 30%;
margin-top: 10px;
} /* Merch Page Submit Button */
input[type=submit_merch]:hover {
background: linear-gradient(to bottom, #C61618 5%, black 100%);
} /* Merch Page hover change */
#subject {
font-size: 16px;
}
/* Registration Page Submit Button */
.myButton {
box-shadow: inset 0px 0px 0px 2px #0154FA;
background: linear-gradient(to bottom, #0154FA 5%, #283966 100%);
background-color: #0154FA;
border-radius: 30px;
border: 1px solid #4e6096;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-size: 28px;
font-weight: bold;
padding: 21px 76px;
text-decoration: none;
text-shadow: 0px 0px 0px #283966;
text-align: center;
margin-left: 35%;
margin-right: auto;
margin-bottom: 70px;
} /* Merch Page Registration Button */
.myButton:hover {
background: linear-gradient(to bottom, #C61618 5%, black 100%);
background-color: #C61618;
border: 1px solid #C61618;
box-shadow: inset 0px 0px 0px 2px #C61618;
} /* Merch Page Registration Button */
.myButton:active {
position: relative;
top: 1px;
} /* Merch Page Registration Button */
#media screen and (min-width: 800px) {
.column {
width: 100%;
background-image: disabled;
.navbar li, .navbar li a:last-child {
display: none !important;
visibility: hidden !important;
}
}
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
background-image: disabled;
.mobile_navbar li, .mobile_navbar li:last-child {
display: none !important;
visibility: hidden !important;
font-family: "Lucinda Sans", "Arial", sans-serif;
text-decoration: none;
color: black;
text-align: right;
}
.col-25,
.col-75,
.col-50,
.col-45,
input[type=submit] input [type=submit_merch] {
width: 100%;
margin-top: 0;
margin-left: auto;
margin-right: auto;
}
#body {
background-color: white;
margin: 0px;
}
}
#container1 {
margin="0px";
background-color: ="white";
}
#mobile_navbar {
display:flex;
margin-left: 100px;
display: inline;
}
.mobile-container {
min-width: 370px;
margin: auto;
padding: auto;
background-color: white;
height: 500px;
color: black;
border-radius: 10px;
}
/* TopNav Menu Code from W3Schools.com Dropdown Button */
.dropbtn {
background-color: #C61618;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer
display: block;
position: absolute;
right: 0;
top: 0;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: black;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #C61618}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<!DOCTYPE html> <!-- Contact Us page for OaklandFC -->
<html lang="en-US">
<head>
<title>Oakland Football Club</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content='width=device-width, initial-scale=1' name='viewport' />
<meta name="viewport" content="minimum-scale=0">
<meta name="viewport" content="user-scalable=yes">
<meta charset="UTF-8">
<meta name="description" content="Oakland Football Club">
<meta name="keywords" content="Football, Soccer, Oakland, Club, family">
<meta name="author" content="Simply Designed for You">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="Oaklandstyle.css" />
<script src="formValidation.js"></script>
<script src="jquery-3.5.0.js" type="text/javascript"></script>
</head>
<body>
<div id="container1">
<div id="content-wrap">
<div id="header">
<img src="Image/logo.png" alt="Oakland Football logo" />
<form class="search" action="action_page.php">
<!--from W3Schools -->
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div id="navbar">
<ul>
<li class="btn">Home</li>
<li class="btn">Competitions</li>
<li class="btn">Registration</li>
<li class="btn">Merchandise</li>
<li class="btn">Sponsors</li>
<li class="btn">Information</li>
<li class="btn active">Contact Us</li>
</ul>
</div>
<div id="mobile_navbar">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menu</button>
<div id="myDropdown" class="dropdown-content">
Home
Competitions
Registration
Merchandise
Information
Contact Us
</div>
</div>
</div>
<div id="content">
<div id="text">
<h1>Contact Us</h1>
</div>
<div class="column1">
<h2>Secretary</h2>
<p>Name: Laci Tanner </p>
<p>Phone: 02 - 6620 3324</p>
<p>Email: secretary#oaktownfa.com.au</p>
<br>
<div id="image_contact" show="#media screen and (max-width: 800px)">
<img src="Image/soccer.jpg" alt="Oakland Football Team Photo" width="380px"/>
</div>
</div>
<div class="column2">
<h2>Contact Us</h2>
<form action="mailto:secretary#oaktownfa.com.au" method="post" enctype="text/plain">
<div id="contact_form">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="email">Email</label>
</div>
<div class="col-75">
<input type="email" id="email" name="email" placeholder="Your email address" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="tel">Phone Number</label>
</div>
<div class="col-75">
<input type="tel" id="tel" name="tel" placeholder="Your phone number" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="team">Team</label>
</div>
<div class="col-75">
<select id="team" name="team">
<option value="PleaseChoose">Please Choose</option>
<option value="Adults">Adults</option>
<option value="Under%12s">Under 12s</option>
<option value="Under%6s">Under 6s</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="I%am">I am</label>
</div>
<div>
<form action="/action_page.php">
<input type="radio" id="thinking" name="member" value="thinking">
<label for="thinking">Thinking about joining the club</label><br>
<input type="radio" id="member" name="member" value="member">
<label for="member">Already a member</label><br>
<br>
</form></div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Message</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject" placeholder="Message" required style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Send">
</div>
</div>
</form>
</div>
</div>
</div>
<footer id="footer">
Copyright © 2020 Simply Designed For You
</footer>
</div>
</body></html>
So this is how it shows when I add it all together. Both menu's and columns not stacking.
Assuming you want to use the same elements in your navbar on both large and small screens I would recommend not having two separate navbars in your HTML document. If you change one of them later, then you'll also need to update the other one.
W3schools has a good, basic tutorial on media queries. Media queries provide you with a way of defining special CSS rules based on the size of the browser. So if your site is opened on a smaller device, your navbar will be formatted according to the code in your media query.
Try to use media query, But first you need to set up your browser and make it like you're working on a phone to preview what you're doing, so first Press F12 (better use chrome), Look for the phone widget on the top-left , click on it, and start working with Media Query.
For example:
#media screen and (max-width:768px) {
body {
background: red!important;
/* That means that on a 768px-width screen the body will be red. */
}
}
i´m having some problem trying to resize the height of the forms, input text´s and fonts.
I´m writing a forms that will show up inside a background image, and i´m trying to fit the form size inside that image. But he is not changing his height.
I dont know how i can do it, i already tried a lot of google and stack overflow stuff but nothing worked.
body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
width: 100%;
}
.inner {
float: left;
width: 600px;
height: 410px;
}
.jright {
background: url("../img/visa_erased.png");
}
form {
float: right;
width: 40%;
padding-top: 80px;
}
.input-field {
box-sizing: border-box;
color: #000000 !important;
}
#register {
height: auto;
width: 30%;
padding: 1;
background: #392c34 !important;
}
.dropdown-content {
top: 0 !important;
}
.select-wrapper li {
background: #b5a795 !important;
}
.select-wrapper li span {
color: #ffffff !important;
}
.select-wrapper .disabled {
background: #897d6e !important;
}
.select-wrapper .selected {
background: #d6c7b3 !important;
}
.datepicker-date-display {
background: #392c34;
}
.datepicker-container button {
color: #392c34;
}
.datepicker-container button:focus {
background: none;
}
.datepicker-container .is-selected {
background: #7a5f70 !important;
}
.dropdown-content li>a,
.dropdown-content li>span {
color: #392c34 !important;
}
.datepicker-container input {
color: #392c34 !important;
}
label {
color: #392c34 !important;
text-shadow: -1px 0 rgba(0, 0, 0, 0.2), 0 1px rgba(0, 0, 0, 0.2), 1px 0 rgba(0, 0, 0, 0.2), 0 -1px rgba(0, 0, 0, 0.2);
}
.input-field input[type=text] {
border-bottom: 1px solid #392c34 !important;
box-shadow: 0 1px 0 0 #392c34 !important;
}
.input-field input[type=text]:focus+label {
color: #6b0742 !important;
}
.input-field input[type=text]:focus {
border-bottom: 1px solid #6b0742 !important;
box-shadow: 0 1px 0 0 #6b0742 !important;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #FF0000;
}
#media only screen and (max-width: 1250px) {
.container {
width: 100% !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/materialize.css" type="text/css">
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="inner jright">
<form>
<div class="input-field">
<input id="firstname" name="firstname" placeholder="" type="text" required>
<label for="firstname">1. Nome</label>
</div>
<div class="input-field">
<input id="lastname" placeholder="" type="text" required>
<label for="lastname">2. Sobrenome</label>
</div>
<div class="input-field">
<input id="height" placeholder="" type="text" maxlength="3" minlength="2" required>
<label for="height">3. Altura (CM)</label>
</div>
<div class="input-field">
<input id="dateofbirth" placeholder="" type="text" class="datepicker" required>
<label for="dateofbirth">4. Aniversário (DD-MM-YYYY)</label>
</div>
<div class="input-field" id="sex">
<select data-beloworigin="true" required>
<option value="none" disabled selected>Escolha o gênero</option>
<option value="M">Masculino</option>
<option value="F">Feminino</option>
</select>
<label>5. Sexo</label>
</div>
<button id="register" class="btn btn-large waves-effect">OK</button>
</form>
</div>
</div>
</div>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/materialize.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
</body>
</html>
Here's an example from w3school that shows a nicely made form over a image in background.
Have a look in the below snippet.
body, html {
height: 100%;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-img {
/* The image used */
background-image: url("https://www.w3schools.com/howto/img_nature.jpg");
min-height: 380px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* Add styles to the form container */
.container {
position: absolute;
right: 0;
margin: 20px;
max-width: 300px;
padding: 16px;
background-color: white;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit button */
.btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.btn:hover {
opacity: 1;
}
<body>
<h2>Form on Hero Image</h2>
<div class="bg-img">
<form action="/action_page.php" class="container">
<h1>Login</h1>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit" class="btn">Login</button>
</form>
</div>
<p>This example creates a form on a responsive image. Try to resize the browser window to see how it always will cover the whole width of the screen, and that it scales nicely on all screen sizes.</p>
</body>
Now, lets modify the snippet according to your need (as mentioned in your question).
[ Pay attention to the changes in the style tag ]
Change height of form. (height attribute)
Change input text size. (font-size attribute)
Change input text font. (font-family attribute)
body, html {
height: 100%;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-img {
/* The image used */
background-image: url("https://www.w3schools.com/howto/img_nature.jpg");
min-height: 380px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* Add styles to the form container */
.container {
position: absolute;
right: 0;
margin: 20px;
max-width: 300px;
padding: 16px;
background-color: white;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
height:10%;
font-size:10px;
font-family: monospace;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit button */
.btn {
background-color: #4CAF50;
color: white;
padding: 16px auto;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
height:10%;
text-align:center;
}
.btn:hover {
opacity: 1;
}
form{
height:70%;
}
h2{
margin-top:0px;
}
label{
font-size:15px;
}
<body>
<h2>Form on Hero Image</h2>
<div class="bg-img">
<form action="/action_page.php" class="container">
<h2>Login</h2>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit" class="btn">Login</button>
</form>
</div>
<p>This example creates a form on a responsive image. Try to resize the browser window to see how it always will cover the whole width of the screen, and that it scales nicely on all screen sizes.</p>
</body>
Hope, this gives you an idea about the whole thing.
So the issue I can't seem to solve is how to move the obscured divs under the radio+label buttons.
My Html
My CSS
/*color palette: abls
[lightest to darkest]
#eeeeee
#eaffc4
#b6c399
#6a856a
#333333
*/
body {
background-color: #333333;
font-family: monospace;
display: flex;
justify-content: center;
}
div {
/*background-color: red;*/
width: 100%;
height: 100%;
justify-content: center;
}
/*aesthetics for header*/
.Ghead {
font-size: 250%;
color: #eeeeee;
font-weight: lighter;
text-align: center;
border-color: red;
}
/*color for the 3 lines*/
hr:nth-child(1) {
border-color: #eaffc4;
max-width: 20%;
}
hr:nth-child(2) {
border-color: #b6c399;
max-width: 25%;
}
hr:nth-child(3) {
border-color: #6a856a;
max-width: 30%;
}
/*style for radio button container*/
.mGalD {
position: relative;
/*background-color: blue;*/
display: flex;
}
input[type=radio] {
display:none;
}
/*handles aesthetics of active buttons*/
label {
padding: 5px 7px;
border-radius: 5px;
display: inline-block;
font-size: 14px;
color: #6a856a;
}
input:checked + label {
background-color: #eaffc4;
}
/*handles the appearance of active divs in the display area*/
label + div {
position: relative;
color: red;
border: 2pt solid #eaffc4;
border-radius: 5px;
margin: 5px 0 0 0;
display: none;
max-width: 50%;
}
input:checked + label + div {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="./NewbTests.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="./Assets/SumisoulLogo.png">
<title>Viewport</title>
</head>
<body>
<div>
<h1>
<!--title and aesthetics for the head of the page-->
<div class="Ghead">
Viewport
<hr>
<hr>
<hr>
</div>
</h1>
<!--Labeled Radio buttons which activate css to reveal divs-->
<div class="mGalD">
<input type="radio" name="gal" id="g1" value="1">
<label for="g1">gallery 1</label><div>one</div>
<input type="radio" name="gal" id="g2" value="2">
<label for="g2">gallery 2</label><div>two</div>
<input type="radio" name="gal" id="g3" value="3">
<label for="g3">gallery 3</label><div>three</div>
</div>
</div>
</body>
</html>
I would have linked a few images to illustrate what is happening but I'm limited in links.
In essence;
Before:
(button 1)(button 2)(button 3)
Upon clicking any button:
(button 1)[_______________________] (button 2)(button 3)
The div shows up on the side of the corresponding button.
I don't really know what to do to have it align in a column without separating all of the divs and breaking the inline style of the buttons
Hope this works
body, html {
padding: 0;
margin: 0;
}
body {
background: linear-gradient(top left, red, orange);
}
span {
display: none;
position: absolute;
max-width: 450px;
left: 17px;
top: 48px;
padding: 3px;
min-height: 30px;
border-top: 1px solid #d3d3d3;
}
label {
cursor: pointer;
display: inline-block;
padding: 10px;
margin: 10px 0 0 0;
background: #e0e0e0;
color: black;
}
label:first-child {
margin-left: 10px;
}
input {
display: none;
}
input:checked + span {
display: initial;
}
h3 {
border-top: 1px solid;
padding-top: 5px;
position: absolute;
top: 150px;
left: 15px;
}
<label for="btn_one">Gallery 1</label>
<input type="radio" id="btn_one" name="nesto" checked="checked"/>
<span class="tab1">Gallery One</span>
<label for="btd_two">Gallery 2</label>
<input type="radio" id="btd_two" name="nesto"/>
<span class="tab2">Gallery two</span>
<label for="btd_tree">Gallery 3</label>
<input type="radio" id="btd_tree" name="nesto"/>
<span class="tab2">Gallery Three</span>
When I try to add float left or display inline, things break. Currently, I have a max-width of 1000px for the form. What I was hoping is somehow, the first, and last name will automatically float side by side if it is wide enough. So perhaps a min-width for inputs First and Last name?
Important note: I wrote this to test out writing CSS DRY code. You notice if you change the font size, the whole project changes size, So this is important to me. Also, I do not want to use media queries.
I am aware that I may need to change my approach, and I am open to that as well. Not so much looking for an exact code answer.
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
<form action="">
<ul>
<li>
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li>
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<li>
<input type="submit" name="submit">
</li>
</ul>
</form>
Flexbox is the most modern solution to this problem. However, remember to add the necessary prefixes for some browsers. If IE9 support is necessary, see the float solution below:
HTML
<form action="">
<ul>
<li class="split">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="split">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li class="fill">
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
CSS
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
#media only screen and (min-width: 768px) {
li {
clear: both;
}
li.split {
width: 50%;
float: left;
clear: none;
}
}
https://jsfiddle.net/qefo9eLr/
.fl-name {
display: flex;
flex-direction: row;
}
you can try to use bootstrap grid system
this way u can have the inputs into columns
bootstrap grid system
look at this fiddle:
gri system sample
<div class='row'>
<div class="col-xs-2">Hi</div>
<div class="col-xs-2">Hi</div>
in your case col-xs-6 will give you 2 columns fullwidth
Not exactly sure if this is what you're going for, but it seems to fit your criteria.
form {
text-align: center;
}
form ul,
form li,
form input,
form label {
box-sizing: border-box;
margin: 0;
padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;
;
top: 0;
left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input,
form input:focus {
text-transform: capitalize;
}
form #fl-name {
display: inline-block;
}
form .floatMe {
float: left;
}
form .clearMe {
clear: right;
}
<form action="">
<ul>
<div class="fl-name">
<li class="floatMe">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="floatMe clearMe">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
</div>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
Here is another alternative using our old faithful floats: https://jsfiddle.net/mvpu6s5o/3/
The main difference is basically here:
form li {
width: 33.33%;
float: left;
}
form li:nth-child(3) {
float: right;
}
form li:last-child {
width: 100%;
clear: both;
}
I used a width with percentage to keep it fluid, so it'll adjust to different screen sizes. The li:nth-child(3) float the last input to the right, so we can get rid of a small gap at the end due to the 33.33% width. form li:last-child is used to clear both floats to the last input (since this too is an li).
I just change the semantic and apply flexbox. This is the result:
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
align-items: center;
/background-color: #EB6361;
display: flex;
height: 100vh;
justify-content: center;
}
form {
box-shadow: 0 0 0 8px rgba(204,204,204,.85);
border-radius: 5px;
width: 500px;
}
form header {
background-color: #1ABC9C;
}
form header p {
color: #FFF;
font-family: 'ubuntu';
font-size: 15px;
padding: 15px 10px;
text-align: center;
}
form .body {
background-color: #EEE;
padding: 15px 20px;
}
form .body .block {
border: 2px solid #333;
border-radius: 4px;
overflow: hidden;
}
form .body .block:not(first-of-type) {
margin-top: 10px;
}
form .body .block:first-of-type > .group {
width: 98%;
}
form .body .block:first-of-type {
display: flex;
}
form .body .block .group {
display: flex;
flex-flow: column-reverse nowrap;
overflow: hidden;
}
form .body .block:first-of-type .group:first-of-type {
border-right: 2px solid #333;
}
form input {
background-color: transparent;
border: none;
color: #555;
font-size: 22pt;
padding: 6px 10px;
text-align: center;
}
form input:focus, form input:focus + label {
background-color: #F7F8E0;
}
form label {
border-bottom: 1px dotted #bbb;
color: #555;
font-family: 'ubuntu';
font-size: 11px;
padding: 2px;
text-align: center;
text-transform: uppercase;
}
form footer {
overflow: hidden;
}
form footer button {
background-color: #F39C12;
color: #FFF;
cursor: pointer;
width: 100%;
border: none;
padding: 4px;
}
<form action="">
<header>
<p>Submit Query Form</p>
</header>
<section class="body">
<div class="block">
<div class="group">
<input type="text" />
<label for="">First Name</label>
</div>
<div class="group">
<input type="text" />
<label for="">Last Name</label>
</div>
</div>
<div class="block">
<div class="group">
<input type="text" />
<label for="">Username</label>
</div>
</div>
</section>
<footer>
<button>Submit query</button>
</footer>
</form>
A very simple solution is with Flexbox.
Set the parent element to display type 'flex'.
Also set up flex wrap: wrap // This way the children will wrap if needed.
The children become flex objects. Since I want them to be even, I set them both to flex grow: 1
Set the children to flex-basis as 300px. // This is almost like a minimum width. This triggers the wrap.
body {
padding: 50px;
}
.main {
background-color: #e9e9e9;
display: flex;
flex-wrap: wrap;
}
.main input {
background-color: #e9e9e9;
}
.one {
flex-grow: 1;
flex-basis: 300px
}
.two {
flex-grow: 1;
flex-basis: 300px;
}
<head>
<link rel="stylesheet" href="inline.css">
</head>
<body>
<form class="main">
<input type="text" class="one">
<input type="text" class="two">
</form>
</body>