I'm a new to css and i really can't fix all as i want...
How can i align vertical the h1 to the start of user form?
but most important problem for me is that i can't center good the check and the link, i want it one below the other and centered in the div.
I'm not sure if i have positioned good the div but i want it centred but not too low on the page.
thanks to everyone!
body {
text-align: left;
background-image: url("img/lemon.jpg");
color: #1b1b1b;
}
input[type=text],
input[type=password]{
width: 65%;
display: table;
margin: 0 auto;
padding: 12px 20px;
border: none;
border-bottom: 1px solid darkgray;
background-color: #e9e9e9;
box-sizing: border-box;
margin-bottom: 7px;
resize: vertical;
}
h1 {
font-size: x-large;
}
h2 {
font-size: x-large;
}
button {
background-color: #4CAF50;
color: white;
padding: 7px 20px;
width: 65%;
height: 20%;
display: table;
margin: 0 auto;
border: none;
cursor: pointer;
background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
background-color: #3d94f6;
border: 1px solid #337fed;
cursor: pointer;
color: #ffffff;
font-size: 17px;
text-decoration: none;
text-shadow: -1px 1px 1px #1570cd;
}
button:hover {
background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
background-color: #1e62d0;
}
button:active {
position: relative;
top: 1px;
}
.container {
width: 35%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-top: 7%;
background-color: white;
box-shadow: 2px 2px 11px rgb(11, 11, 11);
-webkit-box-shadow: 2px 2px 11px rgb(11, 11, 11);
-moz-box-shadow: 2px 2px 11px rgb(11, 11, 11);
overflow: hidden;
}
#check {
display:block;
margin-top: 7px;
}
span.frgt {
margin-top: 7px;
display: block;
}
a {
text-decoration: none;
color: #1e62d0;
}
img {
width: 100%;
height: auto;
opacity: 0.4;
}
<!DOCTYPE html>
<head>
</head>
<body>
<div class="container">
<h1>Login</h1>
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="password" name="psw" required>
<button type="submit">Login</button>
<hr>
<label id="check">
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<span class="frgt">forgot password?</span>
</div>
</body>
</html>
If you set the h1 to the same width of the button and use "margin: 0 auto" to center it, this will make the h1 span the width of the button, and by default the text will be left aligned to the start of the button.
h1 {
font-size: x-large;
width: 65%;
margin: 0 auto;
}
I'm not too sure exactly what you want to do with the check section. If you use "text-align: center", this will center it, or use the same code as above to align it with the buttons.
you can use text-align: center; and vertical-align:top;
If your problem still exists, please explain more clearly what you want.
Use text-align: center; to center text within container.
To make it easier to align your elements, just wrap them into one div and adjust the div with CSS instead of dealing with each single element.
Here is an example of what you can do.
body {
text-align: left;
background-image: url("img/lemon.jpg");
color: #1b1b1b;
}
.form {
width: 75%;
margin: auto;
}
.form-bottom {
text-align: center;
}
input[type=text],
input[type=password] {
display: table;
margin: 0 auto;
width: 100%;
padding: 12px 20px;
border: none;
border-bottom: 1px solid darkgray;
background-color: #e9e9e9;
box-sizing: border-box;
margin-bottom: 7px;
resize: vertical;
}
h1 {
font-size: x-large;
}
h2 {
font-size: x-large;
}
button {
background-color: #4CAF50;
color: white;
padding: 7px 20px;
height: 20%;
width: 100%;
display: table;
margin: 0 auto;
border: none;
cursor: pointer;
background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
background-color: #3d94f6;
border: 1px solid #337fed;
cursor: pointer;
color: #ffffff;
font-size: 17px;
text-decoration: none;
text-shadow: -1px 1px 1px #1570cd;
}
button:hover {
background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
background-color: #1e62d0;
}
button:active {
position: relative;
top: 1px;
}
.container {
width: 35%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-top: 7%;
background-color: white;
box-shadow: 2px 2px 11px rgb(11, 11, 11);
-webkit-box-shadow: 2px 2px 11px rgb(11, 11, 11);
-moz-box-shadow: 2px 2px 11px rgb(11, 11, 11);
overflow: hidden;
}
#check {
display: block;
margin-top: 7px;
}
span.frgt {
margin-top: 7px;
display: block;
}
a {
text-decoration: none;
color: #1e62d0;
}
img {
width: 100%;
height: auto;
opacity: 0.4;
}
<body>
<div class="container">
<div class="form">
<h1>Login</h1>
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="password" name="psw" required>
<button type="submit">Login</button>
</div>
<hr>
<div class="form-bottom">
<label id="check">
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<span class="frgt">forgot password?</span>
</div>
</div>
</body>
Related
How do I adjust the text input position in the input box? I did do input[type=text] but it messes up my input box's position completely. I did change my ::placeholder left margin a little bit in case if you want to know.
HTML & CSS
.registerbox {
width: 500px;
height: 450px;
background: rgba(255, 255, 255, 0.7);
margin: 10px auto;
border-radius: 20px;
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.6);
color: white;
}
.inner-registerbox {
position: relative;
width: 100%;
height: 100%;
}
.registerbox-front {
position: absolute;
height: 100%;
width: 100%;
padding: 55px;
box-sizing: border-box;
border-radius: 14px;
}
input label {
display: block;
}
.registerbox h2 {
text-align: center;
font-size: 25px;
font-weight: normal;
margin-bottom: 20px;
margin-top: 0;
color: black;
}
.input-box2 {
width: 95%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.input-box3 {
width: 105%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.registerbox-front ::placeholder {
padding-left: 10px;
}
.box-firstline, .box-secondline {
margin-top: 10px
}
<body>
<div class="registerbox">
<div class="inner-registerbox">
<div class="registerbox-front">
<h2>BORANG PENDAFTARAN MURID</h2>
<form>
<section>
<div class="box-firstline">
<div style="float:left;margin-right:25px;">
<label for="idmurid">ID Murid</label> <br />
<input type="text" name="idmurid" class="input-box2" placeholder="ID Murid" required>
</div>
<div style="float:left;">
<label for="namamurid">Nama Murid</label> <br />
<input type="text" name="namamurid" class="input-box3" placeholder="Nama Murid" required>
</div>
</div>
<br style="clear:both;" />
</section>
<div class="box-secondline">
<div style="float:left;margin-right:25px;">
<label for="namakelas">Nama Kelas</label> <br />
<input type="text" name="namakelas" class="input-box2" placeholder="Nama Kelas" required>
</div>
<div style="float:left;">
<label for="katalaluan_murid">Kata Laluan</label> <br />
<input type="password" name="katalaluan_murid" class="input-box3" placeholder="Katalaluan" required>
</div>
<br style="clear:both;" />
</div>
</div>
</div>
</body>
I took the code you posted, removed the ::placeholder padding and then added
input[type="text"] {
padding-left: 10px;
}
input[type="password"] {
padding-left: 10px;
}
And it adjusted the the text to match the placeholder.
Here is the full CSS:
.registerbox {
width: 500px;
height: 450px;
background: rgba(255, 255, 255, 0.7);
margin: 10px auto;
border-radius: 20px;
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.6);
color: white;
}
input[type="text"] {
padding-left: 10px;
}
input[type="password"] {
padding-left: 10px;
}
.inner-registerbox {
position: relative;
width: 100%;
height: 100%;
}
.registerbox-front {
position: absolute;
height: 100%;
width: 100%;
padding: 55px;
box-sizing: border-box;
border-radius: 14px;
}
input label {
display: block;
}
.registerbox h2 {
text-align: center;
font-size: 25px;
font-weight: normal;
margin-bottom: 20px;
margin-top: 0;
color: black;
}
.input-box2 {
width: 95%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.input-box3 {
width: 105%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.box-firstline, .box-secondline {
margin-top: 10px;
}
I started learning HTML/CSS recently and I'm trying to design the first page of a site by using these 2! I want to have 3 parts including logo, search box and signup button (from right to left) in the header part but I have a problem in it. The signup part doesn't stay in a row which other parts are. What's the problem with my code?
Here's my code:
body {
background: #ffffff;
padding: 0;
margin: 0;
}
.Header {
height: 93px;
width: 100%;
display: flex;
flex-direction: row;
}
.Logo {
display: block;
background: url('images/logo.png') no-repeat right center;
height: 77px;
width: 319px;
float: right;
margin: auto;
}
.Search {
height: 93px;
width: 220px;
float: left;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
}
.Search input[type=text] {
border: none;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/srch.png') no-repeat right center;
padding: 5px 25px 5px 5px;
margin: 25px 10px 0 0;
}
.Sign_up input[type=button] {
float: left;
height: 93px;
width: 100px;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
border-bottom: 8px solid #c00000;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/sign_up.png') no-repeat right center;
}
<div class="Header">
<a href="." class="Logo">
</a>
<div class="Search">
<input type="text" placeholder="search" />
</div>
<div class="Sign_up">
<input type="button" id="SignUpButton" onclick="SignUpPage()" value="sign up" />
</div>
<div class="clear"></div>
</div>
Remove float: right and replace margin into margin-left from class .Logo.
body {
background: #ffffff;
padding: 0;
margin: 0;
}
.Header {
height: 93px;
width: 100%;
display: flex;
flex-direction: row;
}
.Logo {
display: block;
background: url('images/logo.png') no-repeat right center;
height: 77px;
width: 319px;
margin-left: auto;
text-align: center;
background: #d1e3e6;
}
.Search {
height: 93px;
width: 220px;
float: left;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
}
.Search input[type=text] {
border: none;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/srch.png') no-repeat right center;
padding: 5px 25px 5px 5px;
margin: 25px 10px 0 0;
}
.Sign_up input[type=button] {
float: left;
height: 93px;
width: 100px;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
border-bottom: 8px solid #c00000;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/sign_up.png') no-repeat right center;
}
<div class="Header">
<a href="." class="Logo">
All Set
</a>
<div class="Search">
<input type="text" placeholder="search" />
</div>
<div class="Sign_up">
<input type="button" id="SignUpButton" onclick="SignUpPage()" value="sign up" />
</div>
<div class="clear"></div>
</div>
Add
display: inline;
to each of their css
eg
.Search {
display: inline;
height: 93px;
width: 220px;
float: left;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
}
.Search input[type=text] {
display: inline;
border: none;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/srch.png') no-repeat right center;
padding: 5px 25px 5px 5px;
margin: 25px 10px 0 0;
}
.Sign_up input[type=button] {
display: inline;
float: left;
height: 93px;
width: 100px;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
border-bottom: 8px solid #c00000;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/sign_up.png') no-repeat right center;
}
<div class="Header">
<div>
<a href="." class="Logo">
Logo Goes Here
</a>
</div>
<div class="Search">
<input type="text" placeholder="search" />
</div>
<div class="Sign_up">
<input type="button" id="SignUpButton" onclick="SignUpPage()" value="sign up" />
</div>
</div>
Css
.header{
width: 100%;
div{
display: inline-block;
width: 33.3%;
background: yellow;
}
div:nth-child(1), div:nth-child(3){
background:red;
}
Your header class is a flex container and then you use floats for the flex items in the container. So you are mixing these two concepts, but in my experience it is better to keep it with one of them. Anything you want to achieve, you can do with flex OR with floats.
As flex is the more modern (and simple) approach, I would stick with that one. Here is a very good article about aligning items in a flex container:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
Just remove the floating property because when you're using flexbox method to align the column no need to use float to align the column.
For further assistance comment for more information.
* {
box-sizing: border-box;
position: relative;
}
body {
background: #ffffff;
padding: 0;
margin: 0;
}
.Header {
height: 93px;
width: 100%;
display: flex;
flex-direction: row;
}
.Logo {
display: block;
background: url('https://via.placeholder.com/200') no-repeat right center;
height: 93px;
width: 300px;
margin-left: auto;
}
.Search {
height: 93px;
width: 220px;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
}
.Search input[type=text] {
border: none;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/srch.png') no-repeat right center;
padding: 5px 25px 5px 5px;
margin: 25px 10px 0 0;
}
.Sign_up input[type=button] {
height: 93px;
width: 100px;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
border-bottom: 8px solid #c00000;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/sign_up.png') no-repeat right center;
}
<div class="Header">
<div class="Search">
<input type="text" placeholder="search" />
</div>
<div class="Sign_up">
<input type="button" id="SignUpButton" onclick="SignUpPage()" value="sign up" />
</div>
<div class="clear"></div>
</div>
I am making a responsive login page and i did everything correctly this is my html code
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #c6faff;
font-family: Segoe WP Black;
}
.form-box {
position: absolute;
width: 715px;
height: auto;
min-height: 400px;
background-image: linear-gradient(to right top, #051937, #10325f, #184f8b, #1b6dba, #128deb);
opacity: .8;
left: 50%;
bottom: 50%;
transform: translate(-50%, 50%);
border-radius: 5px;
color: black;
}
.form-left-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
background-color: #fff1ff;
height: 100%;
min-height: 400px;
padding: 7px;
border: 3px solid black;
color: black;
}
.form-right-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
height: 100%;
padding-left: 15px;
min-height: 400px;
background-color: #fff1ff;
padding: 7px;
border: 3px solid black;
border-left: none;
color: black;
padding-left: 10px;
}
.text-field {
margin-top: 20px;
border: none;
outline: none;
opacity: .9;
padding: 7px;
background: none;
border-bottom: 2px solid #2196F3;
transition: .5s;
}
.submit {
background-image: linear-gradient(to right, #ed00af, #f81795, #fc327f, #fb496c, #f65e5e);
color: white;
padding: 7px;
width: 160px;
height: 50px;
font-size: 15px;
border: 2px solid grey;
font-weight: bold;
font-family: Segoe WP Black;
cursor: pointer;
transition: .7s;
outline: none;
border-radius: 20px 0px 20px 0px;
}
.text-field:focus {
padding: 8px;
border-bottom: 3px solid black;
font-size: 16px;
}
.submit:hover {
border-radius: 0px 20px 0px 20px;
box-shadow: 5px 10px 20px rgb(0, 0, 0, .3);
width: 170px;
height: 60px;
transition: .7s;
}
.text-field::placeholder {
color: black;
opacity: 1; /* Firefox */
font-size: 13px;
}
.text-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
.text-field::-ms-input-placeholder { /* Microsoft Edge */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
#media screen and (max-width: 730px) {
.form-box {
width: 100%;
height: auto;
min-height: 0;
left: 0;
bottom: 0;
transform: translate(-0, 0);
}
.form-left-side {
position: relative;
width: 97.1%;
float: none;
display: block;
max-width: none;
min-height: 300px;
height: auto;
text-align: center;
}
.form-right-side {
position: relative;
width: 96.7%;
float: none;
display: block;
border-left: 3px solid black;
max-width: none;
}
.text-field {
width: 70%;
}
}
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, intital-scale=1">
</head>
<body>
<div class="form-box">
<div class="form-left-side">
<center><h2 style="font-size:20px;">Register For Best Performance</h2>
<p>When You Register at This Site You Can Use Our Features
And Have The Best Performance Here Thank You For Joining Us!<br>
Never Foget This You Can Do Anything at This Site And
This is For Everyone And We Won't do Building a Website For Just Somebody !
</p>
</center>
</div>
<div class="form-right-side">
<h2>Login</h2>
<form>
<label for="fname">Username: </label><br><center>
<input type="text" name="fname" value="" class="text-field" placeholder="Username" />
<br /><br /><br></center>
<label for="fname">Password: </label>
<br /><center>
<input type="password" name="password" value="" class="text-field" placeholder="Password" />
<br><br><br></center>
<center><input type="submit" name="submit" value="Submit" class="submit">
<br></center>
</form>
</div>
</div>
</body>
</html>
When I resize the screen down to 730 pixel that works correct but my text in form-left-side goes up and there is not something that I can scroll and my text first lines are not visible
notice that i don't wanna take my min-height to lower and i want it to be 300 px if you can help me thank you
and loook also when it is runing on snippet on this site you can not scroll up so that is a problem
and my browser is opera
Your problem happens because you are absolutely positioning from the bottom of the page, changing it to top solves the problem. :)
Also you can add position: relative to your media query, to make sure it won't go out of screen. :)
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #c6faff;
font-family: Segoe WP Black;
}
.form-box {
position: absolute;
width: 715px;
height: auto;
min-height: 400px;
background-image: linear-gradient(to right top, #051937, #10325f, #184f8b, #1b6dba, #128deb);
opacity: .8;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
color: black;
}
.form-left-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
background-color: #fff1ff;
height: 100%;
min-height: 400px;
padding: 7px;
border: 3px solid black;
color: black;
}
.form-right-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
height: 100%;
padding-left: 15px;
min-height: 400px;
background-color: #fff1ff;
padding: 7px;
border: 3px solid black;
border-left: none;
color: black;
padding-left: 10px;
}
.text-field {
margin-top: 20px;
border: none;
outline: none;
opacity: .9;
padding: 7px;
background: none;
border-bottom: 2px solid #2196F3;
transition: .5s;
}
.submit {
background-image: linear-gradient(to right, #ed00af, #f81795, #fc327f, #fb496c, #f65e5e);
color: white;
padding: 7px;
width: 160px;
height: 50px;
font-size: 15px;
border: 2px solid grey;
font-weight: bold;
font-family: Segoe WP Black;
cursor: pointer;
transition: .7s;
outline: none;
border-radius: 20px 0px 20px 0px;
}
.text-field:focus {
padding: 8px;
border-bottom: 3px solid black;
font-size: 16px;
}
.submit:hover {
border-radius: 0px 20px 0px 20px;
box-shadow: 5px 10px 20px rgb(0, 0, 0, .3);
width: 170px;
height: 60px;
transition: .7s;
}
.text-field::placeholder {
color: black;
opacity: 1; /* Firefox */
font-size: 13px;
}
.text-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
.text-field::-ms-input-placeholder { /* Microsoft Edge */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
#media screen and (max-width: 730px) {
.form-box {
width: 100%;
height: auto;
min-height: 0;
left: 0;
top: 0;
transform: translate(0, 0);
position: relative;
}
.form-left-side {
position: relative;
width: 97.1%;
float: none;
display: block;
max-width: none;
min-height: 300px;
height: auto;
text-align: center;
}
.form-right-side {
position: relative;
width: 96.7%;
float: none;
display: block;
border-left: 3px solid black;
max-width: none;
}
.text-field {
width: 70%;
}
}
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, intital-scale=1">
</head>
<body>
<div class="form-box">
<div class="form-left-side">
<center><h2 style="font-size:20px;">Register For Best Performance</h2>
<p>When You Register at This Site You Can Use Our Features
And Have The Best Performance Here Thank You For Joining Us!<br>
Never Foget This You Can Do Anything at This Site And
This is For Everyone And We Won't do Building a Website For Just Somebody !
</p>
</center>
</div>
<div class="form-right-side">
<h2>Login</h2>
<form>
<label for="fname">Username: </label><br><center>
<input type="text" name="fname" value="" class="text-field" placeholder="Username" />
<br /><br /><br></center>
<label for="fname">Password: </label>
<br /><center>
<input type="password" name="password" value="" class="text-field" placeholder="Password" />
<br><br><br></center>
<center><input type="submit" name="submit" value="Submit" class="submit">
<br></center>
</form>
</div>
</div>
</body>
</html>
Recently I made a post to see if anyone was able to help me horizontally align my div to the center of my page. After some tweaking I was able to vertically align my LoginBox to where I needed it to be but sadly, I dont seem to be able to move the Username section and Password section to where I would like this to go, I would appreciate any support given and I understand this is probably very simple to achieve but as someone who is pretty new to coding I love to see the help and support if I don't understand something, I've provided the source code below, and I have also provided a jsfiddle incase it is needed. https://jsfiddle.net/BeastFox/36vet66q/
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<div class="LoginBox" style="">
<a class="Login">Login</a>
<input type="text" name="" class="username" placeholder="Username">
<input type="password" name="" class="password" placeholder="Password">
</div>
</body>
</html>
And here is the css.
body,html {
background: repeating-linear-gradient(
to right,
#141517,
#141517 30px,
#1d1f21 30px,
#1d1f21 40px
);
background-size: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
.username {
display: block;
margin: 0 auto;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 5px;
transition: 500ms all ease;
border: 1px solid #333;
margin-bottom: 10px;
text-align: center;
vertical-align: middle;
}
.username:hover {
box-shadow: 0px 0px 4px #000;
}
.password {
padding-top: 30;
text-align: center;
display: block;
margin: 0 auto;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 5px;
transition: 500ms all ease;
border: 1px solid #333;
}
.password:hover {
box-shadow: 0px 0px 4px #000;
}
.LoginBox {
left: 40%;
top: 30%;
position: fixed;
padding-top: 50 auto;
width: 300px;
height: 300px;
margin: 0 auto;
padding: 25px;
background-color: firebrick;
z-index: -3;
box-shadow: 0px 0px 5px #000;
}
.Login {
display: block;
width: 100%;
text-align: center;
font-size: 30px;
font-family: 'Roboto Condensed', sans-serif;
color: #FFF;
}
Thank you for any help that you can provide me with,
Your's most sincerely,
David.
You can align the LoginBox content by...
Wrapping the content in new div.
Adding flexbox properties to LoginBox, which will position the new div.
fiddle
body,
html {
background: repeating-linear-gradient( to right, #141517, #141517 30px, #1d1f21 30px, #1d1f21 40px);
background-size: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
.username {
display: block;
margin: 0 auto;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 5px;
transition: 500ms all ease;
border: 1px solid #333;
margin-bottom: 10px;
text-align: center;
vertical-align: middle;
}
.username:hover {
box-shadow: 0px 0px 4px #000;
}
.password {
padding-top: 30;
text-align: center;
display: block;
margin: 0 auto;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 5px;
transition: 500ms all ease;
border: 1px solid #333;
}
.password:hover {
box-shadow: 0px 0px 4px #000;
}
.LoginBox {
left: 40%;
top: 30%;
position: fixed;
padding-top: 50 auto;
width: 300px;
height: 300px;
margin: 0 auto;
padding: 25px;
background-color: firebrick;
z-index: -3;
box-shadow: 0px 0px 5px #000;
display: flex;
align-items: center;
justify-content: center;
}
.Login {
display: block;
width: 100%;
text-align: center;
font-size: 30px;
font-family: 'Roboto Condensed', sans-serif;
color: #FFF;
margin-bottom: 1em; /* create space between 'Login' and inputs */
}
<div class="LoginBox" style="">
<div class="LoginBox-inner">
<a class="Login">Login</a>
<input type="text" name="" class="username" placeholder="Username">
<input type="password" name="" class="password" placeholder="Password">
</div>
</div>
Changed your css a bit. Added a wrapper element to the fields. Set the parent element(LoginBox) to display:table and element_wrapper to display:table-cell;. Then vertically align the element_wrapper.
<div class="element_wrapper">
<a class="Login">Login</a>
<input type="text" name="" class="username" placeholder="Username">
<input type="password" name="" class="password" placeholder="Password">
</div>
Refer this fiddle https://jsfiddle.net/07753vwx/
I am trying to have some pre-input on my forms and I want the input field to expand to the end of the container div. The problem is the input field seems to expand past the container div due to the length of the pre-input text.
.container {
width: 70%;
}
.input-field {
display: inline-block;
white-space: nowrap;
vertical-align: bottom;
background: #fff;
position: relative;
vertical-align: middle;
width: 100%;
min-width: 16px;
border: 1px solid #ddd;
}
.input-field .addon {
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background: #f0f0f0;
}
.input-field input {
padding-left: 5px;
padding-top: 0;
padding-bottom: 0;
margin: 0;
border: 0;
outline: none;
background: transparent;
resize: none;
width: 100%;
}
.input-field:hover {
border: 1px solid #05c9f0;
}
<div class="container">
<div class="input-field">
<span class="addon">some preinput</span>
<input id="" type="text" name="" value="test text" />
</div>
</div>
Another example here: http://codepen.io/anon/pen/wgdErO
If you try the example code, you will note you can click the input box way outside where I want it to end.
Any thoughts on a fix?
Try using the flexbox layout.
.container {
width: 300px;
}
.input-field {
background: #fff;
border: 1px solid #ddd;
display: flex;
align-items: center;
}
.input-field .addon {
padding: 2px 8px;
text-shadow: 0 1px 0 #fff;
background: #f0f0f0;
}
.input-field input {
padding: 0 4px;
margin: 0;
border: 0;
outline: none;
background: transparent;
resize: none;
flex: 1;
}
.input-field:hover {
border: 1px solid #05c9f0;
}
<div class="container">
<div class="input-field">
<span class="addon">some preinput</span>
<input id="" type="text" name="" value="test text" />
</div>
</div>
<img src="//dummyimage.com/300x50">
Just decrease the input width from 100% to a lower value like 99.7% and that will do the trick:
.container {
width: 70%;
border: 1px solid red;
}
.input-field {
display: inline-block;
white-space: nowrap;
vertical-align: bottom;
background: #fff;
position: relative;
vertical-align: middle;
width: 99.7%;
min-width: 16px;
border: 1px solid #ddd;
}
.input-field .addon {
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background: #f0f0f0;
}
.input-field input {
padding-left: 5px;
padding-top: 0;
padding-bottom: 0;
margin: 0;
border: 0;
outline: none;
background: transparent;
resize: none;
width: 100%;
}
.input-field:hover {border: 1px solid #05c9f0;}
<div class="container">
<div class="input-field">
<span class="addon">some preinput</span>
<input id="" type="text" name="" value="test text" />
</div>
</div>
You can calculate the width like this! width: calc(100% - 125px); rather than set it to 100%