I have a simple contact form within a div but I can't get it to center within the div. I have tried margins, padding, text-align:center but none of them work.
html: http://www.joekellywebdesign.com/churchsample/contact.html
<div id="contactbottomright">
<h2>Contact Form</h2>
<form action="feedback.php" method="post">
<table border="0" cellpadding="8" cellspacing="8">
<tr>
<td>
<label for="tswname">Name</label>:</td>
<td>
<input type="text" name="fullname" id="tswname" size="25" />
</td>
</tr>
<tr>
<td>
<label for="tswemail">Email address</label>:</td>
<td>
<input type="text" id="tswemail" name="email" size="25" />
</td>
</tr>
<tr>
<td colspan="2">
<label for="tswcomments">Comments</label>
<br />
<textarea rows="15" cols="35" name="comments" id="tswcomments"></textarea>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="Submit" />
<br />
</td>
</tr>
</table>
</form>
</div>
css: http://www.joekellywebdesign.com/churchsample/css/styles.css
/* rules for contact page */
#contactbottomleft {z-index:26; width:450px;height: 700px; background-color:#92B681; margin: 30px 0 0 0; float:left;position: relative;}
#contactbottomright { z-index:27; width:450px; height: 700px; margin: 30px 0 0 0px; background-color:#428C3E; float:right;position: relative;}
form {
display: inline-block;
text-align: center;
}
/* end rules for contact page */
You could set a width to the form and then add margin: 0 auto; to the CSS. For example:
HTML:
<div>
<form></form>
</div>
CSS:
form {
margin: 0 auto;
width: 300px;
}
NOTE: For this to work, you must remove display:inline-block from form.
JS Fiddle Example (using your HTML/CSS).
You must set a Width of Ancestor element and then add margin:0 auto to its child.
See demo
Related
This is the content of <body> tag.
<div id="border">
<p><h1 style="text-align: center;">Welcome to ABC Airline!</h1></p>
<table caption="Choose your seat preference"
style="margin-bottom: 1.5em; margin-left: auto; margin-right: auto;">
<tr>
<td><p id="dd">Window Side<input type="radio" name="side"/></p></td>
<td><p id="dd">Front of plane<input type="radio" name="frontorback"/></p></td>
</tr>
<tr>
<td><p id="dd">Aisle Side<input type="radio" name="side"/></p></td>
<td><p id="dd">Middle of plane<input type="radio" name="frontorback"/></p></td>
</tr>
<tr>
<td><p id="dd">Center Seat<input type="radio" name="side"/></p></td>
<td><p id="dd">Back of plane<input type="radio" name="frontorback"/></p></td>
</tr>
</table>
<p><input type="submit" value="next" style="float: right;"></p>
</div>
styles are defined like this:
#border{
border: 2px solid black;
border-radius: 25px;
width: 50%;
margin: auto;
background-color: #ffc;
}
#dd{
margin: 0.2em 0.2em 0.2em 0.2em;
}
And, this is the result run with Chrome in macOS.
The button is on the right side as I intended but it's out of the div block.. When style="float: right;" is not defined, it is not aligned to right but in the border.
I'd like to keep this inside the border. What should I do?
Giving overflow: hidden fixes this. It is because of clearfix. This is the fix you are looking for:
#border {
overflow: hidden;
padding-bottom: 10px;
}
I have given an extra bottom padding to facilitate the whole button, instead of cutting it. You may even give a margin-right to the button to make it out of the border cut.
Snippet
#border {
border: 2px solid black;
border-radius: 25px;
width: 50%;
margin: auto;
background-color: #ffc;
overflow: hidden;
padding-bottom: 10px;
}
#dd {
margin: 0.2em 0.2em 0.2em 0.2em;
}
<div id="border">
<p>
<h1 style="text-align: center;">Welcome to ABC Airline!</h1>
</p>
<table caption="Choose your seat preference" style="margin-bottom: 1.5em; margin-left: auto; margin-right: auto;">
<tr>
<td>
<p id="dd">Window Side
<input type="radio" name="side" />
</p>
</td>
<td>
<p id="dd">Front of plane
<input type="radio" name="frontorback" />
</p>
</td>
</tr>
<tr>
<td>
<p id="dd">Aisle Side
<input type="radio" name="side" />
</p>
</td>
<td>
<p id="dd">Middle of plane
<input type="radio" name="frontorback" />
</p>
</td>
</tr>
<tr>
<td>
<p id="dd">Center Seat
<input type="radio" name="side" />
</p>
</td>
<td>
<p id="dd">Back of plane
<input type="radio" name="frontorback" />
</p>
</td>
</tr>
</table>
<p>
<input type="submit" value="next" style="float: right;">
</p>
</div>
Preview
The simple answer is 'use overflow auto to force BFC', like this:
overflow: auto;
Source: Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?
I have a table consisting of a lot of input elements inside td elements.
<table>
<tbody>
<td class="first">
<div>
<input type="text" />
</div>
</td>
</tbody>
</table>
The width of the input elements should be 20px. The width of the table is set to 100%. The input element in the first td should only have a min-width set so it will strech out (since the table has 100% width). I want the other inputs to have a fixed width (20px). When I do this the td elements has a much larger width than the input elements:
https://jsfiddle.net/cbzuwyrg/
Is it possible to make the td elements the same width as the input elements without setting the same width in css?
This fiddle shows what I want to achieve, but without having to set the width of the td to 20px:
https://jsfiddle.net/cbzuwyrg/1/
I guess this will work with you too .
Edit : i edited the code so all tds be the same size as the input .
table {
width:100%;
border-collapse: collapse;
}
td.first{
width:auto;
border: 1px solid #000;
}
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
<table>
<tbody>
<td class="first">
<div>
<input type="text" size="2">
</div>
</td>
<td class="first">
<div>
<input type="text" size="7">
</div>
</td>
<td class="first">
<div>
<input type="text" size="">
</div>
</td>
<td class="first">
<div>
<input type="text" placeholder="last" size="" >
</div>
</td>
</tbody>
</table>
The code is html and CSS no JavaScript were used .
<table>
<tbody>
<td class="first">
<div>
<input type="text" />
</div>
</td>
<td>
<div style="width:8px">
<input type="text" />
</div>
</td>
<td>
<div style="width:8px">
<input type="text" />
</div>
</td>
<td>
<div style="width:8px">
<input type="text" />
</div>
</td>
</tbody>
</table>
Add the width size to your div's
I think that the scss you are writing can be more useful if you nest it properly, this works fine just adding a calc and nesting the scss code. I hope it can helps.
In this case the td's with 20px of width use a class that stablish that width, and the inputs have a calc because when you use 100% width they use the whole space until next input.
Sass:
table {
width:100%;
border-collapse: collapse;
td {
border: 1px solid #000;
//display: inline-block;
width: 100%;
div {
input {
width: calc(100% - 4px) ;
&.td20 {
width: 20px;
}
}
}
}
}
HTML:
<table>
<tbody>
<td class="first">
<div>
<input type="text" />
</div>
</td>
<td>
<div>
<input type="text" class="td20"/>
</div>
</td>
<td>
<div>
<input type="text" class="td20" />
</div>
</td>
<td>
<div>
<input type="text" class="td20" />
</div>
</td>
</tbody>
</table>
Here you can see it working: https://jsfiddle.net/javierdp/adtj2t3o/8/
I am trying to float the submit button to the right in the form but I am facing problem the float is not being applied on the submit button Login. I have added some of server-side generated code.
Code
#login-form{
width: 400px;
background-color: #6B0000;
color: white;
}
#loginButton{
color: #6B0000;
border: 1px solid;
padding: 5px 30px 5px 30px;
background-color: white;
border-radius: 3px;
/*This one here does not work */
float: right;
}
<body>
<header id="header">
<h1>
Google Maps & Yahoo Mashup
</h1>
</header>
<DIV id="content">
<form id="login-form" name="login-form" method="post" onSubmit='return false'>
<input type="hidden" name="login-form" value="login-form" />
<table>
<tbody>
<tr>
<td><label>Email</label></td>
<td><input id="login-form:email" type="text" name="login-form:email" /></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input id="login-form:pwd" type="text" name="login-form:pwd" /></td>
</tr>
<tr>
<td><input type="submit" value="Login" id="loginButton" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" />
</form>
</DIV>
</body>
Try this one. I set a colspan of 2 to the input button and gave its parent td a width of 100%, this along with the float right should shift it to the right.
#login-form{
width: 400px;
background-color: #6B0000;
color: white;
}
#loginButton{
color: #6B0000;
border: 1px solid;
padding: 5px 30px 5px 30px;
background-color: white;
border-radius: 3px;
/*This one here does not work */
float: right;
}
/* Make the input's parent td 100%, you may want
a class here instead for browser support */
td:last-child {
width: 100%;
}
<body>
<header id="header">
<h1>
Google Maps & Yahoo Mashup
</h1>
</header>
<DIV id="content">
<form id="login-form" name="login-form" method="post" >
<input type="hidden" name="login-form" value="login-form" />
<table>
<tbody>
<tr>
<td><label>Email</label></td>
<td><input id="login-form:email" type="text" name="login-form:email" /></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input id="login-form:pwd" type="text" name="login-form:pwd" /></td>
</tr>
<tr>
<!-- setting a colspan of two -->
<td colspan="2"><input type="submit" value="Login" id="loginButton" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" />
</form>
</DIV>
</body>
I have the child tags of a tag and made the background-color of the parent tag to blue. It change the background-color of the block, but I want it color to the entire width of the web page. Even the background-image of such a tag is not even displayed. Here is my code:
<html>
<head>
<title>Login</title>
<style>
#login
{
background-color:blue;
color:white;
overflow:hidden;
}
#registration
{
background-color:white;
overflow:hidden;
}
.logintable
{
color:white;
}
</style>
</head>
<body bgcolor="white">
<div>
<div id="login">
<div style="display: inline-block; white-space: nowrap;float:left">
<font face="Monotype Corsiva" color="white" size="5">Facebook</font>
</div>
<div style="display: inline-block; white-space: nowrap;float:right">
<table class="logintable" align="right">
<tr>
<td>email:</td>
<td><input type="text" name="email" id="email"></td>
<td>password:</td>
<td><input type="password" name="pswd" id="pswd"></td>
<td><input type="submit" value="Login" onClick="return validate()"></td>
</tr>
</table>
</div>
</div>
<div id="registration" style="background-image:registration.jpg">
<div id="empty" style="float:left">
<img src="registration.jpg" height="610">
</div>
<div id="registraionform" style="float:right">
<table align="right" height="630" cellspacing="10" cellpadding="3">
<tr>
<td><B><font size="6">Sign Up</font></B></h1>
<br><br><font size="3">Its free and always will be.</font>
</td>
</tr>
<tr>
<td>Firstname <input type="text" name="First"></td>
<td>Lastname <input type="text"name="Last"></td>
</tr>
<tr><td>Gender</td><td><input type="radio"name="gender">male
<input type="radio"name="gender">female</td>
</tr>
<tr><td>phone</td><td><input type="text"name="phone"></td></tr>
<tr><td>email</td><td><input type="text"name="user"</td></tr>
<tr><td>password</td><td><input type="text"name="pass"></td></tr>
<tr><td>Re-typepassword</td><td><input type="password"name="rpass"></td></tr>
<tr><td><input type="checkbox" name="check" id="check">I agree to the terms and conditions</td><td></td></tr>
<tr><td></td><td><input type="submit"value="Sign Up"></td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
Even the background-image is not loaded, I have used tag to display that pic beside sign up.
And this is the pic of the resultant page:
Setting body {margin: 0;} in the style section fixes the extra white space around the page.
I have this table:
<table>
<tr>
<td>
<input type="text" class="half"/>
<input type="text" class="half" />
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
</tr>
</table>
CSS:
table {
width: 100%;
border-spacing: 0;
}
.half {
float: left;
width: 50%;
}
How can I have two input fields next to each other each filling up 50% of the table cell's (natural / normal) width?
Right now, this doesn't work. The table cells containing the input fields of class half are far too wide and I can't see why this happens.
You need two things: DEMO
avoid the white-space in between inline-block element (you may then drop the float property).
include border size into width.
First, the easiest way is to remove white-space from html code and write it so :
<input ... /><input ... />
Second, is to switch to another box-model so :
box-sizing:border-box;
Add vendor-prefix whenever needed .
How about applying .half to the <td> parent?
<td class="half">
<input type="text" />
<input type="text" />
</td>
How about :
<table border="2px">
<tr>
<td>
<input type="text" class= "half"/>
<input type="text" class= "half"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
</tr>
</table>
.css
table {
width: 100%;
border-spacing: 0;
}
td{
padding-left: 5px;
}
.half {
float: left;
width: 49%;
margin: 2px;
}
A quick way to resolve this, wrap then inputs in a span tag. Set the span to inline-block 50%, and the inputs to 100%. Using a box model maintains the inputs in the td
http://jsfiddle.net/HgxFf/
<table>
<tr>
<td>
<span><input type="text" class="half"/></span>
<span><input type="text" class="half" /></span>
</td>
<td>
<input type="text"/><input type="text"/>
</td>
<td>
<span><input type="text"/></span>
</td>
</tr>
</table>
CSS
table {
width: 100%;
border-spacing: 0;
}
td{border:1px solid #000000;font-size:0px; }
span{
display:inline-block;
width:50%;
padding:0px
}
.half {
width: 100%;
}
input[type="text"]{
box-sizing:border-box;
}
}