I have a basic CSS/html question about using html/CSS. I thought this was fairly basic and obvious, however it is not working as intended.
In this basic image, I would want the Labels to be to the right of Expertise
(creating a registration page where the user selects their Expertise)
I would believe this is basically
<tr>
<td>Expertise</td>
<input type="checkbox" style="vertical-align: left; margin: 12px;"> Label </input><br>
<input type="checkbox" style="vertical-align: left; margin: 12px;"> Label 2 </input>
</tr>
however this is not working as intended.
First of all your markup is invalid, table element can only have elements which are meant for table as their child elements i.e tbody, thead, th, tr, td etc, and no other elements, instead you can place those checkboxes inside td
Secondly input tag doesn't have any explicit closing tag, you need to self close it, else leave it without closing just like <br>
Third - Use label tag instead of having stray text besides checkbox
Demo
The right way
<table>
<tr>
<td class="valign">
Expertise
</td>
<td>
<input type="checkbox" style="vertical-align: left; margin: 12px;" />
<label>Label</label><br />
<input type="checkbox" style="vertical-align: left; margin: 12px;" />
<label>Labe2</label>
</td>
</tr>
</table>
CSS
.valign {
vertical-align: top;
}
Since you are already using tables, just place the input tags into another td tag like this:
<tr>
<td>Expertise</td>
<td>
<input type="checkbox" style="vertical-align: left; margin: 12px;"> Label </input><br>
<input type="checkbox" style="vertical-align: left; margin: 12px;"> Label 2 </input>
</td>
</tr>
This will make the checkboxes appear to the right of "Expertise".
Related
Im trying to do a linethrough over a label + checkbox both in a separate td.
In my example code I have created 2 tables:
Currently only table 1 is doing a line-through when checkbox = checked. I guess this is working because both elements share a td. Is there a way to fix this so table 2 can line-through instead of table 1? Thanks!
HTML:
<table id = "1">
<tr>
<td>
<input id="oregano" type="checkbox" class="checkedBox" />
<label for="oregano" class="checkedLabel">Oregano</label>
</td>
</tr>
</table>
<table id = "2">
<tr>
<td><input id="oregano" type="checkbox" class="checkedBox" /></td>
<td><label for="oregano" class="checkedLabel">Oregano</label></td>
</tr>
</table>
Stylesheet:
.checkedBox:checked + .checkedLabel {
text-decoration: line-through;
color: blue
}
Fiddle
http://jsfiddle.net/gdmpz506/
That is because you have a different syntax for each table.
If you put the checkbox and label in the same td in the second table it will work just fine. (and of-course make the id unique so that the second label does not point to the first element..)
.checkedBox:checked + .checkedLabel {
text-decoration: line-through;
color: blue;
}
<table>
<tr>
<td>
<input id="oregano-1" type="checkbox" class="checkedBox" />
<label for="oregano-1" class="checkedLabel">Oregano</label>
</td>
</tr>
</table>
<table>
<tr>
<td id="checktd">
<input id="oregano-2" type="checkbox" class="checkedBox" />
<label for="oregano-2" class="checkedLabel">Oregano 2</label>
</td>
</tr>
</table>
Demo at http://jsfiddle.net/gaby/gdmpz506/1/
It works in table 1 because there the input and label elements are siblings, i.e. children of the same element. It is irrelevant that the parent happens to be a td element. You are correctly using the “next sibling” operator +. (Here I’m assuming that you really want just the label struck out.)
The same is not possible when the input and label elements are not siblings, as they cannot be if they are in different td elements. There are no CSS selectors at present to handle such cases. You would need JavaScript to make checking a checkbox strike out the corresponding label.
I have a problem with aligning my labels and input fields in a form. Time and again I end up with something like this:
Which is produced with HTML like so:
...
<ul>
<li>
<label for="STREET">Street</label>
<input data-val="true" data-val-required="The Street field is required." id="STREET" name="STREET" type="text" value="P.O. Box 1053" />
</li>
<li>
<label for="SUITE">Suite</label>
<input id="SUITE" name="SUITE" type="text" value="" />
</li>
<li>
<label for="city">City</label>
<input data-val="true" data-val-required="The City field is required." id="city" name="city" type="text" value="Dalton" />
</li>
...
Naturally my issue is that the labels and the inputs don't line up, so the display is all jaggy, etc. I can personally think of many ways around this, using a table, setting a bunch of divs, and picking widths, etc. so that everything lines up properly.
It's not that these approaches don't work, but they don't seem to be more of a hack than a real solution, and then I end up having to manipulate the label widths if the label text / font changes, etc.
Is there an easier way to solve this type of problem, while preserving simple HTML / CSS or should I stick with the classic approach of hard coding widths, divs, using tables, etc ?
Here's an option
ul {
display: table;
}
li {
display: table-row;
}
label, input {
display: table-cell;
}
Of course you should adapt the css to your specific form, but this gives you table layout without sacrificing the markup. Here's a fiddle
it should be enough to set a width to the labels that is larger than the largest label-text
example css
label {
display:inline-block;
width:350px;
}
so all inputs would line up after 350px, is that your desired effect ?
http://jsfiddle.net/dKjpk/5/
Here is an option using floating inside the label if it's possible to give ul a fixed / relative width:
ul{
width:500px; // or 100%;
}
li{
width:100%;
display:block;
}
li{
list-style:none;
clear:both;
}
li label{
float:left;
}
li input{
float:right;
}
here's a fiddle
Arguably you could justify using a table here, since semantically you can consider that form to be tabular data.
Otherwise you need to either float the input elements right within their container so they are all flush, set a fixed width on the label elements, or use some kind of fluid grid to handle this (I usually use Foundation so I would use columns for this, with both label and input elements set to width: 100% within their fluid containers).
try it like this
by creating a table your things are in the same area beneath each other
<html>
<head>
<style>
label{
font-weight:bold;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td><label for="street">Street</label></td>
<td><input type="text" name="street"></td>
</tr>
<tr>
<td><label for="suite">Suite</label></td>
<td><input type="text" name="suite"></td>
</tr>
<tr>
<td><label for="city">City</label></td>
<td><input type="text" name="city"></td>
</tr>
<tr>
<td><label for="state_region">State or Region</label></td>
<td><select><option>Arizona</option></select></td>
</tr>
<tr>
<td><label for="pc">Postal Code</label></td>
<td><input type="text" name="pc"></td>
</tr>
<tr>
<td><label for="country">Country</label></td>
<td><select><option>USA</option></select></td>
</tr>
<tr>
<td><label for="phone">Phone</label></td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td><label for="fax">Fax</label></td>
<td><input type="text" name="fax"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" name="email"></td>
</tr>
</table>
</form>
</body>
I have one row consisting of two tds. TD1 contains two texts(txt1 and txt2). txt2 in TD1 must be in line with TD2. Here's my code :
<tr>
<td width="220">
<span class="b">TB From:</span>
<span style="position: relative; left : 20px;" id="lblTBHoriz" class="b"><br>
<span style="padding-left: 1.5px"> TBN:</span>
</span>
</td>
<td>
<pre></pre>
<input type="text" id="tBFrom" name="tBFrom"
value="" size="20" maxlength="16"
onkeypress="return isNumberKey(event);" onchange="validate(this);" >
</input>
</td>
</tr>
The problem is TBN: and the input box in the other td must be in line and in mozilla its working perfectly. But in IE, the input box is going up the text TBN: and getting aligned with TB From: text. What can i do to fix this one ? Kindly help .
In case the <input> has to be at the bottom each time you can add a class to the td tag and add some CSS to it:
td.your-class
{
vertical-align:bottom;
}
Tables are supposed to have tabular data. It's not recommended to use them for lay-out.
You could use divtags instead.
<div>TB From:</div>
<div><label>TBN:</label><input type="text" vlaue="" /></div>
The divtags you can style however you like.
<tr>
<td colspan="2" width="220">
<span class="b">TB From:</span>
<span style="position: relative; left : 20px;" id="lblTBHoriz" class="b"><br>
<span style="padding-left: 1.5px"> TBN:</span>
</span>
</td>
<td colspan="2">
<pre></pre>
<br/>
<input type="text" id="tBFrom" name="tBFrom"
value="" size="20" maxlength="16"
onkeypress="return isNumberKey(event);" onchange="validate(this);" >
</input>
</td>
</tr>
http://jsfiddle.net/dolours/zvMKH/335/
I have this form:
<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
<table>
<tr><td class=Forms>ICAO: <input type="text" value="" name="ICAO" /><br/><br/></td</tr>
<tr><td class=Forms>Name: <input type="text" value="Airbus A320" name="nombre" /><br/><br/></td></tr>
<tr><td class=Forms>Price: <input maxlength="9" value="1000000" type="text" name="precio" /> €<br/><br/></td></tr>
<tr><td class=Forms>Number Classes: <select name="numberclasses" id="numberclasses" onchange="callAjax()">
<option>Select Number of Classes</option>
<?php
echo'<option value="1">One</option>';
echo'<option value="2">Two</option>';
echo'<option value="3">Three</option>';
?>
</select><br/><br/></td></tr>
<tr><td class=Forms>First Class: <input disabled="disabled" type="text" name="classes1" /><br/><br/></td></tr>
<tr><td class=Forms>Bussines Class: <input disabled="disabled" type="text" name="classes2" /><br/><br/></td></tr>
<tr><td class=Forms>Economy Class: <input disabled="disabled" type="text" name="classses" /><br/><br/></td></tr>
<tr><td class=Forms>Capacidad: <input maxlength="3" value="150" type="text" name="pax" /> pasajeros<br/><br/></td></tr>
</table><br />
<input type="submit" name="enviar" value="Insertar"/>
</form>
And the CSS class Forms is:
td.Forms {
text-align: left;
text-indent: 10px;
font-family: Century Gothic;
font-weight: normal;
font-size: 15px;
white-space: nowrap;
}
The boxes start when the title finish and I want the boxes start all in the same part. I think the idea is see the titles in one colum and the boxes in other, like this http://i48.tinypic.com/2nbd2m8.png, but I have this http://i49.tinypic.com/1exb80.png
You need to add extra cells (<td>) for your input fields so that they all start on the same position. Additionally you may want to define a width to ensure that you have enough space between one cell and another on a row. I defined it to all <td>'s by adding width: 200px; to your td.Forms. Lastly to give spacing between rows I added:
td {
padding: 10px 0;
}
Which adds 10px padding to the top and bottom of every cell.
Checkout this fiddle to see the code in action.
Below is the correct html markup (assuming you're going to use table layout for this). Here is a demo.
<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
<table>
<tr>
<td class=Forms>ICAO:</td>
<td><input type="text" value="" name="ICAO" /></td>
</tr>
<tr>
<td class=Forms>Name:</td>
<td><input type="text" value="Airbus A320" name="nombre" /></td>
</tr>
<tr>
<td class=Forms>Price:</td>
<td><input maxlength="9" value="1000000" type="text" name="precio" /> €</td>
</tr>
<tr>
<td class=Forms>Number Classes:</td>
<td>
<select name="numberclasses" id="numberclasses" onchange="callAjax()">
<option>Select Number of Classes</option>
<?php
echo'<option value="1">One</option>';
echo'<option value="2">Two</option>';
echo'<option value="3">Three</option>';
?>
</select>
</td>
</tr>
<tr>
<td class=Forms>First Class:</td>
<td><input disabled="disabled" type="text" name="classes1" /></td>
</tr>
<tr>
<td class=Forms>Bussines Class:</td>
<td><input disabled="disabled" type="text" name="classes2" /></td>
</tr>
<tr>
<td class=Forms>Economy Class:</td>
<td><input disabled="disabled" type="text" name="classses" /></td>
</tr>
<tr>
<td class=Forms>Capacidad:</td>
<td><input maxlength="3" value="150" type="text" name="pax" /> pasajeros</td>
</tr>
</table>
<input type="submit" name="enviar" value="Insertar"/>
</form>
I am going to give you the answer - but first I want to explain some semantics and how one can properly code a form WITHOUT using tables.
Html form have been around since the inception of html. You will be amazed how many html form elements ARE NOT utilized when they simply exist to help you code properly semantic html. Proper semantic html means:
1) Your code is accessible to text viewers such as Google search engine and browsers used by blind people
2) Fulfills federal law (US laws require school/government websites to be accessible)
3) Will make it easier for you to code the backend (php) in the long run.
A form at its barebones should include:
<form>
<fieldset>
<div>
<label for="first-name">First Name</label>
<input type="textbox" name="first_name" id="first-name" value="" />
</div>
<div>
<label for="gender_selection">Gender</label>
<select name="gender" id="gender_selection">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</fieldset>
</form>
You must have a fieldset tag for each form tag.
label tag is used to define what the form element stands for. THIS IS WHAT tells a text viewer what each form element stands for! Sure you can do without but why when this tag was created for exactly that purpose.
The div tags will allow you to easily style errors/corrections needed.
CSS
form div {
overflow: hidden;
}
form div label {
float: left;
width: 120px;
padding: 0 20px 0 0;
}
form div input, form div select {
float: left;
width: 220px;
}
Simple css (not tested) to mimic your tabular forms with the added advantage of not using tables, being accessible, and using proper html.
Now if a user made an error with in let us say first name we simply add class .error to that div:
<div class="error">
<label for="first-name">First Name</label>
<input type="textbox" name="first_name" id="first-name" value="" />
</div>
CSS:
div.error label {
color: red;
}
div.error input {
border: red;
color: red;
}
ANSWER TO YOUR QUESTION:
Your html form "label" elements do not have a fixed width. Add a fixed width by either adding an extra <td> column or using the code I provided above.
Hopefully this post will help you for the future.
I am drawing a table with highly customized styles for its cells. Unfortunately, I discovered that increasing the border of the 6th cell to 4px creates a rendering problem as displayed in this screenshot:
this is the CSS for the rule that introduced the problem:
tr.item_cnnc td:first-child + td + td + td + td + td {
border: 4px solid black;
}
I just wonder why the border on the 3rd row is not displayed correctly. Any suggestions?
EDIT: pasting the HTML of the affected row:
<tr class="item item_cnnc">
<td class="itemid item_kritisch">DP3</td>
<td class=" item_kritisch">
put text here
</td>
<td class="option item_kritisch">
<input type="checkbox" name="Item_DP3_relevant" value="1" >
</td>
<td class="option">
<input type="text" size="1" name="Item_DP3_vw_pij" >
</td>
<td class="option item_kritisch">
<input type="text" size="1" name="Item_DP3_pij" >
</td>
<td class="option">
<input type="checkbox" name="Item_DP3_kr" value="true" >
</td>
<td class=" info parent">
<div id="popup_DP3" class="dropdown">put info here</div>
<a href="#info_DP3" id="info_DP3">
<img src="/images/Information_icon_small.png" alt="Info" width="15" height="15" border="0" class="x"/></a>
</td>
</tr>
It could get messy having different sized borders on table cells, I wouldn't recommend it.
Why not nest the checkbox inside a div with a black border, and height and width of 100%?
That might be a more consistent way of gettign the result you want.