I need to vertically align my form in the middle of my first div. I have it centered horizontally but I can't get it to align in the middle vertically as well.
Basically even distance from the top and bottom.
<div id="login" style="position:absolute; width: 300px; height: 100px; z-index: 15; top: 50%; left: 50%; margin: -50px 0 0 -150px; background-color: #d0e9fc; border: 1px solid #B5BCC7;">
<div align="center" style="vertical-align: middle;">
<form th:action="#{/login}" method="post">
<table>
<tr>
<td>Username:</td>
<td>
<input type="text" name="username" id="username" />
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" name="password" id="password" />
</td>
</tr>
<tr>
<td colspan="2">
<input class="sButton" type="submit" value="Sign in" label="Sign In" id="submitButton" />
</td>
</tr>
</table>
</form>
</div>
</div>
Use this
#login {
display: table;
}
#login > div {
display: table-cell;
vertical-align: middle;
}
Try this I removed the align="center" part as it is depreciated.
I changed your css from using absolute positioning to just center the div using margins.
I changed the height from always being 100px, to the height of the form plus 10px on each top and bottom. Vertically centering it.
I alsp added the margin:auto centering to the table to center the table in side the form.
<div id="login" style="width: 300px; margin:auto; background-color: #d0e9fc; border: 1px solid #B5BCC7;">
<div style="margin: auto; padding-top:10px; padding-bottom:10px;">
<form th:action="#{/login}" method="post">
<table style="margin:auto">
<tr>
<td>Username:</td>
<td>
<input type="text" name="username" id="username" />
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" name="password" id="password" />
</td>
</tr>
<tr>
<td colspan="2">
<input class="sButton" type="submit" value="Sign in" label="Sign In" id="submitButton" />
</td>
</tr>
</table>
</form>
</div>
</div>
I removed the inline styling and added a class with the following properties:
http://codepen.io/anon/pen/WvMNZE
.c {
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-color: #d0e9fc; border: 1px solid #B5BCC7;
}
body {
margin: 0;
}
Related
I have a problem. I created the following form:
.input-block {
width: 100%;
padding-bottom: 40px;
}
.input-block span {
font-size: 19px;
}
.input-block table {
width: 100%;
border-spacing: 0;
}
.input-block td {
width: 10%
}
.input-block input, select {
width: 50%;
font-size: 16px;
}
.input-block input, select {
padding: 6px 6px;
margin: 8px 0;
display: inline-block;
border: 1px solid #000;
box-sizing: border-box;
}
<div class="input-block">
<h2>Account information</h2>
<table>
<tr>
<td>
<span>Voornaam</span>
</td>
<td>
<input type="text" value="Alexander" />
</td>
</tr>
<tr>
<td>
<span>Tussenvoegsel</span>
</td>
<td>
<input type="text" value="van" />
</td>
</tr>
<tr>
<td>
<span>Achternaam</span>
</td>
<td>
<input type="text" value="Dijk" />
</td>
</tr>
<tr>
<td>
<span>Email</span>
</td>
<td>
<input type="text" value="alexandervdijk#gmail.com" />
</td>
</tr>
</table>
</div>
<div class="input-block">
<h2>Wachtwoord veranderen</h2>
<table>
<tr>
<td>
<span>Nieuw wachtwoord</span>
</td>
<td>
<input type="password" value="" />
</td>
</tr>
<tr>
<td>
<span>Herhaal wachtwoord</span>
</td>
<td>
<input type="password" value="" />
</td>
</tr>
</table>
</div>
<div class="input-block">
<h2>Profiel informatie</h2>
<table>
<tr>
<td>
<span>Geslacht</span>
</td>
<td>
<select id="geslacht" name="geslacht">
<option value="man" selected>Man</option>
<option value="vrouw">Vrouw</option>
</select>
</td>
</tr>
<tr>
<td>
<span>Nationaliteit</span>
</td>
<td>
<select id="nationaliteit" name="nationaliteit">
<option value="nederland" selected>Nederland</option>
<option value="belgie">Belgie</option>
<option value="duitsland">Duitsland</option>
<option value="frankrijk">Frankrijk</option>
</select>
</td>
</tr>
</table>
</div>
Now, this is almost like the way I want, but I can't change 2 things:
I want to decrease the row spacing in the table, so the items are more compact on the screen. The space doesn't need to be gone, but a bit smaller
The input boxes and the names before the input boxes can be closer to each other. I already tried to set a width of 10% on the td in the table, but that didn't work.
Can someone help me change the layout?
I adjusted your code a bit, mostly just the CSS.
Are you looking for something that's more like this?
I put a set width on your input
.input-block input, select {
width: 300px;
font-size: 16px;
}
and decreased width of your input block
.input-block {
width: 70%;
padding-bottom: 40px;
}
.input-block {
width: 70%;
padding-bottom: 40px;
}
.input-block span {
font-size: 19px;
}
.input-block table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.input-block td {
width: 10%;
}
.input-block input, select {
width: 300px;
font-size: 16px;
}
.input-block input, select {
padding: 6px 6px;
margin: 8px 0;
display: inline-block;
border: 1px solid #000;
box-sizing: border-box;
}
<div class="input-block">
<h2>Account information</h2>
<table>
<tr>
<td>
<span>Voornaam</span>
</td>
<td>
<input type="text" value="Alexander" />
</td>
</tr>
<tr>
<td>
<span>Tussenvoegsel</span>
</td>
<td>
<input type="text" value="van" />
</td>
</tr>
<tr>
<td>
<span>Achternaam</span>
</td>
<td>
<input type="text" value="Dijk" />
</td>
</tr>
<tr>
<td>
<span>Email</span>
</td>
<td>
<input type="text" value="alexandervdijk#gmail.com" />
</td>
</tr>
</table>
</div>
</div>
I have 2 tables. 1 contains a table of text-boxes and the other contains buttons. I am able to center the table of text-boxes, but not the buttons.
HTML:
<div class="Input">
<table id="InputTable">
<tr></tr>
<th><input type="text" placeholder="foo"></th>
<th><input type="text" placeholder="foo"></th>
<tr></tr>
<th><input type="text" placeholder="foo3"></th>
<th><input type="text" placeholder="foo"></th>
<tr></tr>
<th><input type="text" placeholder="foo"></th>
<th><input type="text" placeholder="foo"></th>
</table>
</div>
<div class="Buttons">
<table id="ButtonTable">
<tr>
<button id="A" type="button">foo</button>
<button id="B" type="button">foo</button>
<button id="C" type="button">foo</button>
</tr>
</table>
</div>
CSS:
#InputTable, #ButtonTable
{
margin: 0 auto;
}
button
{
background-color: #D3D3D3;
color: black;
border: none;
padding: 5px 15px;
text-align: center;
margin: 4px 2px;
}
I have also tried to use "table" in my CSS instead of calling the id's from the HTML separately.
Also tried to add the buttons and text-boxes in 1 table but that doesn't align my together, and I think it would be better to keep them separate as the buttons will be used to calculate values from the text-boxes.
You can place your buttons inside td tags:
#InputTable,
#ButtonTable {
margin: 0 auto;
}
button {
background-color: #D3D3D3;
color: black;
border: none;
padding: 5px 15px;
text-align: center;
margin: 4px 2px;
}
<div class="Input">
<table id="InputTable">
<tr></tr>
<th><input type="text" placeholder="foo"></th>
<th><input type="text" placeholder="foo"></th>
<tr></tr>
<th><input type="text" placeholder="foo3"></th>
<th><input type="text" placeholder="foo"></th>
<tr></tr>
<th><input type="text" placeholder="foo"></th>
<th><input type="text" placeholder="foo"></th>
</table>
</div>
<div class="Buttons">
<table id="ButtonTable">
<tbody>
<tr>
<td>
<button id="A" type="button">foo</button>
</td>
<td>
<button id="B" type="button">foo</button>
</td>
<td>
<button id="C" type="button">foo</button>
</td>
</tr>
</tbody>
</table>
</div>
I had a quick HTML/CSS question I hope someone could help me with!
I am trying to learn the specifics of CSS in an online course. I am trying to do a very specific alignment with CSS within a form within a fieldset within a table. I need to have a fieldset split down the middle, and have the label directly on the left, and the input of the form directly on the right. I uploaded 2 pictures: what I have so far and what I am hoping to get, to give a visualization of what I am trying to achieve.
For anyone versed in CSS I am sure this is very easy but it's confusing me. Was just hoping to get some direction!
What I have:
http://imgur.com/gKoWux7
What I want to get:
http://imgur.com/IfeK8D1
Ignore the repetitive code/names in the first image, I am just worried about the alignment of the labels, inputs and buttons.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test 2</title>
<link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
<table>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Registration Information</legend>
<table>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Submit Your Registration</legend>
<table>
<tr>
<td><input type="submit"></td>
<td><input type="reset"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Here is my CSS:
body {
background-color: #A8F89C;
margin: auto;
width: 50%;
}
table {
width: 400px;
table-layout: fixed;
}
fieldset {
width: 410px;
margin: auto;
width: 50%;
}
legend {
font-size: 16px;
font-weight: bold;
}
label {
font-size: 14px;
color: #06127D;
}
td label {
font-weight: bold;
padding-right: 7px;
}
td input {
padding-left: 7px;
}
form input {
width: 140px;
}
label input[type="radio"] {
font-size: 14px;
color: #201E1C;
}
button {
width: 75px;
font-weight: bold;
background-color: rgb(28,67,14);
}
Thank you so much for any help!!!
I just have read your requirement what you want to get.
You can use below mentioned css to get layout like this image
http://imgur.com/IfeK8D1
<style>
fieldset,table{
width:100%
}
td{
width:50%;
}
tbody tr td:first-child{
text-align:right;
padding-right:20px;
}
I hope it will usefull for you as per your need.
Thanks
My idea would add this CSS to (Because label doesn't fill the entire width of the td as label is not a block level element)
td label{
width:100%;
display: inline-block;
text-align:right;
}
or if you prefer you could something like this too, add
td {
text-align: right
}
but it moves all the td elements to right.
Snippet below
Take out the border if needed
body {
background-color: #A8F89C;
margin: auto;
}
table {
table-layout: fixed;
}
fieldset {
width: 410px;
margin: auto;
text-align: center;
}
legend {
font-size: 16px;
font-weight: bold;
}
label {
font-size: 14px;
color: #06127D;
}
td label {
font-weight: bold;
padding-right: 7px;
}
td input {
padding-left: 7px;
}
form input {
width: 140px;
}
label input[type="radio"] {
font-size: 14px;
color: #201E1C;
}
button {
width: 75px;
font-weight: bold;
background-color: rgb(28, 67, 14);
}
table {
border: solid red;
display: inline-table;
}
fieldset {
border: solid blue;
}
td:nth-child(1) {
text-align: right
}
<!DOCTYPE html>
<html>
<head>
<title>Test 2</title>
<link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
<table>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Registration Information</legend>
<table>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Submit Your Registration</legend>
<table>
<tr>
<td>
<input type="submit">
</td>
<td>
<input type="reset">
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
First of all using div maybe easier to use ..I have modify a bit of your html where i get rid of the tr and td and use div .Hope this help
<div align = "center">
<label>First Name:</label>
<input type="text">
</div>
I have read through other posts but it seems that using display:inline-block and float:left doesn't fix my problem. Here's what I have:
.leftTable {
display: inline-block;
overflow: auto;
border: solid 1px black;
width: 20%;
}
.rightTable {
display: inline-block;
overflow: auto;
border: solid 1px black;
width: 80%;
}
<table class="leftTable">
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="dairy">
<input type="image" src="<%=request.getContextPath()%>/css/categories/dairy.jpg">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="meat">
<input type="image" src="<%=request.getContextPath()%>/css/categories/meats.jpg">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="bakery">
<input type="image" src="<%=request.getContextPath()%>/css/categories/bakery.jpg">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="fruitveg">
<input type="image" src="<%=request.getContextPath()%>/css/categories/fruit & veg.jpg">
</form>
</td>
</tr>
</table>
<table class="rightTable">
<tr>
<th>img</th>
<th>product name</th>
<th>price</th>
<th>button</th>
</tr>
<tr>
<td></td>
</tr>
</table>
The result I got was
[leftTable]
[IMG]
[IMG]
[IMG]
[IMG]
[rightTable]
[IMG] [Product Name] [Price] [Button]
I want the desired result of
[leftTable] [rightTable]
[IMG] [IMG] [Product Name] [Price] [Button]
[IMG]
[IMG]
[IMG]
I can't seems to spot the mistake, does anyone have suggestion on how to fix this issue?
A simple approach might be to use display: inline-table on your two tables, since you want them to behave like inline elements.
Floats could also work but it depends on other factors in your layout.
.leftTable {
border: 1px dotted blue;
display: inline-table;
vertical-align: top;
}
.rightTable {
border: 1px dotted blue;
display: inline-table;
vertical-align: top;
}
<table class="leftTable">
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="dairy">
<input type="image" src="http://placehold.it/101x50">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="meat">
<input type="image" src="http://placehold.it/102x50">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="bakery">
<input type="image" src="http://placehold.it/103x50">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="fruitveg">
<input type="image" src="http://placehold.it/104x50">
</form>
</td>
</tr>
</table>
<table class="rightTable">
<tr>
<th>img</th>
<th>product name</th>
<th>price</th>
<th>button</th>
</tr>
<tr>
<td></td>
</tr>
</table>
Put the tables inside a container and position the containers next to each other using the float attribute in CSS.
HTML
<div class="table1_con">
<table></table>
</div>
<div class="table2_con">
<table></table>
</div>
CSS
Body, html {width:100%;}
.table1_con {width:20%;
position:absolute;
float:left;
.table2_con {
width:80%;
position:absolute;
float:left;
}
.table1_con .leftTable{
display: inline-block;
overflow: auto;
border: solid 1px black;
width: 100%;
}
.table2_con .rightTable{
display: inline-block;
overflow: auto;
border: solid 1px black;
width: 100%;
}
I have this form:
Markup is:
<table style="width: 100%; padding:5px;">
<col style="width: 20%; text-align: left" />
<col style="width: 80%; text-align: left" />
<tr>
<td>
<div>
Наименование</div>
</td>
<td>
<dx:ASPxButtonEdit ID="beWorkTypeName" runat="server" AutoPostBack="False">
<Buttons>
<dx:EditButton>
</dx:EditButton>
</Buttons>
</dx:ASPxButtonEdit>
</td>
</tr>
<tr>
<td>
<div>
Скважина</div>
</td>
<td>
<dx:ASPxButtonEdit ID="beWell" runat="server" AutoPostBack="False">
<Buttons>
<dx:EditButton>
</dx:EditButton>
</Buttons>
</dx:ASPxButtonEdit>
</td>
</tr>
<tr>
<td>
<div>
Дата начала</div>
</td>
<td>
<table>
<tr>
<td>
<dx:ASPxDateEdit ID="deBeginDate" runat="server">
</dx:ASPxDateEdit>
</td>
<td>
<dx:ASPxButton ID="btnDateChange" AutoPostBack="false" Enabled="false" Text="Изменить дату"
runat="server">
</dx:ASPxButton>
</td>
<td>
<dx:ASPxCheckBox ID="cbIsMainWorkType" Enabled="false" runat="server">
</dx:ASPxCheckBox>
</td>
<td>
<div>
Основной вид работ в заявке</div>
</td>
</tr>
</table>
</td>
</tr>
Question is:
How do I get rid of this awful indent of table inside another table?
Try to style your inner table as follows:
.innerTable {
border: 0px;
border-collapse: collapse;
margin: 0px;
padding: 0px;
}
EDIT: You also might need to remove spacing from the table rows and cells:
.innerTable tr {
border: 0px;
margin: 0px;
padding: 0px;
}
.innerTable th {
border: 0px;
margin: 0px;
padding: 0px;
}
.innerTable td {
border: 0px;
margin: 0px;
padding: 0px;
}
Here's an example of how to layout form elements using CSS without using tables - hopefully it'll help? The key is in setting the width on the label elements, which then makes the input controls to their right lineup.
<html>
<head>
<style type="text/css">
label {
float: left;
width: 10em;
margin-right: 1em;
}
.row {
float: left;
clear: left;
padding-bottom: .3em;
}
</style>
</head>
<body>
<form action="example.php">
<div class="row">
<label for="name">Name:</label>
<input id="name" name="name" class="text" type="text" />
</div>
<div class="row">
<label for="email">Email address:</label>
<input id="email" name="email" class="text" type="text" />
</div>
<div class="row">
<label for="phone">Telephone:</label>
<input id="phone" name="phone" class="text" type="text" />
</div>
<div class="row">
<input class="submit" type="submit"
value="Submit" />
</div>
</form>
</body>
</html>