I am confused. I got this form, jsfiddle:
https://jsfiddle.net/rx90f38u/1/
It has the styling in there and I can't work out why "remember" me shows under the checkbox.
The checkbox and label should be on same line and centered.
CSS:
.bbp-login-form input[type=text], .bbp-login-form input[type=password], .bbp-login-form select {
width: 100% !important;
display: inline-block !important;
border: 1px solid #ccc;
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-sizing: border-box;
color: #000;
background-color: #c1c1c1;
}
.bbp-login-form label {
text-align:left;
width: 100% !important;
margin: 10px 0;
display: inline-block !important;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
</head>
<body>
<h2 class="widgettitle">Support Forums</h2>
<form action="https://www.publictalksoftware.co.uk/wp-login.php" class="bbp-login-form" method="post">
<fieldset>
<div class="bbp-username">
<label for="user_login">Username: </label>
<input id="user_login" name="log" size="20" tabindex="103" type="text" value="">
</div>
<div class="bbp-password">
<label for="user_pass">Password: </label>
<input id="user_pass" name="pwd" size="20" tabindex="104" type="password" value="">
</div>
<div class="bbp-remember-me">
<input id="rememberme" name="rememberme" tabindex="105" type="checkbox" value="forever">
<label for="rememberme">Remember Me</label> </div>
</fieldset></form>
</body>
If I add this CSS then I get Remember Me center:
.bbp-login-form .bbp-remember-me label {
text-align: center;
width: 50%;
}
But even if I reduce the width still a problem.
Try this
.bbp-login-form .bbp-remember-me label {
text-align: left;
width: auto !important;
vertical-align: initial;
}
Try this css
.bbp-login-form label {
margin: 10px 0;
display: inline-block !important;
}
.bbp-remember-me{
text-align: center;
}
https://jsfiddle.net/jdfkbvrt/
You can use Flexbox to do the job .
.bbp-remember-me{
display:flex;
justify-content:center;
align-items:center;
}
https://jsfiddle.net/xh831fnd/1/
Related
I have been trying to style a Register form. I want the heading to be in the center of the div. I have another login form just beside it.
I have styled them using flex box and then used justify content as center. I also want to add a vertical line between the register form and login form. I don't want to use one of the borders of the form. Apart from using one of the form's border is there any way to do it.
Things I've tried but didn't work
1.text-align: center:
2.margin: 0 auto;
body {
margin: 0px;
}
#head {
text-align: center;
background: linear-gradient(to right, cyan, purple);
margin: 0px;
padding: 20px;
border-bottom: 2px solid lightgrey;
}
#head h1 {
margin: 0px;
font-family: 'Great Vibes', cursive;
color: white;
font-size: 40px;
}
.cont {
display: flex;
flex-direction: row;
justify-content: center;
}
input {
padding: 2px;
margin: 2px;
}
input [name="register"] {
background-color: green;
}
#login {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
#login h1 {
margin: 0 auto;
}
#register {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
<!DOCTYPE html>
<html>
<head>
<title>The Joint.</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>
<body>
<div id="head">
<h1>The Joint.</h1>
</div>
<div id="whtpg">
<div class="cont">
<div id="register">
<h3>Register</h3>
<form action="reglog.php" method="POST">
<input type="text" name="name" placeholder="Name"><br>
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="pass" placeholder="Password"><br>
<input type="password" name="cpass" placeholder="Confirm Password"><br>
<input type="submit" name="register" value="Register">
</form>
</div>
<div id="login">
<h3>Login</h3>
<form action="reglog.php" method="POST">
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="lpass" placeholder="Password"><br>
<input type="submit" name="login" value="Log In">
</form>
</div>
</div>
</div>
</body>
</html>
It would be helpful if you could post the html and css.
My guess is that the container div has no width settings, so the div is the same width as the text, so you cannot center it. Maybe set the width to 100% of its container and set the text-align to center and see if that helps.
From your code you could try
#register h3 {
text-align:center;
}
this will mean any h3 tags inside the div with the id register will have the text-align:center attribute applied to them
Otherwise post the HTML and CSS and we can take a look. (I see the HTML now, add the CSS too please
you can draw a line in the middle using CSS pseudo selector::after following is the piece of CSS rule to do that.
div#register::after {
content: "";
display: block;
width: 0px;
height: 250px;
border: 1px solid #b6b6b6;
position: absolute;
top: 110px;
left: 50%;
}
.cont h3 {
text-align: center;
}
body {
margin: 0px;
}
#head {
text-align: center;
background: linear-gradient(to right, cyan, purple);
margin: 0px;
padding: 20px;
border-bottom: 2px solid lightgrey;
}
#head h1 {
margin: 0px;
font-family: 'Great Vibes', cursive;
color: white;
font-size: 40px;
}
.cont {
display: flex;
flex-direction: row;
justify-content: center;
}
input {
padding: 2px;
margin: 2px;
}
input [name="register"] {
background-color: green;
}
#login {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
#login h1 {
margin: 0 auto;
}
#register {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
div#register::after {
content: "";
display: block;
width: 0px;
height: 250px;
border: 1px solid #b6b6b6;
position: absolute;
top: 110px;
left: 50%;
}
.cont h3 {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>The Joint.</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>
<body>
<div id="head">
<h1>The Joint.</h1>
</div>
<div id="whtpg">
<div class="cont">
<div id="register">
<h3>Register</h3>
<form action="reglog.php" method="POST">
<input type="text" name="name" placeholder="Name"><br>
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="pass" placeholder="Password"><br>
<input type="password" name="cpass" placeholder="Confirm Password"><br>
<input type="submit" name="register" value="Register">
</form>
</div>
<div id="login">
<h3>Login</h3>
<form action="reglog.php" method="POST">
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="lpass" placeholder="Password"><br>
<input type="submit" name="login" value="Log In">
</form>
</div>
</div>
</div>
</body>
</html>
For centering the heading of the register form, use:
#register h3 {
text-align: center;
}
And similarly, for centering the heading of the login form, use:
#login h3 {
text-align: center;
}
And, for the vertical line, create an empty div and style it. I've used divider class here:
.divider {
border-left: 1px solid black;
border-right: 1px solid black;
height: 200px;
margin-top: 40px;
}
See the full code below:
body {
margin: 0px;
}
#head {
text-align: center;
background: linear-gradient(to right, cyan, purple);
margin: 0px;
padding: 20px;
border-bottom: 2px solid lightgrey;
}
#head h1 {
margin: 0px;
font-family: 'Great Vibes', cursive;
color: white;
font-size: 40px;
}
.cont {
display: flex;
flex-direction: row;
justify-content: center;
}
input {
padding: 2px;
margin: 2px;
}
input [name="register"] {
background-color: green;
}
#login {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
#login h3 {
text-align: center;
}
#register {
margin: 30px;
font-family: 'Slabo 27px', serif;
}
#register h3 {
text-align: center;
}
.divider {
border-left: 1px solid black;
border-right: 1px solid black;
height: 200px;
margin-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>The Joint.</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>
<body>
<div id="head">
<h1>The Joint.</h1>
</div>
<div id="whtpg">
<div class="cont">
<div id="register">
<h3>Register</h3>
<form action="reglog.php" method="POST">
<input type="text" name="name" placeholder="Name"><br>
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="pass" placeholder="Password"><br>
<input type="password" name="cpass" placeholder="Confirm Password"><br>
<input type="submit" name="register" value="Register">
</form>
</div>
<div class="divider"></div>
<div id="login">
<h3>Login</h3>
<form action="reglog.php" method="POST">
<input type="text" name="uname" placeholder="Username"><br>
<input type="password" name="lpass" placeholder="Password"><br>
<input type="submit" name="login" value="Log In">
</form>
</div>
</div>
</div>
</body>
</html>
I want to align two fieldset offer & Demand inside the parent fieldset type. How to do for a simple case provided below? It includes both html & css.
I am using um-ordered list inside the parent fieldset. But the alignment does not work. Thank you in advance for your help.
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Align Fieldset</title>
<style>
.header{
width: 100%;
clear:both;
display: inline-block;
font-size: medium;
float:left;
}
.subheader{
width: 100%;
clear:both;
display: inline-block;
font-size: medium;
float:left;
}
.list{
list-style-type: none;
display: inline-block;
width: auto;
float: left;
}
</style>
</head>
<body>
<p>Aligning offer & Demand on the same line</p>
<fieldset class="header">
<legend>Type</legend>
<ul class= "list">
<li>
<fieldset class="subheader">
<legend ><label>
<input type="radio" name="Type" value="Offer" checked="checked"
/>Offer</label>
</legend>
</fieldset>
</li>
<li>
<fieldset class="subheader">
<legend><label>
<input type="radio" name="Type" value="Demand">Demand</label>
</legend>
</fieldset>
</li>
</ul>
</fieldset> <!-- End of type -->
</body>
</html>
Since you have wrapped your fieldsets into a list, you should focus your attention to the ul and li. I cleaned out all of the extraneous styles. display: flex is what made this layout problem a cakewalk. The following is the relevant CSS that was changed:
.list {
list-style-type: none;
width: 100%;
display: flex;
}
.list li {
margin: 0 30px 0 0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Align Fieldset</title>
<style>
.header {
width: 100%;
}
.subheader {
width: 100%;
font-size: medium;
}
.list {
list-style-type: none;
width: 100%;
display: flex;
}
.list li {
margin: 0 30px 0 0;
}
</style>
</head>
<body>
<p>Aligning offer & Demand on the same line</p>
<fieldset class="header">
<legend>Type</legend>
<ul class="list">
<li>
<fieldset class="subheader">
<legend>
<label>
<input type="radio" name="Type" value="Offer" checked="checked" />Offer</label>
</legend>
</fieldset>
</li>
<li>
<fieldset class="subheader">
<legend>
<label>
<input type="radio" name="Type" value="Demand">Demand</label>
</legend>
</fieldset>
</li>
</ul>
</fieldset>
<!-- End of type -->
</body>
</html>
Not related to the question: I changed your meta to utf-8.
try this
<style>
.header{
width: 100%;
clear:both;
display: inline-block;
font-size: medium;
float:left;
}
.subheader{
/* change */
width: auto;
clear:both;
display: inline-block;
font-size: medium;
float:left;
}
.list{
list-style-type: none;
display: inline-block;
width: auto;
float: left;
}
/* add */
li{
float:left;
}
</style>
You can add a specific width to ".list"(ex:100%) and specific with to ".subheader" elements(remove clear:both from it).
Try to not use display:inline-block and float at same time.
Here is my HTML:
<form action="#" class="six columns push_two contact-form">
<label>
<span>Name</span>
<input type="text" name="name" />
</label>
<label>
<span>Email</span>
<input type="email" name="email" />
</label>
<label>
<span>Phone number</span>
<input type="text" name="phone" />
</label>
<label>
<span>Message</span>
<textarea name="message"></textarea>
</label>
<input type="submit" name="submit" value="Send" />
</form>
And CSS:
label{
display: table;
width: 100%;
border-bottom: solid $grey_dark 1px;
}
span{
display: table-cell;
font-weight: 700;
font-size: 20px;
}
input, textarea{
display: table-cell;
width: 100%;
}
In result I get something like the screenshot bellow. I have marked the spans with red border. They wider than I want. I did not set any width, margin or padding to them. But still they are wider. Can you give me a solution to this so that the spans become the size of the text width.
I want something like bellow:
You need to specify a table row, for table cells to behave. Try this:
form {display: table;}
label{
display: table-row;
width: 100%;
border-bottom: solid $grey_dark 1px;
}
Updated answer:
label{
display: block;
width: 100%;
border-bottom: solid #333 1px;
padding: 10px;
}
span{
display: inline-block;
padding-right: 15px;
font-weight: 700;
font-size: 20px;
}
input, textarea{
}
Instead of the display as table for span you need to use table-row.
label{
display: table-row;
width: 100%;
border-bottom: solid $grey_dark 1px;
}
In the code given below, I need to position the userid box in the center. I could not do this after many attempts. Sorry for being so naive.
My HTML and css file are as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<link rel="stylesheet" type="text/css" href="styledel.css" />
</head>
<body>
<input type="text" name="userid" id="userid"> <!-- this need to go in the center -->
<br/><br/><br/>
<form action="http://localhost" method="post" name="form"">
<label for="name">Name</label>
<input type="text" id="name" name="name" disabled="disabled" />
<br></br>
<label for="email">E - mail</label>
<input type="text" name="email">
<br></br>
<label for="password">Select Password</label>
<input type="password" name="password" >
<br></br>
<label for="password2">Retype Password</label>
<input type="password" name="password2" >
<br></br>
<input type="submit" value="Submit" />
</form>
</body>
</html>
My css file is as follows:
styledel.css
* {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
}
#page-wrap { /*showing white background*/
width: 600px;
background: white;
padding: 20px 50px 20px 50px;
margin: 20px auto;
min-height: 500px;
height: auto !important;
height: 500px;
}
form, br {
clear: left;
margin: 0;
padding: 0;
}
input.form_element {
width: 221px;
background: transparent url('bg.jpg') no-repeat;
color : #747862;
height:20px;
border:0;
padding:4px 8px;
margin-bottom:0px;
}
.checkun{
width: 150px;
background: transparent url('bg.jpg') no-repeat;
color : #747862;
height:20px;
border:1px solid blue;
padding:4px 10px;
margin-bottom:0px;
position: right;
}
label, input {
width: 160px;
float: left;
font: 11px bold Tahoma, Arial, sans-serif;
margin: 1px;
padding: 2px;
}
label {
font: 14px bold Tahoma, Arial, sans-serif;
background: #eeeeee;
}
input {
width: 200px;
padding: 2px;
border: 1px solid #aaa;
}
Thanks in advance.
You can try by adding a the input in a div and setting the margin as auto for that div
#user-id-div
{
width:200px;
margin:auto;
}
Example:
http://jsfiddle.net/R3quk/4/
You can alternatively put the input tag inside a div and give text-align:center;
<div style="text-align:center;"><input type="text" name="userid" id="userid"></div>
Try this
What is the css-way to do this...
text | input
text text | input
text | input input
text text text | input
where text is some label for the input field input
UPD usually you can see such a layout in user registration forms
CSS:
label {
float: left;
text-align: right;
width: 100px;
margin-right: 1em;
}
HTML:
<label for="i1">text</label><input id="i1" name="i1" /><br>
<label for="i2">text text</label><input id="i2" name="i2" /><br>
<label for="i3">text</label><input id="i3" name="i3" /> <input id="i5" name="i5" /><br>
<label for="i4">text text text</label><input id="i4" name="i4" /><br>
http://jsfiddle.net/wEcGf/
Another way to do it.
HTML:
<div class='form'>
<p><label>Test</label><input /></p>
<p><label>Longer test</label><input /></p>
<p><label>Even longer test</label><input /></p>
</div>
CSS:
.form p {
clear: both;
float: none;
}
.form p label {
display: block;
float: left;
text-align: right;
width: 10em;
}
.form p input {
float: left;
}
Yelds: http://jsfiddle.net/QWH2J/
You can also use ul or ol with li.
Depends on the HTML code. You can play with float: left;, float; right and clear: both for example. But without at least some HTML code, it's impossible to give you a complete solution.
Here's a little example : http://jsfiddle.net/xm5aL/1/
HTML :
<div>
<label for="input1">Input 1</label>
<input name="input1" />
<label for="input2">Some long Input 2</label>
<input name="input2" />
<label for="input3">Input 3</label>
<input name="input3" />
<label for="input4">short</label>
<input name="input4" />
<label for="input5">Input 5</label>
<input name="input5" />
</div>
CSS :
div {
width: 20em;
}
label {
clear: both;
float: left;
text-align: right;
width: 10em;
}
label:after {
margin: 0em 1em;
content: " | "
}
input {
float: right;
width: 10em;
}
input {
border: 1px solid #ccc;
background: #f5f5f5;
padding-left:5px;
}
label {
display: block;
width:auto;
width: 100px;
float: left;
margin: 2px 6px 6px 4px;
text-align: right;
font-weight:bold;
color:#555;
}
br{
clear:both;
}
Check working example at http://jsfiddle.net/LW2Ss/3
See http://jsfiddle.net/fXeX2/
<html>
<head>
<title></title>
<style type="text/css">
label {
display: inline;
float: left;
width: 10em;
text-align: right;
}
input {
margin-left: 15em;
display: block;
}
</style>
</head>
<body>
<fieldset>
<label>text</label>
<input type="text" style="width:10em;" />
<label>text</label>
<input type="text" style="width:10em;" />
<label>text text</label>
<input type="text" style="width:20em;" />
<label>text text text</label>
<input type="text" style="width:10em;" />
</fieldset>
</body>
</html>