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.
Related
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed last month.
I have a body background image <body background="img url here"> and I want to add a grayscale effect to it. Tried searching the web but couldn't find a solution. Here is my HTML and CSS
body {
width: 100%;
height: 100%;
text-align: center;
font-family: Helvetica;
color: rgb(255, 255, 255);
font-size: 30px;
}
body {
background-image: url("https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg");
filter: grayscale(100%);
background-repeat: no-repeat;
background-size: cover;
}
label[for="email-label"] {
margin-left: 120px;
margin-right: 120px;
}
label[for="name-label"] {
margin-left: 120px;
margin-right: 120px;
}
label[for="age"] {
margin-left: 350px;
margin-right: 350px;
}
label[for="favorite-time"] {
border-top: 6px solid white;
margin-top: 30px;
padding-top: 20px;
}
input[type=radio] {
font-size: 10px;
}
h1 {
margin: 0 auto;
max-width: 1200px;
text-align: center;
border: 30px solid white;
padding: 30px;
border-radius: 25px;
}
p {
margin: 1em auto;
text-align: center;
}
form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
fieldset {
border: 9px solid white;
margin-left: -200px;
margin-right: -199px;
padding: 30px;
border-radius: 25px;
margin-top: 50px;
margin-bottom: 110px;
}
label {
display: block;
margin: 0.5rem 0;
}
input,
textarea,
select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
font-size: 25px;
}
select {
margin: 10px 0 0 30;
width: 30%;
min-height: 2em;
font-size: 25px;
}
input,
textarea {
background-color: #3b3b4f;
border: 1px solid #3b3b4f;
color: #ffffff;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
input[type="submit"] {
width: 60%;
margin: 0 auto;
border: 5px solid white;
font-size: 30px;
background-color: #3b3b4f;
min-width: 300px;
border-radius: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Favorite Media Survey</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body background="https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg">
<h1 id="title">Favorite Media Survey</h1>
<p id="description">Thank you for taking the time to share your interests</p>
<form id="survey-form" method="post" action='https://register-demo.freecodecamp.org'>
<fieldset>
<label for="name-label" id="name-label">Name:<input id="name" type="text" name="name-label" placeholder="Bob" required/></label>
<label for="email-label" id="email-label">Email:<input id="email" type="email" name="email-label" placeholder="blank#blank.com" required/></label>
<label for="age" id="number-label">Age:<input id="number" type="number" name="age" min="13" max="120" placeholder="ex.18" required/></label>
</fieldset>
<fieldset>
<label for="tv-movies">Do you like movies or TV shows better?<input type="radio" value="tv-movies" id="tv-movies" name="tv-movies" >Movies</label>
<label for="tv-movies"><input type="radio" value="tv" id="tv-movies" name="tv-movies" >TV</label>
<label for="favorite-media">Do you like books or magazines better?<input type="radio" value="books" id="favorite-media" name="favorite-media">Books</label>
<label for="favorite-media"><input type="radio" value="magazines" id="favorite-media" name="favorite-media">Magazines</label>
<label for="favorite-time">When is your favorite time of the day to interact with media?<input type="checkbox" value="morning" id="Morning" name="Morning">Morning</label>
<input type="checkbox" value="afternoon" id="Afternoon" name="Afternoon">Afternoon</label>
<input type="checkbox" value="night" id="Night" name="Night">Night</label>
</fieldset>
<fieldset>
<label for="genre" id="genre" name="genre">What is your favorite genre?</label>
<select id="dropdown" type="dropdown" name="dropdown">
<option value="0">(select one)</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Romance</option>
<option value="4">Fantasy</option>
<option value="5">Sci-Fi</option>
</select>
</fieldset>
<fieldset>
<label for="favorite-element">What is your favorite and why?
<textarea id="favorite-element" name="favorite-element" rows="3" cols="30" placeholder="I really like movies the best because..."></textarea>
</label>
</fieldset>
<input id="submit" type="submit" value="submit">
<hr></hr>
</input>
</form>
</body>
</html>
I tried adding a filter:grayscale(60%) to the body type selector and nothing happened. Also tried wrapping the background in the body element with a <div> and giving that a class and using a class selector to apply a filter which also did not work. I had a working solution before when I added the image to the HTML using img src="" but when I did things that way I couldn't get my image to layer behind my text.
Delete this body background tag and add in css this:
body {
position: relative;
height:400px; // Added only for presentation purpose
}
body::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url(https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg);
filter: grayscale(100%);
background-size: cover; // Added only for presentation purpose
}
<body>
</body>
This is working snippet :)
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>
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.
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>
HTML :
form {
padding-top: 5px;
text-align: right;
margin-bottom: 15px;
}
form img {
width: 75px;
height: 25px;
margin-left: -5px;
}
form input {
padding: 12px 17px;
border: 0px solid #fff;
background: rgba(0, 0, 0, 0.2);
border-radius: 15px;
width: 155px;
color: #fff;
}
form button,
#btnDaftar,
#btnLivechat {
display: inline-block; background: url(http://jawapoker88.com/img/images/login.png) top left no-repeat; width: 110px; height: 25px; border: none; cursor: pointer;}
#btnDaftar {
background-image: url(http://jawapoker88.com/img/images/daftar.png)
}
form input::-webkit-input-placeholder {
color: #fff;
}
form input:-moz-placeholder {
color: #fff
}
form input::-moz-placeholder {
color: #fff
}
form input:-ms-input-placeholder {
color: #fff;
}
<div class="wrapper">
<form method="post" action="#">
<input type="text" name="username" placeholder="Username" class="SITELOGIN" method="username" />
<input type="password" name="password" placeholder="Password" class="SITELOGIN" method="password" />
<button type="submit" class="SITELOGIN" method="login"></button>
</form>
</div>
CSS
Question : how to display a full image of login button and daftar button?
Here's what it looks like at the moment:
In this case, the easiest thing to do, without setting a height to the buttons, is to just use an img element:
form {
padding-top: 5px;
text-align: right;
margin-bottom: 15px;
}
form input {
padding: 12px 17px;
border: 0px solid #fff;
background: rgba(0, 0, 0, 0.2);
border-radius: 15px;
width: 155px;
color: #fff;
}
form button,
#btnDaftar,
#btnLivechat {
display: inline-block;
border: none;
cursor: pointer;
background:transparent;
vertical-align:middle;
}
form input::-webkit-input-placeholder {
color: #fff;
}
form input:-moz-placeholder {
color: #fff
}
form input::-moz-placeholder {
color: #fff
}
form input:-ms-input-placeholder {
color: #fff;
}
<div class="wrapper">
<form method="post" action="#">
<input type="text" name="username" placeholder="Username" class="SITELOGIN" method="username" />
<input type="password" name="password" placeholder="Password" class="SITELOGIN" method="password" />
<button type="submit" class="SITELOGIN" method="login">
<img src="http://jawapoker88.com/img/images/login.png">
</button>
<a href="#" id="btnDaftar" class="SITELOGIN" method="register">
<img src="http://jawapoker88.com/img/images/daftar.png">
</a>
</form>
</div>
You should add background-size: contain to #header form button, #btnDaftar, #btnLivechat to let the image fit the container. For a prettier end-result, you could also add vertical-align: middle; to make it align right.