Given the code example here: http://jsfiddle.net/YqTmV/, how would I make the box I create in CSS to only be as wide as the HTML elements inside?
HTML:
<div class="login-region">
<h1>Login</h1>
<form id="login-form" action="login.php" method="post">
<table>
<tr>
<td>Username</td>
<td><input type="text" id="username" name="username"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" id="password" name="password"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"/></td>
</tr>
</table>
</form>
</div>
CSS:
.login-region {
margin:200px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
h1 {
font-size: 20px;
margin: 5px;
border:
}
Changing the display value of .login-region to inline-block is one way:
.login-region {
display: inline-block;
margin:200px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
http://jsfiddle.net/YqTmV/1/
The easiest way is to float the outer box.
.login-region {
float:left;
}
If you want to make it centered..
position:relative;
left:50%;
margin-left:-Wpx; /* put half the box width on W */
Don't forget to clear it afterwards :)
Related
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>
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>
Just cannot imagine how to do a single table cell border black. Just like it is in excel - whole table TD borders are, for example, white, and selected cell has black border.
The obvious solution is to change borders of the nearest cells as well, but the table is dynamically generated ant it takes too much effort to calculate current cell's neighbours. Although, the current cell is known from the "click" event, so it would be great to achieve that styling it.
Tried to put the div inside but cannot align it without specifying cell and div sizes exactly in pixels, that is not portable.
Please help!
Sorry, thought it's obvious without code. Actually, I don't have a code that's working, but currently I'm trying that (wrote just a quick sample, sorry):
https://jsfiddle.net/a549b6t1/10/
<table>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td id="selected">
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr> <tr>
<td>
<div>
<input type="text">
</div>
</td>
<td> <div>
<input type="text">
</div>
</td>
<td> <div>
<input type="text">
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr>
</table>
And css (dunno why, this site asks me to paste the code here)
table
{
border-collapse: separate;
border-spacing: 0;
padding: 0;
border: 0px solid #ffffff;
margin: 1em;
}
td
{
font-size: 1rem;
empty-cells: show;
border: 1px solid rgba(230,222,255,1);
padding: 0;
}
td#selected
{
font-size: 1rem;
empty-cells: show;
border: 1px solid rgba(0,0,0,1);
padding: 0;
}
tr:nth-child(odd)
{
padding: 0px;
margin: 0;
background: #efedee;
border: 0px solid transparent;
overflow: visible;
}
tr:nth-child(even)
{
padding: 0px;
margin: 0;
background: #f6f4f5;
border: 0px solid transparent;
overflow: visible;
}
input[type=text]
{
background: rgba(255,255,255,0);
border: 0px solid rgba(255,255,255,1);
margin: 0;
padding: 5px;
height: 1rem;
}
Hope it will help to understand the problem
This is how I want it to llok like
This is how it really looks like now
Solution provided by Shaggy : https://jsfiddle.net/a549b6t1/14/
Thank you!
Adjusting the adjacent cell borders is still going to cause you a problem as, on the cell above, for example, you'll have the left and right borders cutting in to the bottom border slightly as illustrated in this snippet:
div{
border:10px solid;
border-color:#000 #f00 #090 #009;
height:100px;
width:100px;
}
<div></div>
Instead, what you're going to need to do is collapse the borders of your table and then, for the active cells, use an absolutely positioned pseudo element to create the highlighted border, setting all 4 positioning values to the negative pixel value of the size of your border.
Here's a quick example using :hover to illustrate the principle:
*{box-sizing:border-box;}
table{
border-collapse:collapse;
}
td{
border:5px solid #ccc;
background:#eee;
height:100px;
position:relative;
width:100px;
}
td:hover::before{
border:5px solid #000;
bottom:-5px;
content:"";
left:-5px;
position:absolute;
right:-5px;
top:-5px;
z-index:1;
}
div{
position:relative;
z-index:2;
}
div,input{
width:100%;
}
<table>
<tbody>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
</tbody>
</table>
As an alternative, rather than giving each individual cell an initial border, you could use border-spacing instead, like so:
*{box-sizing:border-box;}
table{
background:#ccc;
border-spacing:5px;
}
td{
background:#eee;
height:100px;
position:relative;
width:100px;
}
td:hover::before{
border:5px solid #000;
bottom:-5px;
content:"";
left:-5px;
position:absolute;
right:-5px;
top:-5px;
}
div{
position:relative;
z-index:2;
}
div,input{width:100%;}
<table>
<tbody>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
</tbody>
</table>
You can use jquery to get current cell and then change its class to other class that defines visible borders
jquery :
$("#cell").click(function() {
$(this).toggleClass('not-selected selected');
});
css :
.not-selected{
border: 0px;
}
.selected{
border: 1px solid black;
}
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.
I want to make first input have the width 100% and second + image = 100% so that second input get the rest of the space (100%-img size) on the same line. Is it possible to do using CSS?
<html><head><title>width test</title>
<style type="text/css">
.t {
width: 100%;
table-layout:fixed;
}
.caption {
text-align: left;
width: 35%;
}
.data {
text-align: left;
width: 65%;
}
.edt {
width: 100%;
}
</style>
</head>
<body>
<table class="t">
<tr>
<td class="caption">Caption:</td>
<td class="data"><input type="text" class="edt" /></td>
</tr>
<tr>
<td class="caption">Caption:</td>
<td class="data">
<input type="text" class="edt" /><img width="22px" src="cal.png" />
</td>
</tr>
</table>
</body>
</html>
Yes, this can be done with CSS. The trick is to use display: table and display: table-cell, where where width: 100% means "the rest of the available space".
Here is an example (with wrapper divs around .edt and the image link for better result): http://jsfiddle.net/zgw8q7vj/
The important CSS parts are these:
/*Use "table" layout in the 'data' cells,
and give them all the available width (after the captions)*/
.data {
display: table;
width: 100%;
}
/*Then give the textbox all the available remaining width...*/
.edt-wrapper {
display: table-cell;
width: 100%;
}
/*...after the image has claimed the space it needs*/
.img-wrapper {
display: table-cell;
}
If you don't want the caption column to take more space than it needs, you can even remove table-layout:fixed; and width: 35%; from .t and .caption
untested.
you didn't mention colspans can't be used, so this solution uses it.
<table class="t">
<tr>
<td class="caption">Caption:</td>
<td class="data"><input type="text" class="edt" /></td>
</tr>
<tr>
<td class="caption">Caption:</td>
<td colspan="3"><input type="text" class="edt" /></td>
<td class="data"><img width="22px" src="cal.png" />
</td>
</tr>
</table>
I have found that I can do it with tables. The question still remain, is it possible to do with div/css?
<html><head><title>width test</title>
<style type="text/css">
.t {
width: 100%;
table-layout:fixed;
}
.caption {
text-align: left;
width: 35%;
}
.data {
text-align: left;
width: 65%;
}
.edt {
width: 100%;
}
.joiningtable
{
border-spacing:0px;
border-collapse:collapse;
width:100%;
margin:0px;
border:0px;
padding:0px;
}
.joiningrest
{
width:100%;
margin:0px;
border:0px;
padding:0px;
}
.joiningfixed
{
margin:0px;
border:0px;
padding:0px;
}
</style>
</head>
<body>
<table class="t">
<tr>
<td class="caption">Caption:</td>
<td class="data"><input type="text" class="edt" /></td>
</tr>
<tr>
<td class="caption">Caption:</td>
<td class="data">
<table class="joiningtable">
<tr><td class="joiningrest"><input type="text" class="edt" /></td><td class="joiningfixed"><img src="cal.png" /></td><tr>
<table>
</td>
</tr>
</table>
</body>
</html>
If you're still interested, it is possible but you need to use a little magic..
With absolute positioning, you can stretch those entry fields as wide as you like, or rather, you make them stretch to 100% and put them inside spans that stretch as wide as you like because input fields are stubborn things and won't behave otherwise.
<html>
<body>
<div style="background-color:#DDDDFF; position:absolute; left:10px; top:10px; right:10px; height:80px;">
<span style="position:absolute; left:10px; top:10px;">Caption</span>
<span style="position:absolute; left:10px; top:40px;">Caption</span>
<span style="position:absolute; left:70px; top:10px; right:10px;">
<input type="text" style="width:100%" />
</span>
<span style="position:absolute; left:70px; top:40px; right:40px;">
<input type="text" style="width:100%" />
</span>
<img style="width:22px; position:absolute; top:40px; right:10px;" src="cal.png" />
</div>
<div>
</div>
</body>
</html>
P.S. I've left the style definitions on the entities for simplicity. In a real-world case, I'd move them to a .css file of course.