I gave the height of all elements "23px", but as you can see at attached image there are some elements which are less than "23px".
<style type="text/css">
#login_main { display: inline; list-style-type:none; }
#login_main_ul { margin: 0px; padding: 0px; list-style: none; height=23px; float: right; vertical-align: middle;}
.login_main_item {border: 1px solid red; float: left;}
</style>
<form name="fhead" method="post" onsubmit="return fhead_submit(this);" autocomplete="off" style="margin:0px;">
<input type="hidden" name="url" value="<?=$outlogin_url?>">
<div id="login_main" style="width:100%; ">
<ul id="login_main_ul">
<li class="login_main_item" style="width:35px; height:23px;"><img src="<?=$outlogin_skin_path?>/img/login_id.gif" width="35" height="23"></li>
<li class="login_main_item" style="width:106px; height:23px;" colspan="2" align="center"><input name="mb_id" type="text" class=ed size="12" maxlength="20" required itemname="ID" value='ID' onMouseOver='chkReset(this.form);' onFocus='chkReset(this.form);'></li>
<li class="login_main_item" width="35" height="23"><img src="<?=$outlogin_skin_path?>/img/login_pw.gif" width="35" height="23"></li>
<li class="login_main_item" id=pw1 width="106" height="23" colspan="2" align="center"><input type="text" class=ed size="12" maxlength="20" required itemname="PassWord" value='PassWord' onMouseOver='chkReset(this.form);' onfocus='chkReset(this.form);'></li>
<li class="login_main_item" id=pw2 style='display:none;' width="106" height="23" colspan="2" align="center"><input name="mb_password" id="outlogin_mb_password" type="password" class=ed size="12" maxlength="20" itemname="PassWord" onMouseOver='chkReset(this.form);' onfocus='chkReset(this.form);' onKeyPress="check_capslock(event, 'outlogin_mb_password');"></li>
<li class="login_main_item" width="24" height="23" rowspan="2" align="center"><input type="image" src="<?=$outlogin_skin_path?>/img/login_button.gif" width="24" height="23"></li>
<li class="login_main_item" ><input type="checkbox" name="auto_login" value="1" onclick="if (this.checked) { if (confirm('auto login?')) { this.checked = true; } else { this.checked = false; } }"></li>
<li class="login_main_item" style="padding-left:5px;"><img src="<?=$outlogin_skin_path?>/img/login_auto.gif" width="35" height="23"></li>
<li class="login_main_item" style=" padding:0 0 0 2px;">
<!-- <img src="<?=$outlogin_skin_path?>/img/login_pw_find_button.gif" width="90" height="23" border="0"> -->
<img src="<?=$outlogin_skin_path?>/img/login_pw_find_button.gif" width="90" height="23" border="0">
</li>
<li class="login_main_item" style=" padding:0 0 0 2px;">
<img src="<?=$outlogin_skin_path?>/img/login_join_button.gif" width="69" height="23" border="0">
</li>
</ul>
</div>
</form>
image link - http://i.imgur.com/YJxBH.jpg
Please let me know what's wrong.
Thanks in advance.
Try height: 23px; instead of height=23px;
Also note that in case of elements having borders, that is calculated as well.
Update:
You may also want to change #login_main_ul to #login_main_ul li
#login_main {
display: inline;
list-style-type:none;
}
#login_main_ul li {
margin: 0px;
padding: 0px;
list-style: none;
height:23px;
float: right;
vertical-align: middle;
}
.login_main_item {
border: 1px solid red;
float: left;
}
In some you are using style="height:23px" and in others height="23". Try switching them all to use style
Remove the width and height attributes from the markup and add them in the css only.
Also inside css you should use ':' and not '='
Related
I'd like something like the JQuery Mobile Flip Toggle Switch, but just that, then I don't want to load all the JQuery Mobile library into my project.
Do you know how to do a nice CSS toggle buttons (more of 2 buttons) like these? I didn't find anything.
Thanks in advance!
PS: I don't care about compability with IE.
Did something quickly. Hope it will help you.
ul.tab {
list-style-type:none;
margin: 0;
padding:0;
border-radius: 5px;
}
ul.tab li {
float: left;
padding: 0;
}
ul.tab li label {
background: white;
padding: 6px;
border: 1px solid #ccc;
display: inline-block;
}
ul.tab li input[type="radio"] {
opacity: 0;
width:1px;
height:1px;
}
ul.tab li input[type="radio"]:checked ~ label {
background: red;
color: white;
}
<ul class="tab">
<li>
<input id="tab1" checked="checked" type="radio" name="tab" />
<label for="tab1">Basic</label>
</li>
<li>
<input id="tab2" type="radio" name="tab" />
<label for="tab2">Options</label>
</li>
<li>
<input id="tab3" type="radio" name="tab" />
<label for="tab3">Methods</label>
</li>
<li>
<input id="tab4" type="radio" name="tab" />
<label for="tab4">Events</label>
</li>
</ul>
I cant remove the extra padding above and below the textarea in google chrome
https://jsfiddle.net/y4fe39mr/1/
<td rowspan="3" class="biginputcell">
<textarea class="biginput" type="textarea" name="notes" id="notes" value=""></textarea>
</td>
I cannot figure out where the extra 15px padding is comming from in chrome.
.biginput{
width:230px;
height:150px;
font-size:0px;
font-family:sans-serif;
margin:0;
padding:0;
border:0px;
resize: none;
display: block
}
.biginputcell{
background-color:blue;
vertical-align:middle;
height:160px;
}
I have accepted the answer pointing out the issue with rowspan because it was the direct fix to the issue.
However as one of the answers pointed out divs are the better way to make my form, I will be changing the form to div tags rather than an overly complicated table.
The problem is that your column is middle aligned. If you align your textarea to the top, this won't happen.
I personally think there are too many unnecessary classes in your code. You should consider simplifying it. Also, I wouldn't recommend using table for structuring your forms. It can get quite confusing.
Here a suggestion for you.
*{
margin:0;
padding:0;
border: 0;
font-family:sans-serif;
}
.form {
display: table;
padding: 10px;
background-color: blue;
}
.column {
display: table-cell;
vertical-align: top;
}
.column + .column {
padding-left: 10px;
}
.form-group {
display: table;
}
.form-group > * {
display: table-cell;
}
.form-group + .form-group {
margin-top: 10px;
}
.label {
color: white;
font-size:15px;
min-width: 60px;
line-height: 30px;
vertical-align: middle;
text-align: right;
padding-right: 10px;
}
.input{
width:230px;
height:30px;
resize: none;
}
.input.small {
width: 90px;
}
.input.big {
height: 150px;
}
.button{
font-size:15px;
height:90px;
width:90px;
}
<form action="edit.php" method="POST" class="form">
<div class="column">
<div class="form-group">
<label class="label" for="time">Time:</label>
<input class="input" type="text" name="time" id="time" value="" />
</div>
<div class="form-group">
<label class="label" for="events">Event:</label>
<input class="input" type="text" name="events" id="events" value=""/>
</div>
<div class="form-group">
<label class="label" for="notes">Notes:</label>
<textarea class="input big" type="textarea" name="notes" id="notes" value=""></textarea>
</div>
</div>
<div class="column">
<div class="form-group">
<select class="input small" id="preset" onchange="fillpreset(value)">
<option value="0">PRESET</option>
<option value="1">Pre Service</option>
<option value="2">Worship</option>
<option value="3">MC Bridge</option>
<option value="4">Message AM</option>
<option value="5">Message PM</option>
</select>
</div>
<div class="form-group">
<input class="button" type="submit" name="task" value="Go" />
</div>
<div class="form-group">
<input class="button" type="submit" name="task" value="Clear" />
</div>
</div>
Change the rowspan=3 to rowspan=4 in your markup for the elements with classes biglabelcell and biglabelinput
check the following code snippet
*{
margin:0;
padding:0;
}
textarea {
overflow: hidden;
}
.edittable{
height:240px;
width:400px;
border-collapse:collapse;
overflow:hidden;
table-layout: fixed;
}
.labelcell{
width:60px;
height:40px;
font-family:sans-serif;
background-color:blue;
}
.label{
width:50px;
height:30px;
font-size:20px;
font-family:sans-serif;
}
.biglabel{
width:50px;
font-size:20px;
font-family:sans-serif;
}
.biglabelcell{
background-color:blue;
}
.inputcell{
width:240px;
background-color:blue;
}
.input{
width:230px;
height:30px;
font-size:15px;
font-family:sans-serif;
margin:0;
padding:0;
border:0px;
}
.biginput{
width:230px;
height:150px;
font-size:0px;
font-family:sans-serif;
margin:0;
padding:0;
border:0px;
resize: none;
display: block
}
.biginputcell{
background-color:blue;
vertical-align:middle;
height:160px;
}
.selectcell{
width:100px;
height:40px;
font-size:15px;
font-family:sans-serif;
background-color:blue;
}
.select{
width:90px;
height:30px;
border:0px;
}
.buttoncell{
height:100px;
width:100px;
background-color:blue;
}
.button{
height:90px;
width:90px;
border:0px;
}
<form action="edit.php" method="POST">
<table class="edittable">
<tr>
<td class="labelcell">
<label class="label" for="time">Time:</label>
</td>
<td class="inputcell">
<input class="input" type="text" name="time" id="time" value="" />
</td>
<td class="selectcell">
<select class="select" id="preset" onchange="fillpreset(value)">
<option value="0">PRESET</option>
<option value="1">Pre Service</option>
<option value="2">Worship</option>
<option value="3">MC Bridge</option>
<option value="4">Message AM</option>
<option value="5">Message PM</option>
</select>
</td>
</tr>
<tr>
<td class="labelcell">
<label class="label" for="events">Event:</label>
</td>
<td class="inputcell">
<input class="input" type="text" name="events" id="events" value=""/>
</td>
<td rowspan="2" class="buttoncell">
<input class="button" type="submit" name="task" value="Go" />
</td>
</tr>
<tr>
<td rowspan="4" class="biglabelcell">
<label class="biglabel" for="notes">Notes:</label>
</td>
<td rowspan="4" class="biginputcell">
<textarea class="biginput" type="textarea" name="notes" id="notes" value=""></textarea>
</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2" class="buttoncell">
<input class="button" type="submit" name="task" value="Clear" />
</td>
</tr>
Hope this helps. If not can you please explain how the page should look like a snapshot would be helpful
I've been having quite a few issues with dynamic div tags that take into account static div tags. Here's the 2 styles I'm currently using:
Dynamic Div tag:
div.Display {
width: 95%;
color: #333333;
margin-left: 360px;
background-color: #333333;
height: 100%;
margin-right: 0px;
float: left;
}
Static Div tag:
div.LoginBox {
box-shadow: 0px 0px 3px 0px #000000;
width: 350px;
height: 350px;
background-color: #F0F0F0;
border: 1px solid #DADADA;
clear: none;
float: left;
color: #000000;
margin-left: 0px;
}
The issue I'm having is that the dynamic div tag won't size properly. It's taking into account the margin left (360px), but it's also defaulting to the bottom of the LoginBox div tag (so it's like it's taking a top margin of 350px). Here's the actual application of the Div tag: http://ordwurkz.com/
And the HTML:
<body onload="FP_preloadImgs(/*url*/'images/hover/minimize.png',/*url*/'images/click/minimize.png')">
<div class="Page" id="Page">
<div class="LoginContainer" id="LoginContainer">
<div id="divLoginTitleBar" class="TitleBar">
Login
<div id="divTitleButtonBox" class="TitleButtonBox">
<img id="LoginMinimize" alt="Button Text" onmousedown="FP_swapImg(1,0,/*id*/'LoginMinimize',/*url*/'images/click/minimize.png')" onmouseout="FP_swapImg(0,0,/*id*/'LoginMinimize',/*url*/'images/minimize.png')" onmouseover="FP_swapImg(1,0,/*id*/'LoginMinimize',/*url*/'images/hover/minimize.png')" onmouseup="FP_swapImg(0,0,/*id*/'LoginMinimize',/*url*/'images/hover/minimize.png')" src="images\minimize.png"/><img id="LoginClose" alt="Button Text" onmousedown="FP_swapImg(1,0,/*id*/'LoginClose',/*url*/'images/click/close.png')" onmouseout="FP_swapImg(0,0,/*id*/'LoginClose',/*url*/'images/close.png')" onmouseover="FP_swapImg(1,0,/*id*/'LoginClose',/*url*/'images/hover/close.png')" onmouseup="FP_swapImg(0,0,/*id*/'LoginClose',/*url*/'images/hover/close.png')" src="images\close.png"/></div>
</div>
<div id="divLoginBox" class="LoginBox">
<div id="divLoginContent" class="LoginContent">
<img alt="System Image" src="images/loginsplash.png" />
<form method="post" action="processor\login_processor.do" id="frmLogin">
<table id="tblLoginContent" class="LoginContent">
<tr>
<td>Username:</td>
<td>
<input maxlength="50" name="txtUsrName" size="20" type="text" /></td>
</tr>
<tr>
<td>Password:</td>
<td>
<input maxlength="24" name="txtPassword" size="20" type="password" /></td>
</tr>
<tr>
<td><input name="btnLogin" type="submit" value="Login" /></td>
<td><input name="btnReset" type="reset" value="Reset" /></td>
</tr>
</table>
</form>
</div>
<div class="PlatformVersion">V1.0.0.0</div>
</div>
</div>
<div class="Display"></div>
</div>
<div class="Footer">Contact Us | Terms of Service</div>
</body>
Is there any chance you could put your .LoginBox inside of your .Display, then remove the margin-left on .Display so that .LoginBox just floats to the left of the content in .Display?? Hard to really say without seeing your HTML.
I would like to create a question row like this http://imageshack.us/photo/my-images/200/questionh.png/
At this time, my html source is :
<p class="questionrow">
<span class="question">question label</span>
<span class="reponses">
<input type='radio' class="radiocontrol"/><label class="radioanswer">Oui</label>
<input type='radio' class="radiocontrol"/><label class="radioanswer">Non</label>
</span>
</p>
(but i can change it)
ths css is :
.questionrow
{
width:1000px;
background-color: #EDF2BE;
}
.question
{
width: 300px;
padding-left: 30px;
padding-right: 30px;
display: inline-block;
}
.reponses
{
width: 600px;
display: inline-block;
}
.radiocontrol {
border: 1px solid #006;
background: #ffc;
}
I'd like to have 2 effects :
I would like to put the label outside, on top of the colored line. I would like to have the label on the same column of the radio button.
I would like to draw a vertical line (but I imagine it will be easy if there is a solution for the previous)
Does someone has some idea about that ?
Regards
Here is a solution that closely resembles your sample image...
Demo: http://jsfiddle.net/Zjnw9/1/
HTML...
<div class="row">
<p class="q">This is a question?</p>
<ul class="options">
<li><label>One</label><input type="radio" /></li>
<li><label>Two</label><input type="radio" /></li>
<li><label>Three</label><input type="radio" /></li>
<li><label>Four</label><input type="radio" /></li>
</ul>
</div>
CSS...
.row {
padding-bottom: 2em;
}
.q {
background-color: #EDF2BE;
margin-top: 1.2em;
padding: 0.5em;
}
.options {
float: right;
margin-top: -3.4em;
}
.options li {
float: left;
width: 100px;
text-align: center;
border-left: 1px solid #999;
padding: 0em 0.5em 0.7em;
}
.options label {
display: block;
font-size: 9pt;
padding-bottom: 0.8em;
}
Use tables instead? span is pretty meaningless for this. This is exactly what tables are meant for.
<table>
<tr>
<th></th>
<th><label for="radio1">Label 1</label></th>
<th><label for="radio2">Label 2</label></th>
<th><label for="radio3">Label 3</label></th>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet.</td>
<td><input type="radio" name="group" id="radio1" /></td>
<td><input type="radio" name="group" id="radio2" /></td>
<td><input type="radio" name="group" id="radio3" /></td>
</tr>
</table>
Here is a CSS solution, without a table.
div {float:left;padding:0 1em; border-right:1px solid gray; height:50px;}
<div>
<p>question label</p>
</div>
<div>
<label>Oui</label><br />
<input type='radio'/>
</div>
<div>
<label>Non</label><br />
<input type='radio'/>
</div>
Works in FF and Chrome for me.
While converting a desktop application to a web app, I've run across my ignorance when attempting to implement a multi-column data entry form using CSS. I'm resolved to avoid using tables for this type of thing, and while I found a good reference to laying out a data entry form, I can find nothing that applies to multiple-column layouts like this one:
Can anyone point me in the right direction?
Example on jsFiddle
Here's a screen shot, please notice how I demonstrated the tab order with numbers:
Please note that RedFilter's answer has a different tab order, which I have demonstrated in the screenshot below:
(code below complete with ASP.NET validators)
CSS (cross browser friendly)
p
{
margin:1em 0;
}
label
{
float:left;
width:5em;
text-align:right;
margin-right:0.5em;
}
input[type="text"]
{
width: 10em;
}
.left-column, right-column
{
float:left;
}
.left-column
{
margin-right:1em;
}
.textarea-label
{
float:none;
}
textarea
{
height:5em;
width:35em;
}
HTML
<div class="left-column">
<p>
<label for="tbDepartment">Department:</label>
<asp:TextBox ID="tbDepartment" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valDepartment" TabIndex="-1" runat="server" ControlToValidate="tbDepartment"> *</asp:RequiredFieldValidator>
</p>
<p>
<label for="tbFund">Fund:</label>
<asp:TextBox ID="tbFund" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valFund" TabIndex="-1" runat="server" ControlToValidate="tbFund"> *</asp:RequiredFieldValidator>
</p>
<p>
<label for="tbProgram">Program:</label>
<asp:TextBox ID="tbProgram" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valProgram" TabIndex="-1" runat="server" ControlToValidate="tbProgram"> *</asp:RequiredFieldValidator>
</p>
</div>
<div class="right-column">
<p>
<label for="tbProject">Project:</label>
<asp:TextBox ID="tbProject" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valProject" TabIndex="-1" runat="server" ControlToValidate="tbProject"> *</asp:RequiredFieldValidator>
</p>
<p>
<label for="tbSpeedKey">Speed Key:</label>
<asp:TextBox ID="tbSpeedKey" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valSpeedKey" TabIndex="-1" runat="server" ControlToValidate="tbSpeedKey"> *</asp:RequiredFieldValidator>
</p>
<p>
<label for="tbAward">Award:</label>
<asp:TextBox ID="tbAward" runat="server" MaxLength="255" />
<asp:RequiredFieldValidator ID="valAward" TabIndex="-1" runat="server" ControlToValidate="tbAward"> *</asp:RequiredFieldValidator>
</p>
</div>
<div>
<p>
<label class="textarea-label" for="taProjectDesc">Project Description:</label>
</p>
<p>
<asp:TextBox ID="taProjectDesc" runat="server" TextMode="MultiLine" />
<asp:RequiredFieldValidator ID="valProjectDesc" TabIndex="-1" runat="server" ControlToValidate="taProjectDesc"> *</asp:RequiredFieldValidator>
<p>
</div>
There are many ways to do this - I have given you a very stripped-down solution below. There are a number of tweaks you need to do to make this cross-browser compliant, improve spacing, etc., but this should give you the basic idea as to how you can lay the elements out:
<html>
<head>
<style>
body {
font-family:arial;
font-size: 0.8em;
}
div.form p {
clear: both;
}
div.form label {
float: left;
width: 10em;
}
div.form input[type="text"] {
float: left;
width: 16em;
font-family:arial;
font-size: 1.0em;
}
div.form textarea {
width: 52em;
font-family:arial;
font-size: 1.0em;
}
</style>
</head>
<body>
<div class="form">
<p>
<label>Department:</label>
<input type=text>
<label>Project:</label>
<input type=text id=Project name=Project>
</p>
<p>
<label>Fund:</label>
<input type=text id=FundID name=FundID>
<label>SpeedKey:</label>
<input type=text id=SpeedKey name=SpeedKey>
</p>
<p>
<label>Program:</label>
<input type=text id=Program name=Program>
<label>Award:</label>
<input type=text id=Award name=Award>
</p>
<p>
<label>Project Description:</label>
</p>
<p>
<textarea id=ProjectDescription name=ProjectDescription></textarea>
</p>
</div>
</body>
</html>
Much the same as the previous answers, I offer you:
CSS:
fieldset {
clear: both;
padding: 0.4em;
border: 1px solid #000;
width: 80%;
min-width: 600px;
margin: 1em auto;
overflow: hidden;
}
ul {
width: 48%;
border: 1px solid #ccc;
margin: 0.5em;
}
ul:nth-child(odd) {
float: right;
}
label {
display: inline-block;
width: 30%;
text-align: right;
}
html:
<fieldset>
<ul>
<li><label for="fieldOne">Field One:</label> <input type="text" id="fieldOne" name="fieldOne" /></li>
<li><label for="fieldTwo">Field Two:</label> <input type="text" id="fieldTwo" name="fieldTwo" /></li>
</ul>
<ul>
<li><label for="fieldThree">Field Three:</label> <input type="text" id="fieldThree" name="fieldThree" /></li>
<li><label for="fieldFour">Field Four:</label> <input type="text" id="fieldFour" name="fieldFour" /></li>
</ul>
</fieldset>
<fieldset>
<input type="submit" value="Submit" />
</fieldset>
</form>
Demo at: http://www.davidrhysthomas.co.uk/so/formCols.html
This solution does use CSS3 (the nth-child(odd)), which limits its cross-browser friendliness (though works in Opera, Chrome, Safari and Firefox on Ubuntu 10.04), so for IE-friendliness you'd have to explicitly add a class name to whichever column(s) you wanted to float: right.