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.
Related
How do I make the each block of this image act as a radio button?
<table class="table table-bordered">
<tbody>
<tr class="category-item">
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">IT Solutions</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Household</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Design & Multimedia</label>
</td>
</tr>
<tr class="category-item">
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Event & photography</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Sales & Marketing</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Engineering & Architecture</label>
</td>
</tr>
<tr class="category-item">
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Writing & Translation</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Finance & Accounting</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Legal</label>
</td>
</tr>
</tbody>
</table>
I've tried this but it only alows to select one table row as a radio button.
.category-item input{
display: none;
}
.category-item label{
cursor: pointer;
padding: 30px;
}
How to make each td act as a radio button the tr tag separates the block so all the elements are not radio button.
you must use unique id for inputs or dont use id and set input in label like this
<label><input type="radio" name="list" value="" /> Label Title</label>
Here is a CodePen, hope this helps.
The mistake you did that you are using the same id for all inputs and this is totally wrong, because ids are always unique which means that no more than one element will take the same id.
then how you are going to determine which radio is checked right now since you are hiding the radio?
For this you could use Pseudo Element :checked to style the checked radio, e.g. you could change the background color for the checked radio.
Here is a JSfiddle, hope this helps.
Say thanks to : zer00ne on My Post
/* Radio Buttons & Labels */
/* :checked & for='ID OF RADIO' */
.rad {
display: none
}
.lab {
border-radius: 9px;
border: 2px inset grey;
padding: 3px 5px;
font-size: 24px;
cursor: pointer;
margin: 20px 10px;
}
.lab::before {
content: 'WHITE';
}
.rad:checked+.lab {
background: red;
color: white;
}
.rad:checked+.lab::before {
content: '\a0\a0RED\a0\a0';
}
/* Anchor & Any Element */
/* href='#ID OF ELEMENT' & #ANY:target */
a {
display: inline-block;
margin: 0 5px;
color: yellow;
background: #000;
padding: 2px 4px;
}
a:first-of-type {
color: #ff4c4c
}
a:nth-of-type {
color: yellow
}
a:last-of-type {
color: lime
}
b {
display: block;
height: 48px;
width: 48px;
border-radius: 50%;
margin: 5px auto;
border: 3px outset grey;
background: rgba(0, 0, 0, .2)
}
#T1:target {
background: red;
}
#T2:target {
background: yellow
}
#T3:target {
background: green
}
<input id='R1' class='rad' name='rad' type='radio'>
<label id='L1' class='lab' for='R1'></label>
<input id='R2' class='rad' name='rad' type='radio'>
<label id='L2' class='lab' for='R2'></label>
<input id='R3' class='rad' name='rad' type='radio'>
<label id='L3' class='lab' for='R3'></label>
<hr>
<a href='#T1' target='_self'>STOP</a>
<a href='#T2' target='_self'>SLOW</a>
<a href='#T3' target='_self'>GO</a>
<b id='T1'> </b>
<b id='T2'> </b>
<b id='T3'> </b>
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 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 '='
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I Want some samples for step by step registrations like a wizard.
i want to use these samples and asp.net page.
Thanks.
You can easily create your own using jQuery - check out this demo
http://jsfiddle.net/nwJFs/
And here's the code
HTML
<div class="step step-1">
<div class="wrap">
<label for="name">Name</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Email</label>
<input id="email" type="text" />
</div>
<div class="wrap">
<label for="phone">Phone</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
<div class="step step-2">
<div class="wrap">
<label for="name">Mobile</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Address</label>
<textarea id="email"></textarea>
</div>
<div class="wrap">
<label for="phone">Phone</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
<div class="step step-3">
<div class="wrap">
<label for="name">Some</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Other</label>
<textarea id="email"></textarea>
</div>
<div class="wrap">
<label for="phone">Fields</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Submit</a>
</div>
CSS
body {
font-family: Trebuchet MS;
font-size: 12px;
}
.wrap {
clear: both;
padding: 8px 0;
}
.wrap label {
display: block;
float: left;
width: 150px;
padding: 4px;
line-height: 12px;
}
.wrap input,
.wrap textarea {
display: block;
font-size: 12px;
line-height: 12px;
float: left;
width: 200px;
border: 1px solid #888;
padding: 4px 8px;
}
.button {
background: #333;
color: #f2f2f2;
display: inline-block;
padding: 4px 8px;
text-decoration: none;
border: 1px solid #ccc;
}
.button:hover {
background: #888;
color: #000;
}
br.clear-last {
clear: both;
margin: 15px 0;
}
.step {
display: none;
}
.step-1 {
display: block;
}
jQuery
$(".next").click(function() {
//store parent
var parent = $(this).parent();
if(parent.next().length) {
parent.hide("slow").next().show("slow");
}
return false;
});
$(".prev").click(function() {
var parent = $(this).parent();
if(parent.prev().length) {
parent.hide("slow").prev().show("slow");
}
return false;
});
check out this one : http://thecodemine.org
having problems with chrome though...
Do you mean, something like this?
jQuery Form Builder
checkout these links for better wizard creation:
techlab-smart wizard: http://techlaboratory.net/smartwizard
https://github.com/techlab/SmartWizard