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
Related
I'm doing a form where I want 3 input boxes to the left and to the right. Now, I copied the code from a past project of mine where it worked but now it wont work in this new project. I've tried every text-align and float I know about. I really don't know what to do anymore.
This is the code i have for this so far.
input[id=fname], input[id=lname], input[id=phone], input[id=city],i nput[id=email], input[id=birthday] {
width: 420px;
margin-bottom: 15px;
padding: 3px;
}
#left {
width: 40px;
display: inline-block;
box-sizing: border-box;
}
#right {
width: 440px;
display: inline-block;
float: right;
padding-left: 8px;
box-sizing: border-box;
}
<!doctype html>
<html>
<head>
<title>Employee Directory</title>
<link rel="stylesheet" type="text/css" href="css/Styles.css">
</head>
<body>
<div class="form">
<form method="post">
<div id="left">
<label>First Name</label>
<input id="fname" type="text" tabindex="1" >
<label>Phone</label>
<input id="phone" type="phone" tabindex="3">
<label>City</label>
<input id="city" type="text" tabindex="5">
</div>
<div id="right" class="box">
<label>Last Name</label>
<input id="lname" type="text" tabindex="2">
<label>Email</label>
<input id="email" type="email" tabindex="4">
<label>Birthday</label>
<input id="bday" type="date" tabindex="6">
</div>
</form>
</div>
</body>
</html>
You can simplify the HTML and CSS a lot here. Use display:grid to align everything:
form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 9px 20px;
}
input {
display: block;
width: 100%;
}
<form class="form" method="post">
<label>First Name
<input name="fname" type="text">
</label>
<label>Last Name
<input name="lname" type="text">
</label>
<label>Phone
<input name="phone" type="phone">
</label>
<label>Email
<input name="email" type="email">
</label>
<label>City
<input name="city" type="text">
</label>
<label>Birthday
<input name="bday" type="date">
</label>
</form>
You should try to make it so your order of inputs is left to right down the page as tabbing from first name to Phone and then back up to last name is not very intuitive (Although fixed with tabindex this can be default).
Here is how I would do it.
input[id=fname], input[id=lname], input[id=phone], input[id=city],input[id=email], input[id=birthday] {
width: 50%;
margin-bottom: 15px;
padding: 3px;
}
#form_fields {
display:flex;
flex-wrap:wrap;
}
#form_fields label {
width:50%;
}
#form_fields label input {
width:50%;
}
<!doctype html>
<html>
<head>
<title>Employee Directory</title>
<link rel="stylesheet" type="text/css" href="css/Styles.css">
</head>
<body>
<div class="form">
<form method="post">
<div id="form_fields">
<label>First Name<br />
<input id="fname" type="text" />
</label>
<label>Last Name<br />
<input id="lname" type="text" />
</label>
<label>Phone<br />
<input id="phone" type="phone" />
</label>
<label>Email<br />
<input id="email" type="email" />
</label>
<label>City<br />
<input id="city" type="text" />
</label>
<label>Birthday<br />
<input id="bday" type="date" />
</label>
</div>
</form>
</div>
</body>
</html>
I'm trying to make a form but when I try to centralise it, it just stay tight to the left side of #wrapper. It reacts to margin-top but not anything to do with going across. I've tried putting a value on margin, using margin-left and still nothing. I'm pretty sure I've followed the YouTube tutorial I'm working with character for character so not sure where I've gone wrong, does anybody have any ideas?
body {
padding: 0;
margin: 0;
background-color: #ccc;
}
#wrapper {
width: 1000px;
background-color: #FFF;
margin: 0px auto;
min-height: 400px;
margin-top: 40px;
border: 1px solid #999;
border-bottom: 3px solid #999;
border-radius: 5px;
}
#formDiv {
width: 200px;
margin: 0px auto;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Registration Page</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="formDiv"></div>
<form method="POST" action="index.php" enctype="multipart/form-data">
<label>First Name:</label><br>
<input type="text" name="fname" /> <br/><br/>
<label>Last Name:</label><br>
<input type="text" name="lname" /> <br/><br/>
<label>Email:</label><br>
<input type="text" name="email" /> <br/><br/>
<label>Password:</label><br>
<input type="password" name="password" /> <br/><br/>
<label>Image:</label><br>
<input type="file" name="image" /> <br/><br/>
<input type="submit" name="submit" />
</form>
</div>
</body>
</html>
You closed your formdiv tag to early. Use this:
<html>
<head>
<title>Registration Page</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="formDiv">
<form method="POST" action="index.php" enctype="multipart/form-data">
<label>First Name:</label><br>
<input type="text" name="fname" /> <br/><br/>
<label>Last Name:</label><br>
<input type="text" name="lname" /> <br/><br/>
<label>Email:</label><br>
<input type="text" name="email" /> <br/><br/>
<label>Password:</label><br>
<input type="password" name="password" /> <br/><br/>
<label>Image:</label><br>
<input type="file" name="image" /> <br/><br/>
<input type="submit" name="submit" />
</form>
</div>
</div>
</body>
</html>
If you need to center it, you also need to center form element
#wrapper form{
width: 180px;
margin: 0 auto;
}
http://jsfiddle.net/47ku1qud/
I have an HTML form that submits to a Coldfusion action page. For some reason, the form struct does not come through? The 2 files index.cfm and add.cfm are both in the same directory. When I submit the form the test text in the processing page shows, but not the form. I also do not see the form variables in the CF debugger.
What am I missing?
index.cfm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Slideshow Admin</title>
<!--- <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"> --->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
h1 {
font-size: 34px;
}
h2 {
font-size: 26px;
}
.yt-container {
padding: 2% 5%;
max-width: 1400px;
margin: 0 auto;
}
.input-short {
max-width: 200px;
}
.input-shorter {
max-width: 100px;
}
.input-med {
max-width: 500px;
}
.input-long {
max-width: 800px;
}
</style>
</head>
<body>
<div class="yt-container">
<h1>Video Slideshow Admin</h1>
<!-- form -->
<h2 class="form-title">Add Video</h2>
<p class="required">* Required</p>
<form name="vidform" action="add.cfm" method="post">
<div class="form-group">
<label for="heading">Heading</label>
<input type="text" class="form-control input-med" id="heading" placeholder="Heading" value="">
</div>
<div class="form-group">
<label for="url">Embed URL*</label>
<input type="text" class="form-control input-long" id="url" placeholder="Embed URL" value="" required>
</div>
<div class="form-group">
<label for="status">Status</label>
<select class="form-control input-short" id="status">
<option ng-selected="formData.type == null">Select</option>
<option value="show">Show</option>
<option value="hide">Hide</option>
</select>
</div>
<div class="form-group">
<label for="order_seq">Order Sequence</label>
<input type="text" class="form-control input-shorter" id="order_seq" placeholder="Order" value="">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
add.cfm
We are here
<cfdump var="#form#">
<cfabort>
Every form input needs a name attribute as well.
This is what Coldfusion is looking for when you post the form.
So:
<input type="text" class="form-control input-med" id="heading" placeholder="Heading" value="">
Becomes:
<input type="text" class="form-control input-med" id="heading" name="heading" placeholder="Heading" value="">
This goes the same for <select> and checkbox / radio
My website is VivasCoaching. I have been trying to eliminate some of the space on sides for the middle_column and right_column so that it looks a little more condensed but I am not too sure how to go about doing that. I also made a linkswrapper div so that I could add a background color to the div that my navigation sits in but I can't seem to get it working. Here is my code:
html{
height:100%;
width:100%
}
header{
margin-left: 20px;
margin-bottom:5px;
}
body{
font-family: "Comic Sans MS", sans-serif;
}
h1,h2,h3{
color: #112C84;
}
a:link {
color: #112C84;
text-decoration: none;
font-size: 120%;
}
/*-------NAV STYLING------------*/
#mainlinks li{
float:left;
margin-left:120px;
}
/*---------- COLUMN STYLING ----------*/
.linkswrapper{
background-color: red;
}
.middle_column{
float:left;
text-align:center;
width:70%;
margin:2px;
margin-left: 20px;
padding:10px;
}
.right_column{
float:left;
text-align:center;
width:10%;
margin:5px;
}
/*---------- MOBILE --------------*/
<!DOCTYPE HTML>
<html>
<head>
<title>Vivas Coaching-Main</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style/main.css">
<link rel="stylesheet" href="../style/normalize.css">
</head>
<body>
<header>
<img src="Images/logo.png" alt="logo" width="465" height="135">
</header>
<div class="linkswrapper">
<nav id="mainlinks">
<ul>
<li>Main</li>
<li>About Us</li>
<li>Courses</li>
<li>Register</li>
</ul>
</nav>
</div>
<div class="middle_column">
<img src="Images/SAT_summer_flyer.jpg" alt="SAT_summer_flyer" style=" width: 80%; height: auto;">
<footer>
<p>©VivasCoaching 2016</p>
</footer>
</div>
<div class="right_column">
<h2>Contact Us</h2>
<p>(646)316-8481/<br>(403)718-0159</p>
<p>Please fill out the information below and we will get back to you as soon as possible!<p>
<form method="post" action="callback.php">
<label for="firstname">First Name: </label>
<input name="firstname" id="firstname" type="text" />
<label for="lastname">Last Name: </label>
<input name="lastname" id="lastname" type="text" />
<label for="email">Email: <span class="required"></span></label>
<input name="email" id="email" type="text" />
<label>*What is 2+2? (Anti-spam)</label>
<input name="human" placeholder="Type Here">
<label for="message"> Message: <span class="required"></span></label>
<textarea id="message" name="message" cols="25" rows="10" placeholder="Type your message here!"></textarea>
<input type="submit" id="submit"/>
</form>
</div>
</body>
</html>
You need to set your image to 100% or reduce you middle_column's width
<div class="middle_column">
<img src="Images/SAT_summer_flyer.jpg" alt="SAT_summer_flyer" style="width: 100%;height: auto;">
<footer>
<p>©VivasCoaching 2016</p>
</footer>
</div>
and about right column there is width set at 10% if middle_column's width is 70% then it should be 30%;
change this into css.
.right_column{width:30%;}
.linkswrapper set height/ padding for this to show background color.
.linkswrapper{height:30px;}
NOTE: i think your footer should also out of from the middle_column.
The problem with the background not showing is that you haven't provided any height for your 'linkswrapper' div. Give it some height in your css, and it will show that red color.
.linkswrapper {
height: 40px;
}
This should do the trick.
I added bootstrap for responsiveness and also it clears the white space try this code
<html>
<head>
<title>Vivas Coaching-Main</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style/main.css">
<link rel="stylesheet" href="../style/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<header class="col-md-12 col-sm-12 col-xs-12 thumbnail">
<img src="images/logo.png" alt="logo" width="465" height="135">
</header>
<div class="linkswrapper col-md-12" style="text-align:center">
<nav id="mainlinks">
<ul>
<li>Main</li>
<li>About Us</li>
<li>Courses</li>
<li>Register</li>
</ul>
</nav>
</div>
<div class="middle_column col-md-8 thumbnail" style="border-style:none;">
<img src="images/SAT_summer_flyer.jpg" alt="SAT_summer_flyer" style=" width: 80%; height: auto;">
<footer>
<p>©VivasCoaching 2016</p>
</footer>
</div>
<div class="right_column col-md-4" style="border-style:none;">
<h2>Contact Us</h2>
<p>(646)316-8481/<br>(403)718-0159</p>
<p>Please fill out the information below and we will get back to you as soon as possible!<p>
<form method="post" action="callback.php">
<label for="firstname">First Name: </label>
<input name="firstname" id="firstname" type="text" class="form-control" />
<label for="lastname">Last Name: </label>
<input name="lastname" id="lastname" type="text" class="form-control"/>
<label for="email">Email: <span class="required"></span></label>
<input name="email" id="email" type="text" class="form-control"/>
<label>*What is 2+2? (Anti-spam)</label>
<input name="human" placeholder="Type Here" class="form-control">
<label for="message"> Message: <span class="required"></span></label>
<textarea id="message" name="message" cols="25" rows="10" placeholder="Type your message here!" class="form-control"></textarea>
<input type="submit" id="submit"/>
</form>
</div>
</body>
</html>
middle_column's width is 70% so you need to set right column width to 30% so that it will come side by side and looks perfect.
.middle_column { width:70%; }
.right_column { width:30%; }
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!