i'm not very familiar with CSS, i'm trying to apply a border on my login form, here is the code i use:
login.html:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<div id="login_container">
<form action="#" method="POST">
<div class="row">
<label for="username" class="label">Username</label>
<input type="text" class="field" name="username" />
</div>
<div class="row">
<label for="password" class="label">Password</label>
<input type="password" class="field" name="password" />
</div>
</form>
</div>
css/style.css:
#login_container {
margin-top:50px;
margin-left: auto;
margin-right: auto;
width: 300px;
border:1px solid black;
display:block;
}
.field {
float:right;
margin-left: 10px;
}
label {
float:left;
}
.row{
display:block;
clear:both;
}
and the output:
Why does the border cross the password text field?
EDIT:
with
form{
border:1px solid black;
}
the output is:
Add overflow:auto; to your #login_container div.
jsFiddle example
Because the inner elements are floated, you need to specify the overflow property to bring the border back around them.
Related
so I am working to create this really simple website, but the problem of that I put for example to elements in one and I cant make them fit their places for example:
.Form {
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 50%;
white-space: nowrap;
padding: 0;
}
.Member {
width: 40%;
}
.Not_member {
width: 50%;
text-align: center;
}
fieldset {
margin: 0;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>
what i want to do is:
make each one fit half the container vertically and horizontally
make them stay horizontal and shrink with the container, so what i mean that when the window becomes smaller they become vertical, how can I stop that?
thanks in advance
.Form {
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 100%;
white-space: nowrap;
padding: 0;
}
form{
width:55%;
}
.Member{
width:40%;
}
.Not_member {
width: 45%;
text-align: center;
padding:0;
margin:0;
}
fieldset {
margin: 0;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>
I'm looking get this code:
<form id="first_name">
<div class="form-group">
<label>First name</label>
<input type="text" class="form-control input-lg" />
</div>
</form>
To look like this
minus the colors, checkbox, value, etc. Essentially I want it to look just like a legend tag does in a field set but without either tags and the label inside the border of the text input. Thanks in advance!
Here is what you need. You can change the CSS values according to your need. Also important is to set the background-color of label to the same color as your form/html.
.form-group{
padding:10px;
border:2px solid;
margin:10px;
}
.form-group>label{
position:absolute;
top:-1px;
left:20px;
background-color:white;
}
.form-group>input{
border:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form id="first_name">
<div class="form-group">
<label>First name</label>
<input type="text" class="form-control input-lg" />
</div>
</form>
Hope this helps :).
You can use legend tag.
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend>Contact</legend>
Name <input type="text"><br>
Email <input type="text"><br>
</fieldset>
</form>
</body>
</html>
When I look at the answers here, all of them are answered to save the moment, that is, when the background picture changes, the examples made explode, there is no such problem in my example, you can use it as you wish
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
.textOnInput {
position: relative;
}
.textOnInput label {
position: absolute;
top: -15px;
left: 23px;
padding: 2px;
z-index: 1;
}
.textOnInput label:after {
content: " ";
background-color: #fff;
width: 100%;
height: 13px;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
label {
font-size: 16px;
font-weight: 500;
display: inline-block;
margin-bottom: .5rem;
}
.form-control {
box-shadow: none !important;
}
</style>
</head>
<body>
<div class="col-md-4 mt-5">
<div class="textOnInput">
<label for="inputText">Email</label>
<input class="form-control" type="text">
</div>
</div>
</body>
</html>
you should add position relative if you want more than one box and add some padding:
.form-group{
padding:10px;
border:2px solid;
margin:10px;
}
.form-group>label{
padding-left: 5px;
padding-right: 5px;
position:relative;
top:-20px;
left:20px;
background-color:white;
}
.form-group>input{
border:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form id="first_name">
<div class="form-group">
<label>First name</label>
<input type="text" class="form-control input-lg" />
</div>
<div class="form-group">
<label>Second name</label>
<input type="text" class="form-control input-lg" />
</div>
</form>
you can create an input and wrap it inside a fieldset:
<fieldset>
<legend>text creator</legend>
<input type="text"
id="text creator"
class="form-control"
name="object-creator"/>
</fieldset>
and some basic css to remove the input border:
input {
border:none;
width:100%;
}
input:focus, textarea:focus, select:focus{
outline: none;
}
input {
border:none;
width:100%;
}
input:focus, textarea:focus, select:focus{
outline: none;
}
<fieldset>
<legend>text creator</legend>
<input type="text"
id="text creator"
class="form-control"
name="object-creator"/>
</fieldset>
<fieldset class="border col-12 pt-0 pb-1 mx-auto ">
<legend class="w-auto mb-0">First Name</legend>
<input type="text" id="fname" name="fname" class="border-0 p-0 mx-auto pl-1" placeholder="abc#gmail.com">
</fieldset>
if you are using bootstrap4 play with class and easily solved it its worked for me you can adjust your class like p-1,ml-2.... etc
This can be achieved using pure html. It happens automatically when you nest legend tags in fieldsets
<fieldset>
<legend>Here is the legend<legend>
</fieldset>
I need to upload passport and photo but i want it to be inline
<div id="upload">
<div>
<label for="Passportcopy">Passport Copy</label>
<input type="file" id="Passportcopy">
</div>
<div >
<label for="Photo">Photo</label>
<input type="file" id="Photo">
</div>
</div>
css
#passport{
float:left;
display:inline;
width:250px;
}
#photo{
float:right;
display:inline;
width:250px;
}
I have used container with following css .
is it bcz of div the block form of file upload will appear ?
label, input, div {
display: block;
}
input{
margin-bottom:10px;
width: 40px;
}
Or container having width or clear
.container {
width:500px;
clear:both;
}
.container input {
width: 100%;
clear: both;
}
There is a native way to inline form elements in bootstrap using form-inline and form-control classes. You don't need to use any css if you use it in this way.
I have provided a snippet demonstrating it.
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="upload row">
<form class="form-inline">
<div class="row">
<div class="form-group col-xs-6 col-md-3 ">
<label for="Passportcopy">Passport Copy</label>
<input type="file" class="form-control" id="Passportcopy">
</div>
<div class="form-group col-xs-6 col-md-3 col-md-offset-1">
<label for="Photo">Photo</label>
<input type="file" class="form-control" id="Photo">
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Hope this helps!
Are you looking for something like this?
#passport{
float:left;
display:inline;
width:250px;
}
#photo{
float:right;
display:inline;
width:250px;
}
#upload div{ /* new code */
display:inline;
}
<div id="upload">
<div>
<label for="Passportcopy">Passport Copy</label>
<input type="file" id="Passportcopy">
</div>
<div>
<label for="Photo">Photo</label>
<input type="file" id="Photo">
</div>
</div>
I'm just wondering what do we need to add into our coding so that my div position will auto adjust according to the browser's window size? Currently my div and input box always run out of position whenever I reduce the size of my browser's window.
Below is my code:
<html>
<head>
<title>Login</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript">
function startTime()
{
var today=new Date();
var y=today.getFullYear();
document.getElementById('datetime').innerHTML="© Systems 2003-"+y+"<br>"+"All rights reserved.";
}
</script>
<style type="text/css">
#username{
position:absolute;
top:190px;
left:70px;
}
#login{
position:absolute;
top:260px;
left:545px;
}
#password{
position:absolute;
top:240px;
left:70px;
}
#box{
border:1px solid #eaeaff;
background-color: #eaeaff;
border-radius:5px;
width:400px;
height:400px;
margin-top:100px;
margin-left:360px;
box-shadow: 4px 4px 10px black;
}
.btn{
height: 30px;
width: 100px;
position:absolute;
top:395px;
left:620px;
}
#logo{
position:absolute;
top:130px;
left:595px;
}
#model{
font-size: 25px;
position:absolute;
top:200px;
left:545px;
}
#datetime{
margin-top:20px;
}
</style>
</head>
<body onload="startTime()">
<div class="container">
<div id="box">
<img src="logo.png" alt="logo" id="logo"/>
<div id="model"><p>Welcome</p></div>
<div id="login"><p>Please login</p></div>
<form class="form-signin">
<div class="col-md-8"><input type="text" class="form-control" id="username" placeholder="Username"></div>
<div class="col-md-8"><input type="text" class="form-control" id="password" placeholder="Password"></div>
<button class="btn btn-primary">Login</button>
</form>
</div>
<div id="datetime" align="center">
</div>
</div>
</body>
Step One: Remove your absolutely positioned CSS stuff.
Step Two: Take a look at this demo bootply with this markup in it:
<div class="container">
<div class="row">
<div id="box" class="col-sm-6 col-sm-offset-3">
<img src="logo.png" alt="logo" id="logo">
<div id="model">
<p>Welcome</p>
</div>
<div id="login">
<p>Please login</p>
</div>
<form class="form-signin">
<div class="form-group">
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<input type="text" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary">Login</button>
</div>
</form>
<div id="datetime" align="center">
</div>
</div>
</div>
</div>
Step Three: Become more familiar with how Bootstraps grid works.
HTH :)
you dont need all those position absolutes. Replace your CSS with this: HERES A DEMO
#box {
border:1px solid #eaeaff;
background-color: #eaeaff;
border-radius:5px;
width:400px;
height:400px;
margin:100px auto;
box-shadow: 4px 4px 10px black;
text-align:center;
}
.btn {
height: 30px;
width: 100px;
}
#model {
font-size: 25px;
}
#datetime {
margin-top:20px;
}
Here is a basic solution without bootstrap: Remember only use absolute positioning when you absolutely have to.
Note: If you intended for your login text inputs to be pushed off to the side, this works. However as far as UX goes this is probably a very bad idea.
<html>
<head>
<title>Login</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript">
function startTime()
{
var today=new Date();
var y=today.getFullYear();
document.getElementById('datetime').innerHTML="© Systems 2003-"+y+"<br>"+"All rights reserved.";
}
</script>
<style type="text/css">
html, body{
height:100%; margin:0; padding:0;
}
#box{
border:1px solid #eaeaff;
background-color: #eaeaff;
border-radius:5px;
width:400px;
height:400px;
box-shadow: 4px 4px 10px black;
text-align:center;
}
.btn{
height: 30px;
width: 100px;
}
#model{
font-size: 25px;
}
#datetime{
margin-top:20px;
}
.form-control{
margin:10px;
}
.form-container{
width:25%;
height:500px;
float:left;
min-width:185px;
}
.container{
height:500px;
width:100%;
}
#box-container{
width:48%;
height:500px;
float:left;
}
#box2{
width:400px;
}
#form-signin1{
position: relative;
top: 35%;
transform: translateY(-50%);
}
</style>
</head>
<body onload="startTime()">
<div class="container">
<div class="form-container">
<form id ="form-signin1" class="form-signin">
<div class="col-md-8"><input type="text" class="form-control" id="username" placeholder="Username"></div>
<div class="col-md-8"><input type="text" class="form-control" id="password" placeholder="Password"></div>
</form>
</div>
<div id="box-container">
<div id="box">
<img src="logo.png" alt="logo" id="logo"/>
<div id="model"><p>Welcome</p></div>
<div id="login"><p>Please login</p></div>
<form class="form-signin">
<button class="btn btn-primary">Login</button>
</form>
</div>
<div id="box2">
<div id="datetime" align="center"></div>
</div>
</div>
</div>
</body>
Something like this?
Fiddle for you
#box {
border:1px solid #eaeaff;
background-color: #eaeaff;
border-radius:5px;
width:300px;
height:400px;
margin-top:100px;
margin-left:360px;
box-shadow: 4px 4px 10px black;
padding: 3em 4em;
}
#box form, #box header {
text-align: right;
}
#box .form-group {
margin-bottom: 15px;
/*boostrap will already have this so delete it */
}
.btn {
height: 30px;
width: 100px;
}
#model {
font-size: 25px;
}
#datetime {
margin-top:20px;
}
<div class="container">
<div id="box">
<header>
<img src="logo.png" alt="logo" id="logo" />
<h2 id="model">Welcome</h2>
<p>Please login</p>
</header>
<section>
<form class="form-signin">
<div class="form-group">
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<input type="text" class="form-control" id="password" placeholder="Password">
</div>
<button class="btn btn-primary">Login</button>
</form>
</section>
</div>
<div id="datetime" align="center"></div>
I have tryed everything to get my input forms to the center of the page.
This is what my code kinda looks like:
<!DOCTYPE html>
<html>
<head>
<title>Pizza Order</title>
<style>
.container {
width: 500px;
clear: both;
margin-right:50%;
}
input {
width: 100%;
clear: both;
}
.what {
font-size:35px;
}
</style>
<body>
<div class="container">
<form>
<p>Name<input type="text" name="name"></p>
<p>Last Name<input type="text" name="lastname"></p>
<br>
<p class="what">Pick your crust:</p>
<input type="checkbox">Thick
<input type="checkbox">Thin
<input type="checkbox">Cheesy
</form>
</div>
</body>
</html>
Any ideas?
(wouldnt let me post until i had more details so: DFKJSDFKLJD:FLKJDFLJDFKJDSFLKDSJF:DLSKFJ;laksjflkdjdetailsdetailsdetailsDETAILS)
You weren't clear on what you were actually trying to "center". This puts your form in the middle of the page as well as aligns your input fields.
<!DOCTYPE html>
<html>
<head>
<title>Pizza Order</title>
<style>
#container {
width: 100%;
clear: both;
}
#content {
margin: auto;
position:relative;
width:500px;
}
.what {
font-size:35px;
}
label {
width: 150px;
float: left;
}
</style>
<body>
<div id="container">
<div id="content">
<form>
<label for="name">Name</label><input type="text" id="name" name="name"><br />
<label for="lastname">Last Name</label><input type="text" id="lastname" name="lastname">
<br>
<p class="what">Pick your crust:</p>
<input type="checkbox">Thick
<input type="checkbox">Thin
<input type="checkbox">Cheesy
</form>
</div>
</div>
</body>
</html>