I'm not so good with using display values to organize forms, it would be great if you would give me an example of being able to organize in an up-to-date way.
I'm making a login/register system, and I want to center the input fields in the div. Here's the code of the login form:-
<body style='font-family: Times New Roman, verdana, sans-serif;'>
<div style='width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;'>
<h1>Register Now!</h1>
<br />
<form action='' method='post'/>
<table>
<tr>
<td>
<b>Username:</b>
</td>
<td>
<input type='text' name='username' style='padding: 4px'/>
</td>
<tr>
<td>
<b>Password:</b>
</td>
<td>
<input type='password' name='password' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
<b>Re-enter Password</b>
</td>
<td>
<input type='passsword' name='passwordconfirm' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
<b>First and Last Name:</b>
</td>
<td>
<input type='text' name='name' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
<input type='submit' name='register' value='Complete Registration'/>
</td>
</tr>
</table>
</form>
<h4>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
</div>
</body>
Simplest possible is to give the form display: inline-block.
Setting text-align: left; on the table will control the labels text alignment
<body style='font-family: Times New Roman, verdana, sans-serif;'>
<div style='width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;'>
<h1>Register Now!</h1>
<br />
<form action='' method='post' style="display: inline-block" />
<table style="text-align: center;">
<tr>
<td>
<b>Username:</b>
</td>
<td>
<input type='text' name='username' style='padding: 4px'/>
</td>
<tr>
<td>
<b>Password:</b>
</td>
<td>
<input type='password' name='password' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
<b>Re-enter Password</b>
</td>
<td>
<input type='passsword' name='passwordconfirm' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
<b>First and Last Name:</b>
</td>
<td>
<input type='text' name='name' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type='submit' name='register' value='Complete Registration' style="width: 100%"/>
</td>
</tr>
</table>
</form>
<h4>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
</div>
</body>
Side note:
By updating the last tr like this, you'll get a nice positioned button too
<tr>
<td>
</td>
<td>
<input type='submit' name='register' value='Complete Registration' style="width: 100%"/>
</td>
</tr>
you could just add a css rule to your table
table{
margin:0 auto;
}
The Easiest way to do this is to use the center tag <center> </center>
I edited your code to center the entire form.
<body style='font-family: Times New Roman, verdana, sans-serif;'>
<div style='width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;'>
<h1>Register Now!</h1>
<br />
<center>
<form action='' method='post'/>
<table>
<tr>
<td>
<b>Username:</b>
</td>
<td>
<input type='text' name='username' style='padding: 4px'/>
</td>
<tr>
<td>
<b>Password:</b>
</td>
<td>
<input type='password' name='password' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
<b>Re-enter Password</b>
</td>
<td>
<input type='passsword' name='passwordconfirm' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
<b>First and Last Name:</b>
</td>
<td>
<input type='text' name='name' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
<input type='submit' name='register' value='Complete Registration'/>
</td>
</tr>
</table>
</form>
</center>
<h4>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
</div>
</body>
snippet below
form{
text-align:center;
}
#form_table{
display:inline-table;
}
<body style='font-family: Times New Roman, verdana, sans-serif;'>
<div style='width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;' id="meta_container">
<h1>Register Now!</h1>
<br />
<form action='' method='post'/>
<table id="form_table">
<tr>
<td>
<b>Username:</b>
</td>
<td>
<input type='text' name='username' style='padding: 4px' />
</td>
<tr>
<td>
<b>Password:</b>
</td>
<td>
<input type='password' name='password' style='padding: 4px' />
</td>
</tr>
<tr>
<td>
<b>Re-enter Password</b>
</td>
<td>
<input type='passsword' name='passwordconfirm' style='padding: 4px' />
</td>
</tr>
<tr>
<td>
<b>First and Last Name:</b>
</td>
<td>
<input type='text' name='name' style='padding: 4px' />
</td>
</tr>
<tr>
<td>
<input type='submit' name='register' value='Complete Registration' />
</td>
</tr>
</table>
</form>
<h4>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
</div>
</body>
Related
I am very new to Bootstrap css, can any one help me to design table header like this, column is seperated by pipe like css
Below is css .
<style>
.table-bordered tbody tr td {
border: none !important;
}
.table-bordered tbody tr td input.form-control[type=text] {
border-radius: 0px !important;
}
#input_container {
position: relative;
direction: rtl;
}
#input_img {
position: absolute;
bottom: 4px;
right: 5px;
width: 24px;
height: 24px;
}
Here i have used "table table-bordered" class for table and using above css i have removed td border lines
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Product Name</th>
<th>Color/Size</th>
<th>Qty. Needed</th>
<th>Need By Date</th>
<th>Special Instructions</th>
<th>Art Files</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" id="Text1" type="text" /></td>
<td>
<div id="input_container">
<input class="form-control" type="text" id="input" value="">
<img src="~/Images/calendarImg.png" id="input_img">
</div>
</td>
<td><input class="form-control" id="Text1" type="text" /></td>
<td>
<input class="form-control" type="text" />
</td>
<td><input class="form-control" id="Text1" type="text" /></td>
<td><input class="form-control" id="Text1" type="text" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6"><a>Add Rows</a></td>
</tr>
</tfoot>
</table>
I have created a demo for you. Take help and modify as per your requirement.
<table frame="box" rules="none" cellpadding="2" cellspasing="5"> <tr style="background-color:yellow; ">
<td colspan="4">
<table style="width:100%">
<tr>
<td style="width:25%;border-right: thin solid #000;">First</td>
<td style="width:25%;text-align:center; border-right: 1px solid #000;">Second</td>
<td style="width:25%;text-align:center;border-right: 1px solid #000;">Third</td>
<td style="width:25%;text-align:center;">Fourth</td>
</tr>
</table>
</td> </tr> <tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr> </tr> </table>
click here to see it in fiddle
Here there is a small example of my page. I need to disable all input fields but the scrollbar. This works perfectly on Chrome and Firefox, but not with IE.
tbody{
display:block;
height: 50px;
overflow-y: scroll;
}
<fieldset disabled>
<table>
<thead>
<tr><th>test</th></tr>
</thead>
<tbody>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
</tbody>
</table>
</fieldset>
Any suggestion?
Maybe like this?
tbody{
display:block;
height: 50px;
overflow-y: scroll;
}
<fieldset>
<table>
<tbody>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
</tbody>
</table>
</fieldset>
Or using pointer-events (still, user can tab through the inputs, but that can be prevented with tabindex="-1", but then again, why not just add disabled)
fieldset tbody {
display: inline-block;
height: 50px;
overflow-y: scroll;
}
fieldset tbody input {
pointer-events: none;
}
<fieldset>
<table>
<tbody>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
</tbody>
</table>
</fieldset>
Or use an extra div
fieldset div {
display: inline-block;
height: 50px;
overflow-y: scroll;
}
<fieldset>
<div>
<table disabled>
<tbody>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
</tbody>
</table>
</div>
</fieldset>
I suggest wrapping the fieldset in an extra div and apply your styles there.
IE seems to disable the scrollbar functionality on disabled elements.
.box {
display: inline-block;
height: 80px; overflow-y: scroll;
}
<div class="box">
<fieldset disabled>
<table>
<tbody>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
</tbody>
</table>
</fieldset>
</div>
I am trying to make the select option wider but I cant get it to work. I have tried with width but it didn't work for me. I also couldn't find anything on the internet.
I hope somebody can help me.
This is my HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="benodigheden1">Benodigheden:</label>
</td>
<td>
<input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="ingrediënten1">Ingrediënten:</label>
</td>
<td>
<input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" />
</td>
</tr>
<tr>
<td>
<label for="stappenplan">Stappenplanm:</label>
</td>
<td>
<textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
See this fiddle
You have to add the below CSS for styling the select
select{
width: 300px;
}
The best option is to try padding like;
select{
padding: 20px;
}
Here is the demo..
i am designing a webpage which includes two tables.here is my code
<div>
<table style="width: 50%; height: 377px;">
<tr>
<td rowspan="4"><EMBED style="margin-left:20px" SRC="nesaranodu.mp4" WIDTH="500px" HEIGHT="400px" AUTOPLAY="FALSE" LOOP="false"></EMBED> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table style="width: 50%; height: 377px;display:inline-block;">
<tr>
<td> </td>
<td> </td>
<td align="right" style="padding:0px;color:white" >mobile number:</td>
<td><input name="Text1" type="text" /><h3 style="color:red;"><?php echo $mnoerr;?></h3>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td align="right" style="padding:0px;color:white">password</td>
<td><input name="Text2" type="password" /><h3 style="color:red;"><?php echo $passerr;?></h3>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td></td>
<td ><input name="Submit1" type="submit" value="change address" />
<input onclick="document.location.href='regforswa.php'" name="Submit2" type="button" value="register" /><br/>
forgot password<h3 style="color:red;"><?php echo $success;?></h3></td>
</tr>
</table>
</div>
and i want to display it side by side.i used display:inline-block property but it is not working fine.please suggest me what i have to do.
http://jsfiddle.net/CHC67/
<div class=left>
//First table
</div>
<div class=right>
//Second table
</div>
<style>
.left {
width:50%;
float: left;
}
.right {
width 50%;
float: left;
}
</style>
Should really be doing this with divs rather than tables.
Try using floats on both tables:
<table style="width: 50%; height: 377px; float:left;">
Please make sure to set the width on the EMBED accordingly..
Otherwise it will grow over the 50% depending on the display size..
I have a checkbox in a table and I cannot align them to the left.
<tr>
<td colspan="3" class="cb">
<input type="checkbox" name="cb" value="checked" /> this is a checkbox
</td>
</tr>
table.all td.cb{
color: #424242;
border:1px solid black;
margin:0 auto;
text-align:left;
}
I have tried many things, but the result is this:
I applied a border for demonstration purposes.
If I add float:left, I get this:
I used the same code in another webpage where it was working fine (there the table had 2 columns only).
Solution:
I already had this in my .css file which strangely caused the problem in spite of the colspan="3"
table.all td input{
width:90%;
float:left;
}
I changed it to
table.all td input.i{
width:90%;
float:left;
}
and added a class="i" to all the other input types and now it's working fine.
The whole form if necessary:
<div id="container_center">
<form>
<table class="minden">
<tr>
<td colspan="3">
<p class="title">Create new account</p>
</td>
</tr>
<tr>
<td colspan="3">
<p class="title2">Enter account holder information</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td>
<p>First name: *</p>
</td>
<td colspan="2">
<p>Last name: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="firstname" size="45">
</td>
<td colspan="2">
<input type="text" name="lastname" size="45">
</td>
</tr>
<tr>
<td>
<p>Email: *</p>
</td>
<td colspan="2">
<p>Email again: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="email" size="45">
</td>
<td colspan="2">
<input type="text" name="email2" size="45">
</td>
</tr>
<tr>
<td>
<p>Address 1: *</p>
</td>
<td colspan="2">
<p>Address 2:</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="address1" size="45">
</td>
<td colspan="2">
<input type="text" name="address2" size="45">
</td>
</tr>
<tr>
<td>
<p>Country: *</p>
</td>
</tr>
<tr>
<td>
<select name="country" class="sel_country">
<option value="">[Please Select]</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Germany">Germany</option>
</select>
</td>
</tr>
<tr>
<td>
<p>City: *</p>
</td>
<td>
<p>State/Province: *</p>
</td>
<td>
<p>Zip code: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="city" size="45">
</td>
<td>
<input type="text" name="state" size="30">
</td>
<td>
<input type="text" name="zip" size="10" class="zip">
</td>
</tr>
<tr>
<td>
<p>Phone number: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="phone" size="45">
</td>
</tr>
<tr>
<td colspan="3">
<p class="title3">Create your login</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td>
<p>Username: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="username" size="45">
</td>
</tr>
<tr>
<td>
<p>Password: *</p>
</td>
<td>
<p>Confirm password: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="password" size="45">
</td>
<td colspan="2">
<input type="text" name="password2" size="45">
</td>
</tr>
<tr>
<td colspan="3">
<p class="title3">Accept terms</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td colspan="3" class="cb">
<input type="checkbox" name="cb" value="checked"/>this is a checkbox
</td>
</tr>
<tr>
<td>
<ul>
<li>Terms of service</li>
<li>Privacy policy</li>
</ul>
</td>
</tr>
<tr>
<td class="submit" colspan="3">
<input type="submit" name="purchase" value="Purchase" id="submitbutton">
</td>
</tr>
</table>
</form>
</div>
You could also accomplish this by excluding the checkbox from your input style. For example, I was encountering a similar problem with this CSS:
input {
width: 300;
}
And fixed by changing to this:
input:not([type="checkbox"]) {
width: 300;
}