I want to adjust checkboxes in the middle of screen.
My html code:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Test</title>
</head>
<body>
<form method="get" style="text-align: center">
<input name="check1" type="checkbox">short text<br>
<input name="check2" type="checkbox">medium-length text__________<br>
<input name="check3" type="checkbox">long text________________________________<br>
<input name="Submit1" type="submit" value="submit"></form>
</body>
</html>
The checkboxes are on different positions because of different text length.
What's the best way to adjust them to a vertical line roughly to the position of the checkbox of the longest text ("check3")?
I'm sorry for this probably simple question.
You can change it to this which I believe will get you what you want:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Test</title>
</head>
<body>
<form method="get" style="text-align: center;">
<div style="display: inline-block; text-align: left;">
<input name="check1" type="checkbox">short text<br>
<input name="check2" type="checkbox">medium-length text__________<br>
<input name="check3" type="checkbox">long text________________________________
</div>
<br>
<input name="Submit1" type="submit" value="submit">
</form>
</body>
</html>
This way you don't need to know the width of your text beforehand.
Use div tag and then u can use margin attribute and remove
style="text-align: center"
form form tag
#checkbox {
float:left
margin-left:70px;
}
<div id="checkbox">
<form method="get" >
<input name="check1" type="checkbox">short text<br>
<input name="check2" type="checkbox">medium-length text__________<br>
<input name="check3" type="checkbox">long text________________________________<br>
<input name="Submit1" type="submit" value="submit"></form>
</div>
http://jsfiddle.net/48fwg/
You can go with something as simple as setting a width to your form and then setting margin: 0 auto like so:
HTML
<form method="get">
<input name="check1" type="checkbox" />short text<br>
<input name="check2" type="checkbox" />medium-length text__________<br>
<input name="check3" type="checkbox" />long text________________________________<br>
<input name="Submit1" type="submit" value="submit" />
</form>
CSS
form { display: block; margin: 0 auto; width: 400px; }
jsFiddle
!OR!
If you don't want to set the width, you can set the display of the form to table and get the same result, but with an auto width:
HTML -> the same
CSS
form { display: table; margin: 0 auto; }
jsFiddle
!OR!
If you want it fully centered, horizontal and vertical, you can use a variation of the following:
HTML
<table>
<tbody>
<tr>
<td>
<form method="get">
<input name="check1" type="checkbox" />short text<br />
<input name="check2" type="checkbox" />medium-length text__________<br />
<input name="check3" type="checkbox" />long text________________________________<br />
<input name="Submit1" type="submit" value="submit" />
</form>
</td>
</tr>
</tbody>
</table>
CSS
html, body { margin: 0; height: 100%; width: 100%; }
table { height: 100%; margin: 0 auto; }
td { vertical-align: middle; }
jsFiddle
Related
I am trying to create a simple login page, but I keep stumbling upon a problem. An input I put in a form (which is in turn in a table) goes to the top left corner of the page. Here is my code
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<table class="center">
<tr>
<td>
<p style="size: 16px; font-family: Comic Sans MS">LOGIN</p>
</td>
</tr>
<tr>
<td>
<form>
<input type="email" name="mail"><br>
<input type="password" name="password"><br>
<input type="reset"></td>
</form>
<input type="submit" name="submit">
<td>
</tr>
</table>
</body>
</html>
I also have a couple lines of css "code"
table.center {
margin-top: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
I don't quite get why the poor "submit" input won't stay in place.
Thanks in advance for your help.
Your nesting of the td around the form is wrong. the /td needs to come after the submit so that all of the form plus the submit are in the cell.
Here's the changed code:
<style>
table.center {
margin-top: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<table class="center">
<tr>
<td>
<p style="size: 16px; font-family: Comic Sans MS">LOGIN</p>
</td>
</tr>
<tr>
<td>
<form>
<input type="email" name="mail"><br>
<input type="password" name="password"><br>
<input type="reset">
</form>
<input type="submit" name="submit">
</td>
<td>
</tr>
</table>
</body>
</html>
Try putting the submit element inside form?
Otherwise you can just make a button. I might be wrong here tho but worth a try.
<form>
<input type="email" name="mail"><br>
<input type="password" name="password"><br>
<input type="reset"></td>
<input type="submit" name="submit">
</form>
I was given a homework assignment to re-create a site that he made Here.
I have gotten it to look almost similar but cant seem to find out how to get the radio bubbles to the right of the checkbox items.
I did some research and have tried verticle-align but that has not worked out.
This is the HTML that I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Form Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Client Registration</h1>
<form>
<fieldset>
<legend>Identity Information</legend>
<label>Corporate Name: <input type= "text" name="corpName" id="corpName" size="40" /></label><br><br>
<label>Address: <input type="text" name="address" id="address" size="40" /></label><br><br>
<label>Contact Name: <input type="text" name="cname" id="cname" size="40" /></label><br><br>
<label>Contact Phone: <input type="text" name="cphone" id="cphone" size="15" /></label> <label>Contact Email: <input type="text" name="cemail" id="cemail" size="15"</label>
</fieldset>
<fieldset>
<legend>Service Information</legend>
<input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
<div id="radioButtons">
<input type="radio" name="paymentType" id="creditAccount" value="creditAccount" />Credit Account<br>
<input type="radio" name="paymentType" id="Invoice" value="Invoice" />Invoice<br>
<input type="radio" name="paymentType" id="cod" value="cod" />Cash On Delivery<br>
</div>
</fieldset>
Comments: <br>
<textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
<input type="submit" value="Send Form" /> <input type="reset" />
<br>
<form>
</div>
</body>
And here is my CSS:
/*CSS Document*/
#container{
background-color: #C0C0C0;
border: 2px solid black;
width: 500px;
margin: auto;
}
form{
padding: 4px;
}
#radioButtons{
vertical-align: middle;
}
Any help would be great.
Here try this fiddle
http://jsfiddle.net/Lsh3rqLj/3/
I just wrapped the checkboxes in a div and set both the checkboxes and radiobuttons div's float to left.
#radioButtons{
vertical-align: middle;
float: left;
}
#first{
float:left;
}
The float is what you need here. you can play with it some more to get a perfect positioning.
EDIT: IF you wanted to make it EXACTLY like you are instructed in your assignment add padding-top: 10px; to your checkboxes. I have updated the fiddle to give you the exact effect as you'd see in the img you posted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Form Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Client Registration</h1>
<form>
<fieldset>
<legend>Identity Information</legend>
<label>Corporate Name: <input type="text" name="corpName" id="corpName" size="40"></label><br><br>
<label>Address: <input type="text" name="address" id="address" size="40"></label><br><br>
<label>Contact Name: <input type="text" name="cname" id="cname" size="40"></label><br><br>
<label>Contact Phone: <input type="text" name="cphone" id="cphone" size="15"></label> <label>Contact Email: <input type="text" name="cemail" id="cemail" size="15" <="" label="">
</label></fieldset>
<fieldset style="
">
<legend>Service Information</legend>
<div id="checkBox"><input type="checkbox" name="Delivery" id="Delivery" value="yes"> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes">Confirmation<br>
</div>
<div id="radioButtons">
<input type="radio" name="paymentType" id="creditAccount" value="creditAccount">Credit Account<br>
<input type="radio" name="paymentType" id="Invoice" value="Invoice">Invoice<br>
<input type="radio" name="paymentType" id="cod" value="cod">Cash On Delivery<br>
</div>
</fieldset>
Comments: <br>
<textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
<input type="submit" value="Send Form"> <input type="reset">
<br>
</form>
</div>
</body>
#container{
background-color: #C0C0C0;
border: 2px solid black;
width: 500px;
margin: auto;
}
form{
padding: 4px;
}
#radioButtons{
float:left;
}
#checkBox{
float:left;
}
please remember that always wrap the content with a div tag. so you will not face such problems.
here is the working demo: Working Demo
wrap the check boxes with a div tag, later give float left for both div id
i hop this will be helpful to you...
You can get the <input type="radio"> elements to align properly by adding a div element around the checkboxes and then floating the checkboxes and radio elements left. You should also add padding to the checkboxes for consistency.
HTML:
<div id="checkboxes"> <!-- add this div -->
<input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
</div>
CSS:
#checkboxes {
float: left;
padding-top: 10px;
}
#radioButtons {
float: left;
}
Try it Online!
I want to divide page horizontally in two parts. On upper part I want a form and on lower part I want an image. But it's not working. Please help me.
<!DOCTYPE html>
<html>
<head>
<title>JN DIAMONDS</title>
</head>
<style>
#upper {
height:50%;
}
#lower {
height: 50%;
background-image: r1.jpg;
}
</style>
<body>
<div id="upper">
<form align="center" method="POST" action="insert_rough.php">
<fieldset>
<legend>JN Patel <b>Rough Diamond</b> Information</legend>
<br>
<input type="text" name="fname" placeholder="Name" required><br><br>
<input type="text" name="twait" placeholder="Total Rough Weight"><br><br>
<input type="text" name="cprice" placeholder="1 Carat Price"><br><br>
<input type="text" name="dprice" placeholder="Dollar Rate"><br><br>
<input type="text" name="date" placeholder="Payment Days" required><br><br>
<input type="image" src="submit.jpg" alt="Submit" width="90" height="35"><br>
</fieldset>
</div>
<body>
<div id="lower"></div>
</body>
</form>
</body>
</html>
So I took out the extra body tag and added an image under the form. Here is a working codepen of what I think you want.
http://codepen.io/anon/pen/epeWYQ?editors=100
<!DOCTYPE html>
<html>
<head>
<title>JN DIAMONDS</title>
</head>
<style>
#upper {
height:50%;
}
#lower {
height: 50%;
background-image: r1.jpg;
}
</style>
<body>
<div id="upper">
<form align="center" method="POST" action="insert_rough.php">
<fieldset>
<legend>JN Patel <b>Rough Diamond</b> Information</legend>
<br>
<input type="text" name="fname" placeholder="Name" required><br><br>
<input type="text" name="twait" placeholder="Total Rough Weight"><br><br>
<input type="text" name="cprice" placeholder="1 Carat Price"><br><br>
<input type="text" name="dprice" placeholder="Dollar Rate"><br><br>
<input type="text" name="date" placeholder="Payment Days" required><br><br>
<input type="image" src="submit.jpg" alt="Submit" width="90" height="35"><br>
</fieldset>
</div>
<div id="lower"></div>
<img src="http://i.cdn.turner.com/asfix/repository//8a250ba13f865824013fc9db8b6b0400/thumbnail_8234390180613999969.jpg" alt="" />
</form>
</body>
</html>
You need an image tag which is why it’s not working if you're linking it to css use background: url(./img/r1.jpg) no-repeat; you need to change the img folder name to whatever the folder is called that you keep your images in.
I am trying to center my form but even trying in all possible ways I can I am not able to achieve it.
.content {
margin: 0 auto;
padding: 0 1em;
max-width: 768px;
text-align: center;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>::Members Area::</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
</head>
<body>
<div class="page-wrap">
<div class="header">
<h1>heading</h1>
<h2 id="msg">Heading</h2>
</div>
<div class="content">
<form class="pure-form" action="" method="post" id='loginform'>
<div class="fields">
<fieldset class="pure-group center" >
<input type="text" required autofocus class="pure-input-1-2" value="" name="username" id="username" placeholder="Username">
<input type="password" required class="pure-input-1-2" name="password" id="password" placeholder="Password">
<input type="email" class="pure-input-1-2" value="" name="email" id="email" placeholder="Email">
<input type="hidden" name="type" value="login" id="type">
</fieldset>
</div>
<button type="submit" class="pure-button pure-input-1-2 pure-button-primary" name="loginbutton" id="button" value="login">Sign in</button>
<div class="login-links">
Forgot password ?
Already have an account ? <strong>Sign in</strong>
<br />
Don't have an account ? <strong>Sign Up</strong>
</div>
</form>
</div>
</div>
</body>
</html>
The text and buttons in the field are centered but the input fields are not centered I tried adding width to the content but it didn't helped if I add <center> it works But I want to do it with css please help.
set .pure-form .pure-group input to display: inline-block instead of display: block in pure-min.css
or just override it in another stylesheet:
.pure-form .pure-group input{
display: inline-block;
}
FIDDLE
I have loggin form and I'd like it to position to center of the page. My code is:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<html>
<head>
<title></title>
<style>
div.ex
{
width:300px;
padding:10px;
border:5px solid gray;
margin-left:auto;
margin-right:auto;
}
.align {
position: absolute;
left: 8em;
}
</Style>
</head>
<body>
<div class="ex">
<h1>签订</h1>
<hr>
${errorMessage}
<form action="register" method="post">
<p>
<label>
ID：
<input type="text" name="id" value="${person.id}" class="align"/>
</label>
</p>
<p>
<label>
密码：
<input type="password" name="password" class="align"/>
</label>
</p>
<p>
<label>
确认密码：
<input type="password" name="password" class="align"/>
</label>
</p>
<p>
<label>
姓名：
<input type="text" name="name" value="${person.name}" class="align"/>
</label>
</p>
<p>
<label>
地址：
<input type="text" name="address" value="${person.address}" class="align"/>
</label>
</p>
<p>
<label>
电话：
<input type="text" name="phoneNumber" value="${person.phoneNumber}" class="align"/>
</label>
</p>
<input type="submit" value="注册"/>
</form>
</div>
</body>
</html>
Everything is now position at the center except all text field are positioned outside the login boxes.
I appreciate if someone could help me the problem.
Add the following line to the rule of div.ex:
position:relative;
By establishing a new positioning context all child elements which have position:absolute are now positioned relatively to this div instead of the body of the page.
Demo.