Suggest me some css which can be applied to get desired output like the Image below.
I have been trying to align two forms horizontally and one form vertically bottom of my second form. I am also looking to not use positioning like absolute or relative neither margin properties.
My code:
<div class="col-sm-4">
<div class="shop-menu pull-right" style="color:red;">
<ul class="nav navbar-nav">
<form id="sellerLogin" name="sellerLogin" action="/tiles/sellerLogin.action" method="post">
<div id="emailerr"> </div><div id="passerr"> </div><table class="wwFormTable">
<tbody>
<tr>
<td class="tdLabel"> </td>
<td><input type="text" name="email" value="" id="email" style="color : #000000;" rel="email" placeholder="Enter email-id.."></td>
</tr>
<tr>
<td class="tdLabel"> </td>
<td><input type="password" name="password" id="password" style="color : #000000;" placeholder="Enter Password.."> </td>
</tr>`enter code here`<tr>
<td colspan="2"><div align="right"> <input type="submit" id="sellerLogin_0" value="Login" style="color : #000000;" onclick="return logincheck();">
</div> </td>
</tr>
</tbody> </table> </form>`
What I'm trying to achieve:
Spare me from drawing compliments:).
Related
I'm having trouble identifying td and ts with css selectors. I'd like to move some elements around the page so gave them a div class. Howver using this in css doesn't seem to work.
What is the selector here please, as I can't understand if td, tr is acting as a label and in what sense?
Html:
<div class="ye">
<td>Your Email
</td>
</div>
<div class="ye1">.
<td><input type="text" name="email" /></td>
</div>
</tr>
<tr>
<div class="un">
<td>Username:</td>.
</div>
<div class="un1">
<td><input type="text" name="username" />.
</td>
</div>
</tr>
<tr>
<div class="pw">
<td>
<div align="right">Password:</div>
</td>
<td><input type="text" name="password" /></td>
</d iv>
</tr>
<tr>
<div class="
sub">
</td>
</div>
<div class="sub1">
<td><input name="submit" type="submit" value="Submit" /></td>
</div>
</tr ">
</table></form></body></html>
First of all, td inside a div is a big no no. Best practise it to keep the tr > td hirerarchy as is.
You can restructure it to have all your div inside td. Please check the code below.
<table>
<tbody>
<tr>
<td>
<div class="ye">
Your Email
</div>
</td>
<td>
<div class="ye1">
<input type="text" name="email" />
</div>
</td>
</tr>
</tbody>
</table>
Now, to use css,
table tbody .ye {
...
}
table tbody .ye1 input {
...
}
I'm looking to add some kind of separator within a table so I can apply a styling to a specific portion of the table. The table it divided into six columns which are two sets of the subject, the input box, and the marker.
When I add tags, they're thrown to the top when the html is rendered (inspect element on the jsfiddle). Can I add some kind of separator (div, span, or something else) such that each set of three has only one subject, one input box, and one marker.
I need this because when I add a check mark or x to a marker using jQuery, it bleeds over and styles the other marker in the same row the same way. Looking to make them independent.
https://jsfiddle.net/sLy9d67r/
<div class="conjugate-input-container ">
<table class="table table-striped conjugate-input">
<tbody>
<tr>
<div>
<td class="subject">je</td>
<td class="conj-input"><input type="text" id="conj1sg" autocomplete="off" spellcheck="false" tabindex="-1" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
<div>
<td class="subject">nous</td>
<td class="conj-input"><input type="text" id="conj1pl" autocomplete="off" spellcheck="false" tabindex="4" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
</tr>
<tr>
<div>
<td class="subject">tu</td>
<td class="conj-input"><input type="text" id="conj2sg" autocomplete="off" spellcheck="false" tabindex="2" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
<div>
<td class="subject">vous </td>
<td class="conj-input"><input type="text" id="conj2pl" autocomplete="off" spellcheck="false" tabindex="5" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
</tr>
<tr>
<div>
<td class="subject">il</td>
<td class="conj-input"><input type="text" id="conj3sg" autocomplete="off" spellcheck="false" tabindex="3" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
<div>
<td class="subject">ils</td>
<td class="conj-input"><input type="text" id="conj3pl" autocomplete="off" spellcheck="false" tabindex="6" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
</tr>
</tbody>
</table>
</div>
Within a table, you can only insert other elements (eg, span div) in the td. Div's are not allowed between two tr(s) or two td(s).
I am trying to develop a form, which has Emp details and Personal info details i need to display in the the below way.
This is my code
<table style="border: 1px solid; width: 900px; height: 200px; table-layout:fixed">
<tr>
<td>
<label for="Employee" style="height:20px">Employee:</label>
</td>
<td>
<label for="Id" style="height: 20px">Id</label>
</td>
<td>
<input type="text" id="txtId" />
</td>
<td>
<label for="Designation" style="height:20px">Designation</label>
</td>
<td>
<input type="text" id="txtDesig" />
</td>
</tr>
<tr>
<td></td>
<td> <label for="Mail" style="height: 20px">Mail</label></td>
<td> <input type="text" id="Text3" /> </td>
<td> <label style="height: 20px">Ext</label> </td>
<td> <input type="text" id="Text4" /> </td>
</tr>
<tr>
<td>
<label for="PersonalInfo" style="height:20px">Personal Info:</label>
</td>
<td>
<label for="Name" style="height:20px">Name:</label>
</td>
<td>
<input type="text" id="txtName" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="City" style="height:20px">City:</label>
</td>
<td>
<input type="text" id="txtCity" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="State" style="height:20px">State:</label>
</td>
<td>
<input type="text" id="txtState" />
</td>
</tr>
</table>
The issue is the textboxes are not in the same line and the form looks weird.
You can start like this:
table{border: 1px solid; width: 1500px;}
table tr td label{width: 95px;display: inline-flex;}
<table>
<tr>
<td>
<label>Employee:</label>
</td>
<td>
<label id="lblId">Id</label>
<input type="text" id="txtId " />
<label id="lblDesig">Designation</label>
<input type="text" id="txtDesig" />
</td>
</tr>
<tr>
<td></td>
<td>
<label id="Label3">Mail</label>
<input type="text" id="Text3 " />
<label id="Label4 ">Ext</label>
<input type="text" id="Text4" />
</td>
</tr>
<tr>
<td>
<label>Personal Info:</label>
</td>
<td>
<label>Name:</label>
<input type="text" id="txtName" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label>City:</label>
<input type="text" id="txtCity" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label>State:</label>
<input type="text" id="txtState" />
</td>
</tr>
</table>
I'm guessing you have to use tables for some reason? If not consider moving to using something a little more practical. Tables are cumbersome for this sort of thing. Having a column based approach would make a lot more sense.
In order to do this with tables, you're going to have to nest them. I only did a portion of the table to give you an idea of how to do it. So don't copy paste this. I took the IDs out to make it simpler to read. You'll obviously want those in there. Also when you run the code snippet make sure you scroll all the way left as the width is set to 1500. You can edit this when you apply it to your code. Just change where it says width: 33% to whatever you need.
<table style="border: 1px solid; width: 1500px; height: 400px;">
<tr>
<td style="width:33%;">
<label style="height:20px; width:33%;">Employee:</label></td>
</td>
<td style="width:33%;">
<table>
<tr>
<td><label height: 20px ">Id</label></td>
<td><input type="text " /></td>
<td><label id="lblDesig " height: 20px">Mail</label></td>
<td><input type="text" id="txtDesig" /></td>
</tr>
<tr>
<td><label style="height:20px;">Designation</label</td>
<td><input type="text" id="txtDesig" /></td>
<td><label id="lblId" height: 20px ">Ext</label></td>
<td><input type="text" id="txtDesig" /></td>
</tr>
</table>
</td>
</tr>
</table>
Normally table shouldn't be used for layout. Suggest using Bootstrap Grid system and Forms: http://getbootstrap.com/css/#grid
It gives you a modern/professional look, as well as handles different resolutions/devices for you nicely.
Here is a simple example:
<div class="row">
<div class="col-lg-2">
<label>Employee</label>
</div>
<div class="col-lg-5">
<div class="form-group">
<label for="Id" class="col-sm-2 control-label">ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Id">
</div>
</div>
<div class="form-group">
<label for="Mail" class="col-sm-2 control-label">Mail</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Mail">
</div>
</div>
</div>
<div class="col-lg-5"></div>
</div>
I trying to make the text bar wider but I cant get it to work. I have tried with width but it didn't work for me. I also couldn't find anything on the internet.
This is my HTML:
HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Benodigheden">Benodigheden:</label>
</td>
<td>
<input type="text" id="Benodigheden"name="Benodigheden" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
While the above code is very good, minimal and clean, which is best. But IF you need different widths for each of your text inputs then inline CSS is needed.
Example code:
<input style="width: 300px;" type="text">
<input style="width: 340px;" type="text">
If you only wish to make input-type="text" have a certain width, add this style in your css file fx:
input[type=text] {
width: 300px;
}
add some css to the head section of your html
<style>
input{width: 300px}
</style>
Make your table wider.
Add desired width to your td's
Ajust your inputs widht.
I have a reservation form on my website, I own a limo company.
But in order to save space on my website I want to know how to make a 2 column form.
This is my form now:
<form method="post" id="myForm" action="send2.php" class="sendmail" onsubmit="return validateForm()" style="text-align:center;">
<h1 class="lead" align="center" style="font-size:35; font-weight:800">RESERVE TRIP</h1>
<ul li><h1 class="lead" align="center" style="color:black;font-weight:bold;list-style:none;">Contact Information</h1></ul li>
<ul li style="list-style:none">
<li>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<p>
<table>
<td><p><label>Full Name:<input type="text" id="name" name="name" style="margin:10px; width:285px; height:15px"></td>
<td><p><label>Company Name:<input type="text" id="company" name="company" style="margin:10px; width:340px; height:15px"></label></p>
</table>
<table align="center">
<tr>
<td class="width:110px; height:15px">
<p><label>Phone #:<input type="text" id="phone" name="phone" placeholder="###-###-####" style="margin:10px; width:100px; height:15px">
</td>
<td class="width:70px; height:15px">
<p><label>E-mail:<input type="text" id="email" name="email" style="margin:10px; width:220px; height:15px">
</td>
</tr>
<tr>
</td>
</tr>
</table>
</li>
</ul>
<ul li><h1 class="lead" align="center" style="font-weight:bold;color:black;list-style:none">Pick-Up Information</h1></ul li>
<ul li style="list-style:none">
<li>
<option selected="">--</option>
<option>AM</option>
<option>PM</option>
</select></td>
</p>
</table>
<table align="center">
<tr>
<td class="width:110px; height:15px">
<label style="font-size:15px">Airport Name: <span class="error"></span></label>
<td class="width30">
<input type="text" id="rtairport" name="rtairport" class="input85" style="width:180px; margin:10px" value="">
</td>
</td>
<td class="width:110px; height:15px" align="center">
<label style="font-size:15px">Airline/Code:</label>
<td class="width30">
<input type="text" id="rtairline" name="rtairline" class="input85" style="width:75px; margin:10px" value="">
</td>
</td>
<td class="width:70px; height:15px">
<label style="font-size:15px">Flight #:</label>
<td class="width30">
<input type="text" id="rtfnumber" name="rtfnumber" class="input85" style="width:40px;margin:10px" value="">
</td>
</td>
</tr>
<tr>
<td>
</tr>
</td>
</table>
<br>
<li><h1 class="lead" align="center" style="font-weight:bold;color:black;list-style:none">Drop-Off Information</h1></li>
<ul li style="list-style:none">
<center><p><label>Full Address:<input type="text" id="rtstreet" name="rtstreet" style="margin:10px; width:360px; height:15px"></label></p></center>
<table align="center">
<tr>
<td class="width:110px; height:15px">
<label style="font-size:15px">Airport Name: <span class="error"></span></label>
<td class="width30">
<input type="text" id="doairport" name="doairport" class="input85" style="width:200px; margin:10px" value="">
</td>
</td>
<td class="width:110px; height:15px" align="center">
<label style="font-size:15px">Airline/Code:</label>
<td class="width30">
<input type="text" id="doairline" name="doairline" class="input85" style="width:75px; margin:10px" value="">
</td>
</td>
<td class="width:70px; height:15px">
<label style="font-size:15px">Flight #:</label>
<td class="width30">
<input type="text" id="dofnumber" name="dofnumber" class="input85" style="width:40px;margin:10px" value="">
</td>
</table>
</div>
</ul></li>
Any help/advice would help. Thank you.
Put the form fields in two separate divs and float them left. Also make sure to set their widths and to make them fit next to each other.
Make two <div>s. These will be the two columns. Then, in their css, add float: left. If you need any more help, just ask.
What browsers do you need to support? If you're OK using semi-experimental CSS3 features that won't work in older browsers, just use CSS3 columns.
it looks like you need some work with your tables
a general table format might look like
<form action="checkInput.php" method="POST">
<table border="1px solid #C00">
<tr>
<th colspan="2">Table Heading</th>
</tr>
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>An Input for Column 1
<input class="inputCSS" type="text" id="col1input" placeholder="Input Column 1" />
</td>
<td>An Input for Column 2
<input class="inputCSS" type="text" id="col2input" placeholder="Input Column 2" />
</td>
</tr>
<tr>
<td>Another row down for<br>Column 1</td><td>Another row down for<br>Column 2</td>
</tr>
</table>
</form>
this example shows a title "Table Heading" and 3 rows by 2 columns. if you follow the pattern with the <tr> (table rows) and <td> (individual cells) you can expand on this 2 column format. Then you can tweak it to your preference. Also, keep the columns you want lined up in the same tables so the browser lines them up for you
once you start to understand how to type tables, a 2 column form won't be hard.