I am new to CSS, and I am writting a web page with a form that has submit button, but I am not able to align well the submit button within the form
this is what I get with this: enter image description here
I don know how can I fix this, so any help is very appreciated.
h1 {
text-align: center;
color: blue;
}
body {
background-color: #1AD5EA;
text-align: center;
}
form {
display: inline-block;
text-align: center;
}
td {
/* text-align: center; */
font-weight: bold;
}
input[type=submit] {
padding: 5px 55px;
border: 5 none;
border-radius: 15px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Nuevo cliente</title>
</head>
<body>
<h1>Introduzca los datos del nuevo cliente</h1>
<br/>
<form action="procesar_form.php" method="post">
<table>
<tr>
<td>Nombre</td>
<td>
<input type="text" name="nombre">
</td>
</tr>
<tr>
<td>Dirección</td>
<td>
<input type="text" name="direccion">
</td>
</tr>
<tr>
<td>Tel</td>
<td>
<input type="text" name="tel">
</td>
</tr>
<tr>
<td>
<br>
<br>
<input align="center" type="submit" value="Enviar">
</td>
</tr>
</table>
</form>
</body>
</html>
If you want the button to be aligned to the right, you can set the parent td for the submit button to colspan="2" so that the cell will span both columns in your table, and assign text-align: right;
h1 {
text-align: center;
color: blue;
}
body {
background-color: #1AD5EA;
text-align: center;
}
form {
display: inline-block;
text-align: center;
}
td {
/* text-align: center; */
font-weight: bold;
}
input[type=submit] {
padding:5px 55px;
border:5 none;
border-radius: 15px;
text-align:center;
}
.submit {
text-align: right;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Nuevo cliente</title>
</head>
<body>
<h1>Introduzca los datos del nuevo cliente</h1>
<br/>
<form action="procesar_form.php" method="post">
<table>
<tr>
<td>Nombre</td>
<td><input type="text" name="nombre"></td>
</tr>
<tr>
<td>Dirección</td>
<td><input type="text" name="direccion"></td>
</tr>
<tr>
<td>Tel</td>
<td><input type="text" name="tel"></td>
</tr>
<tr>
<td colspan="2" class="submit">
<input align="center" type="submit" value="Enviar">
</td>
</tr>
</table>
</form>
</body>
</html>
Since you are using a table to handle your formatting, I don't think what you're looking for needs to be a CSS answer.
In your case, if you are trying to align your button to be below the text input boxes, then you need to create a blank td in your last tr to fill the gap and align the next td that contains your button on the right.
<tr>
<td>
</td>
<td>
<br><br>
<input align="center" type="submit" value="Enviar">
</td>
</tr>
For a CSS-only solution, the easiest next step would be to remove all table references and rely on CSS for positioning of all elements.
Assuming that you want the button to go in the center:
You want to add colspan="2"
in the td which holds you submit button
Please try to avoid using table to position elements as that will never give you full control over your positioning and it is somewhat deprecated.
Try this.
CSS:
h1 {
text-align: center;
color: blue;
}
body {
background-color: #1AD5EA;
text-align: center;
width:100%;
}
form {
display: inline-block;
text-align: center;
}
td {
/* text-align: center; */
font-weight: bold;
}
input[type=submit] {
padding:5px 55px;
border:5 none;
border-radius: 15px;
margin:0 auto;
}
HTML;
<form action="procesar_form.php" method="post">
<table>
<tr>
<td>Nombre</td>
<td><input type="text" name="nombre"></td>
</tr>
<tr>
<td>Dirección</td>
<td><input type="text" name="direccion"></td>
</tr>
<tr>
<td>Tel</td>
<td><input type="text" name="tel"></td>
</tr>
<tr>
</table>
<div> <input type="submit" value="Enviar" ></div>
</form>
Related
i would like to set the checkbox inside a table to middle / center
the dirty way i am using is
<td>
<input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">
</td>
However, i am looking a way that all the checbox inside the table will be centered. So i am come out with a css
.table td input[type="checkbox"] {
text-align: center;
}
but the css is not working as expected. how to style it in css?
Set it on the input's parent, in this case the td.
Updated showing how-to when targeting only specific cells
table td {
text-align: center;
}
table {
width: 300px;
}
table td {
border: 1px solid;
}
table td.centered {
text-align: center;
}
<table>
<tr>
<td class="centered">
<input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">
</td>
<td>
Not centered
</td>
</tr>
</table>
If you have more content in same cell, add a wrapper
table {
width: 300px;
}
table td {
border: 1px solid;
text-align: center;
}
table td div {
text-align: left;
}
<table>
<tr>
<td>
<input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">
<div>
Not centered
</div>
</td>
</tr>
</table>
try this
td input[type="checkbox"] {
width:20px;
height:20px;
display:block;
argin:0px auto;
}
function alerrt() {
alert("I am centered! checkbox");
}
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding:5px;
}
table td lable{
margin-right:10px;
}
<table>
<tr>
<td class="centered">
<lable> please check </lable> <input type="checkbox" onclick="alerrt()" style="text-align:center;" ng-model="x.dedbuffer">
</td>
</tr>
</table>
I want to create a border around my html component. HTML legend element can be used but i want to use it out of the form.
HTML Legend: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset
I tried but there is an issue title and border. Below is the jsfiddle for the same.
.temp {
border: 1px solid #999;
margin-top: 20px;
padding: 20px;
position: relative;
}
http://jsfiddle.net/alpeshprajapati/a6a93fg9/1/
How can i achieve output same as legend ? Thanks.
You are pretty much there. The last step to make your markup look like a legend would be to add a background-color to the span which matches the background-color of .temp and the element that contains it. This ensures that the border or .temp does not show behind the text (as background-color is transparent by default).
.temp > span {
background-color: white;
font-size: 21px;
left: 2%;
position: absolute;
top: -15px;
}
.temp {
border: 1px solid #999;
margin-top: 20px;
padding: 20px;
position: relative;
}
<div class="temp">
<span>Permissions</span>
<table class="table cs-table-no-bordered table-striped">
<thead>
<tr>
<th>Modules</th>
<th class="text-center">Edit</th>
<th class="text-center">Delete</th>
<th class="text-center">View</th>
<th class="text-center">All</th>
</tr>
</thead>
<tbody>
<tr>
<td>M1</td>
<td class="text-center">
<input type="checkbox" />
</td>
<td class="text-center">
<input type="checkbox" />
</td>
<td class="text-center">
<input type="checkbox" />
</td>
<td class="text-center">
<input type="checkbox" />
</td>
</tr>
</tbody>
</table>
</div>
I have this css caption effect:
.cell {
position: relative;
width: 180px;
height: 180px;
}
.caption {} .cell .caption {
opacity: 0;
text-decoration-color: gray;
text-align: center;
background: #eaeaea;
position: absolute;
font-weight: bold;
width: 180px;
height: 180px;
}
.cell:hover .caption {
box-shadow: 0 5px 2px #777;
cursor: pointer;
opacity: 0.7;
}
<table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">
<c:forEach var="product" items="${categoryProducts}" varStatus="iter">
<td>
<tbody>
<tr>
<td style="vertical-align: middle; width: 180px; text-align: center; height: 180px;" class="cell">
<a href="product?${product.id}">
<img class="img" alt="" src="${initParam.productImagePath}${product.name}.jpg" />
<div class="caption">
<br>view details</div>
</a>
<br>
</div>
</td>
<td style="vertical-align: middle; width: 140px; text-align: center;">${product.name}
<br>
</td>
<td style="vertical-align: middle; width: 125px; text-align: center;">$ ${product.price}
<br>
</td>
<td style="vertical-align: middle; width: 125px; text-align: center;">
<form action="addToWishlist" method="post">
<br>
<br>
<input name="productId" value="${product.id}" type="hidden">
<input class="submit" value="<fmt:message key='AddToWishlist'/>" type="submit">
</form>
<br>
</td>
<td style="vertical-align: middle; width: 123px; text-align: center;">
<form action="addToCart" method="post">
<br>
<br>
<input name="productId" value="${product.id}" type="hidden">
<input class="submit" value="<fmt:message key='AddToCart'/>" type="submit">
</form>
<br>
</td>
</tr>
</tbody>
</c:forEach>
</table>
The code in itself works perfectly fine. The caption shows as expected. The only thing tho, when there's an image inside of the cell, there is a display problem when mouse hover the image as shown from my local browser run from the IDE:
The caption overlays the next cell... What could cause this? I tried to play around with the .img and the .caption but cannot seem to find a solution...
Here the full image overlay caption effect i'm trying to accomplish:
http://www.corelangs.com/css/box/caption.html
So the problem in your screenshot is the caption of the bottom image overlaying on top of the first image? Not sure I understand this correctly, but if so there are three simple solutions I can think about:
Increase the margin between your images / rows
On :hover, increase margin, although that could be poor UX
Increase opacity from 0.7 to 1 so it overlays, but you cannot see the first cell through it
I have the same issue.
.mainDiv {
border-spacing: 15px;
}
.formDiv {
width: 300px;
background-color: #F5F6CE;
padding: 10px;
margin-left: 20px;
display: table-cell;
vertical-align: top;
}
.resultDiv {
background-color: #F5F6CE;
padding: 20px;
box-shadow: 5px 5px 5px #888888;
margin-left: 20px;
display: table-cell;
width: 100%;
}
Now, I want to add <h1> to formDiv which results in:
I want the company registration to be aligned to top.
I found many threads giving answer:
vertical-align: top;
but it's not working for me. Please help.
HTML is:
<div class="mainDiv">
<div class="formDiv" align="center">
<h1 align="center">Company Registration</h1>
<form id="compReg" onsubmit="SaveData();return false;">
<Table align="center" cellspacing="5px">
<tr>
<td>
<Input id="txtEmail" type="email" class="text" placeholder="Contact Email" />
</td>
</tr>
<!-- other input types -->
<tr>
<td>
<Input type="submit" value="Submit" />
<Input type="reset"/>
</td>
</tr>
</table>
</form>
</div>
<div class="resultDiv" id="result">
<div align="right">
<input type="button" onclick="clearData()" value="Clear" />
<br>
<br>
</div>
<table class="dataTable" width="300">
<thead>
<th width="20px">Id</th>
<th width="250px">Email</th>
<!-- other headers -->
<th width="50px">Color</th>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</div>
check JSFiddle I want the "problem" h1 to be aligned at top of left div.
h1 tag has default margin. Try to set it to 0px.
h1{
margin:0px;
}
Try resetting the default table padding and margin values
#yourtable {
margin: 0;
padding: 0;
}
As from my understanding if you are using table and trying to solve table cell spacing issue. try to make zero cell-spacing and cell-padding.
<table cellpadding="0" cellspacing="0">
CSS to H1 spacing
table h1{ margin:0; padding:0; }
JSFIDDLE DEMO
You mean this? Please post your HTML-Markup next time!
h1 { margin:0; background: blue; }
.formDiv {
width: 300px;
background-color: #F5F6CE;
margin-left: 20px;
padding: 0 10px 10px 10px;
display: table-cell;
}
<div class="wrapper">
<div class="formDiv">
<h1>Lorem</h1>
<p>ipsum dolor</p>
<input name="test" type="text">
</div>
</div>
Look at your fiddle: http://jsfiddle.net/xsmzLb3g/2/
You have to change the margin/padding of the h1 and div.
So this only happens in IE11 and I cannot figure out what is going on. When I click the input element (basically the focus event) the width of the element changes. I cannot figure out the CSS to fix this. Anyone have any ideas?
http://jsfiddle.net/JmRby/2/
TABLE
<table class="fields" id="EntityDetails_Fields" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="Form">Name:</td>
<td>
<input name="Name" id="Name" type="text" value="Memorial Park Group" />
</td>
</tr>
<tr>
<td class="Form">NPI:</td>
<td>
<input name="NPI" class="TextBox" id="NPI" type="text" value="" />
</td>
</tr>
<tr>
<td class="Form">Tax ID:</td>
<td>
<input name="TaxIDNumber" id="TaxIDNumber" type="text" value="21-21212121" />
</td>
</tr>
<tr>
<td class="Form">Medicare:</td>
<td>
<input name="MedicareNumber" id="MedicareNumber" type="text" />
</td>
</tr>
<tr>
<td class="Form">Medicaid:</td>
<td>
<input name="MedicaidNumber" id="MedicaidNumber" type="text" value="1234567" />
</td>
</tr>
<tr>
<td class="Form">In Use:</td>
<td><span id="InUse"><input name="InUse$ctl00" id="InUse_ctl00" type="checkbox" checked="checked" /></span>
</td>
</tr>
</tbody>
CSS
table.fields {
width: 98%;
margin: 4px 1%;
}
table.fields .Form, table.fields .fl {
padding: 2px;
}
table.fields > tbody > tr > td {
padding: 2px 1%;
vertical-align: middle;
}
.Form, .form, .fl {
white-space: nowrap;
width: 10%;
vertical-align: middle;
}
table.fields > tbody > tr > td {
padding: 2px 1%;
vertical-align: middle;
}
table.fields input[type='text'], table.fields input[type='password'], table.fields select, .inpt {
width: 98%;
border: solid 1px #666;
color: #000;
box-sizing: border-box;
}
Yeah mate, here you go: http://jsfiddle.net/3TwKF/
input::-ms-clear {
display:none;
}
This is the culprit (ms-clear)'s documentation.
input::-ms-clear
{
display:none;
}
Changing the text in text box changes the width in IE 11 for following link too. Above solution works for clicking the text. Here is a jsfiddle:
http://jsfiddle.net/3TwKF/20/
Please let me know for any solution