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>
Related
What command do i need to use to don't make it zoom when i click "submit" or "reset" button. I want them just to look normal. i am supposed to use hover for this program but not for the last 2 buttons
Please see code below of what i have so far. anything is appreciated
<!DOCTYPE html>
<html>
<head>
<title>CSS rules</title>
<style>
input:focus{
background-color: yellow;
height: 40px;
width: 280px;
color: blue;
font-size: 24px;
}
input:hover{
background-color: cyan;
height: 40px;
width: 280px;
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<form action="">
<table>
<tr>
<td>Last Name:</td>
<td>
<input type="text" id="LastName" />
</td>
</tr>
<tr>
<td>First Name:</td>
<td>
<input type="text" id="FirstName"/>
</td>
</tr>
<tr>
<td>E-mail Address :</td>
<td>
<input type="password" id="Email"/>
</td>
</tr>
<tr>
<td>
<input type="submit"/>
</td>
<td>
<input type="reset"/>
</td>
</tr>
</table>
</form>
</body>
<!--body tag ends here-->
</html>
<!--html tag ends here-->
Tried playing with the code but i can't figure it out
<!DOCTYPE html>
<html>
<head>
<title>CSS rules</title>
<style>
input[type="text"]:hover, input[type="password"]:hover {
background-color: yellow;
height: 40px;
width: 280px;
color: blue;
font-size: 24px;
}
input[type="text"]:focus, input[type="password"]:focus {
background-color: cyan;
height: 40px;
width: 280px;
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<form action="">
<table>
<tr>
<td>Last Name:</td>
<td>
<input type="text" id="LastName" />
</td>
</tr>
<tr>
<td>First Name:</td>
<td>
<input type="text" id="FirstName"/>
</td>
</tr>
<tr>
<td>E-mail Address :</td>
<td>
<input type="password" id="Email"/>
</td>
</tr>
<tr>
<td>
<input type="submit"/>
</td>
<td>
<input type="reset"/>
</td>
</tr>
</table>
</form>
</body>
<!--body tag ends here-->
</html>
<!--html tag ends here-->
Changed the way you call the style. By passing in the [type=text] in CSS, you make sure that only type=text and type=password pick up the styles, and making the submit and the reset button not pick up the styles.
You'll need to add default style for when it's not hovering or in focus. Try adding this to your the area between your style tags:
input {
background-color: black;
height: 40px;
width: 280px;
color: white;
font-size: 24px;
}
If that's not what you intended, Yash Digant Joshi may have a better answer.
Add hover effect on input which is not submit or reset.
:where(input:not([type="submit"]):not([type="reset"])):hover
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 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 would like to do something like this:
Prefix - Input(Type: Text, Number,..) - Suffix - Button
ul
{
list-style: none;
width: 300px;
margin: 0;
padding: 0;
}
li
{
margin: 0;
padding: 0;
}
table
{
margin: 0 auto;
padding: 0;
border-spacing: 0px;
border-collapse: collapse;
}
input[type=number]
{
width: 100%;
}
input[type=button]
{
width: 100%;
padding: 0px 20px;
}
.value
{
padding-right: 10px;
padding-left: 10px;
}
.ok
{
padding-left: 10px;
}
<ul>
<li>
<table>
<tr>
<td class="prefix">
prefix
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suffix
</td>
<td class="ok">
<input type="button" value="val1"/>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<td class="prefix">
pre
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suf
</td>
<td class="ok">
<input type="button" value="longervalue"/>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<td class="prefix">
pre
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suf
</td>
<td class="ok">
<input type="button" value="v"/>
</td>
</tr>
</table>
</li>
</ul>
I have a fixed width within this 4 things have to be placed.
I don't know the Prefix, Suffix and also not the Text of the Button.
I would like that all those 3 elements use the minimal possible space and the width of the inputtag fills up this place.
Is this possible?
I would not like to use a table or JS IF POSSIBLE
Use Flexbox layout.
Given this html:
<section>
<label>pre</label>
<input type="number" size="1"/>
<label>suf</label>
<input type="button" value="longervalue"/>
</section>
All you need is:
section {
display: flex;
}
input[type=number] {
flex-grow: 1;
}
jsFiddle
Use belo code
<style>
ul
{
list-style: none;
width: 300px;
margin: 0;
padding: 0;
}
li
{
margin: 0;
padding: 0;
}
table
{
margin: 0 auto;
padding: 0;
border-spacing: 0px;
border-collapse: collapse;
}
input[type=number]
{
width: 100%;
}
input[type=button]
{
width: 100%;
padding: 0px 20px;
}
.value
{
padding-right: 10px;
padding-left: 10px;
}
.ok
{
padding-left: 10px;
}
</style>
<ul>
<li>
<table>
<tr>
<td class="prefix">
prefix
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suffix
</td>
<td class="ok">
<input type="button" value="val1"/>
</td>
</tr>
<tr>
<td class="prefix">
pre
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suf
</td>
<td class="ok">
<input type="button" value="longervalue"/>
</td>
</tr>
<tr>
<td class="prefix">
pre
</td>
<td class="value">
<input type="number" size="1"/>
</td>
<td class="sufix">
suf
</td>
<td class="ok">
<input type="button" value="v"/>
</td>
</tr>
</table>
</li>
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;
}