I am currently working some on CSS for a site. I would like to stylize some input fields so they have a background image. I did put the background image behind the entire form, but I am having having a hard time getting each individual input field to stay lined with the background image when I resize the browser. Ideally, I would like to have each individual input field to have its own background image. Any suggestions?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
* {
/*margin-left: 10px;*/
font-family: 'Verdana', sans-serif;
}
header {
/*background-color: white;*/
}
body {
background-color: #002254;
/*margin: 0;*/
}
#answers {
/*position: absolute;*/
text-align: center;
color: white;
background: #FFF url("form_ribbons.png");
background-repeat: no-repeat;
background-position: center;
/*position: relative;*/
background-color: transparent;
height: 80px;
/*margin: 0 auto;*/
}
#number {
position: absolute;
/*top: 100px;*/
/*left: 115px;*/
left: 8.5%;
}
#state {
position: absolute;
/*top: 100px;*/
/*left: 400px;*/
left: 8.5%;
display: none;
}
#abbrev {
position: absolute;
/*top: 100px;*/
/*left: 680px;*/
display: none;
}
#cap {
position: absolute;
/*top: 100px;*/
/*left: 960px;*/
display: none;
}
#submit {
display: none;
}
#red {
position: absolute;
background-image: url("blank_us_map.png");
background-size: 500px 310px;
background-repeat: no-repeat;
height: 310px;
width: 500px;
margin-top: 60px;
}
.answer {
/*padding-bottom: 23px;*/
margin-top: 20px;
/*width: 800px;*/
/* margin-right: 30px;
margin-left: 30px;*/
}
.instructions, h1 {
margin-right: 20px;
margin-left: 20px;
}
input {
background: none;
border: none;
outline: none;
text-align: center;
}
::-webkit-input-placeholder { /* Chrome */
color: white;
}
:-ms-input-placeholder { /* IE 10+ */
color: white;
}
::-moz-placeholder { /* Firefox 19+ */
color: white;
opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
color: white;
opacity: 1;
}
</style>
</head>
<body>
<header>
<h1 id="title">Learn Your States and Capitals</h1>
<p class="instructions">Choose a number first, then enter its state, abbreviation, and capital. Hit submit to start a list of answers.</p>
<p class="instructions"><strong>Checking your answers: </strong>Shake your device once to bring up a map labeled with the state names and capitals. Shake it again to bring up a map labeled with the state abbreviations. Shake it once more to go back to the map with just the numbers.</p>
<div id="guesses"><p id="guess"></p></div>
<p id="numberresult">State Number:</p>
<p id="stateresult">State:</p>
<p id="abbrevresult">State Abbreviation:</p>
<p id="capresult">State Capital:</p>
</br>
<p id="score">Score: 0</p>
<p id="answers">
<input type="text" id="number" class="answer" placeholder="Number from Map Below">
<!-- </br> -->
<input type="text" id="state" class="answer" placeholder="Number's State">
<!-- </br> -->
<input type="text" id="abbrev" class="answer" placeholder="State's Abbreviation">
<!-- </br> -->
<input type="text" id="cap" class="answer" placeholder="State's Capital">
</br>
<button id="submit">Submit</button>
</br>
</br>
</p>
For UX, I highly advised do not use background image as your background input field. I would recommend you styling like this form input.
HTML
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
CSS
/* form starting stylings ------------------------------- */
.group {
position:relative;
margin-bottom:45px;
}
input {
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:300px;
border:none;
border-bottom:1px solid #757575;
background:transparent;
}
input:focus { outline:none; }
/* LABEL ======================================= */
label {
color:#999;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color:#5264AE;
}
DEMO
Styling or animating your form field:
This will expand your text box if you click on the text box.
CSS:
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
HTML
<form>
<input type="text" name="search" placeholder="Search..">
</form>
Run Snippet
Related
I'm making a form for a bookstore, but my input-type text isn't showing up on the page. Does anyone know the reason?
Is it something to do with the span or div properties?
<html>
<head>
<style>
body {background-color : #ededed; font-family : "Open Sans", sans-serif;}
h1 {padding: 40px; text-align: center; font-size: 1.5em;}
li a {text-decoration : none; color : #2d2f31;}
.top-div {
width : 300px;
background: #d9d9d9;
margin : 40px auto;
text-align: center;
}
span {
padding : 30px;
background : #2d2f31;
color : white;
font-size : 1.2em;
font-variant : small-caps;
cursor : default;
display: block;
}
span::after {
float: right;
right: 10%;
}
.slide {
clear:both;
width:100%;
height:0px;
overflow: hidden;
text-align: center;
transition: height .4s ease;
}
.slide li {padding : 30px;}
#book {position: absolute; opacity: 0; height: 0px;}
h1 {
margin: 40px auto;
}
input[type=button], input[type=submit], input[type=reset] {
background-color: #2d2f31;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
input[type=text] {
border: 2px solid black;
border-radius: 4px;
width: 300px;
display: block;
margin: 40px;
cursor: auto;
}
</style>
</head>
<body>
<h1>Bookstore</h1>
<div class="top-div">
<form method="post">
<label for="book"><span> Enter the title of the book that you wish to order.</span> </label>
<input type="text" name="customer_order" id="book"> </input>
<br> <br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
It is because you had opacity: 0; set in your css code for #book. This means that you're input element is completely transparent. See here. Also, you're hight is set at 0px, so it comes out very small on the page.
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. */
}
}
Check boxes are working fine in chrome but not in internet explorer.
Here is my HTML code:
<div class="patient-div-w" style="width: 9.5vw;">
<input type="checkbox" id="edema" class="input-checkbox-l">
<label class="label-n" for="edema" style="line-height: 8vh;">Edema</label>
<br>
</div>
Here is my CSS code:
input[type="checkbox"] {
opacity: 0;
margin: 0px 3px 0px 0px;
}
.input-checkbox-l[type="checkbox"] + label {
background-image: url(../images/unchk.png);
background-size: 1.2vw;
background-repeat: no-repeat;
padding-left: 1.7vw;
background-position: 0vh 0vw;
width: 8vw;
margin: 0vw;
position: relative;
top: -.1vh;
left: -1.6vw;
white-space: nowrap;
font-family: "Roboto Regular";
}
.label-n {
font-size: 1vw;
color: #000;
}
The same is the problem with radio buttons.
Any kind of help is highly appreciated.
Try this:
Lets assume the parent of .patient-div-w is .parent-div. So we need to do the following:
.parent-div{
overflow: auto;
zoom: 1;
}
This is a very common issue. You can read more about it here
Try this
In your code
<label class="label-n" for="edema" style="line-height: 8vh;">Edema</label> Just remove inline style="line-height:8vh;. it will work.
you can use below code as a reference and it will work IE, FF, Chrome
.input-checkbox-l[type="checkbox"] + label {
box-sizing:border-box;
padding:0px 20px 0px 55px;
background:url(https://i.stack.imgur.com/EAkMC.png) no-repeat center left 5px;
background-size: 30px;
font-size:22px;
margin-right:5px;
display:inline-block;
}
You can try without image
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ccc;
cursor: pointer;
outline: none;
}
input[type="checkbox"]:checked {
border:1px solid blue;
outline: none;
}
div{
display: inline-block;
}
div span{
vertical-align: super;
}
HTML
<div>
<input type="checkbox" name="" value="1"><span>Label name</span>
</div>
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>