Forum Moderators: not2easy
I am trying to come up with some form markup/css that will achieve the following:
allow the positioning of the form inputs beside their prompt AND (hopefully using a single selector difference but same markup) allow the positioning of the the form inputs below the prompt.. a la
question text : check1 check2 check3
question text
check1
check2
check3
in the 1st the width of the total (prompt + checks/radios/selects) would centre nicely
in the 2nd the question text would center and the checks/radios would also centre, but left align nicely whilst retaining their centeredness
I got close a while ago, again with Suzy's help I think, but have realised that its not doing quite what I need
tbh not even sure this is reliably possible, wondered if anyone had ever come across anything like this?
had previously got to a fairly good spot but the markup was quite different, would be nice to keep with the same for both
had previously achieved the centering nicely with tables (agg) clearly dont want to go down that route unless I have to, but maybe im just making life hard on myself... what follows is the above/below type setup
td.c{
text-align:center;
vertical-align:top;
}
td.l{
width:40%;
text-align:right;
}
td.r{
width:40%;
text-align:left;
}
td.c table td{
vertical-align:top;
}
and styling the checkboxes/radios like this
p{
font-weight: bold;
clear: both;
margin-bottom: 0.5em;
}
p.option
{
font-weight: normal;
white-space: nowrap;
text-align: left;
margin-top: 5px;
}
<td class="c">
<p class="option">
<input type="radio" name="radio1" id = "radio_1" value="1" />
<label for="radio_1">option 5555555 5555555 5555555 555555 555555</label>
</p>
<p class="option">
<input type="radio" name="radio2" id = "radio_2" value="2" />
<label for="radio_2">option 444444444444444444444444444</label>
</p>
.... etc
I'm losing track now, but maybe ignore the 2nd half of this and just look at the top bit :)
cheers
nat
however, still stumped a bit. would be nice to allow the width of the .vert .a block to be controlled by the content - setting whitespace:no-wrap or something (what happens at the moment is the overflow goes out of the box, and none of the other options are any better i.e. scrolling etc), but I am having to use the margin on either side of that for it to be centred. if anyone has a solution to this would much appreciate a heads up
thanks
nat
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page</title>
<style type="text/css">
body, html{
margin:0;
padding:0;
font-size:100%;
}
div.vert{
clear:both;
margin-top:2em;
}
div.vert .q{
background-color:pink;
display:block;
margin:1em 20%;
text-align:center;
}
div.vert .a{
background-color:green;
display:block;
margin:1em 40%;
}
div.vert .a select{
margin:0px auto;
display:block;
}
div.horiz{
clear:both;
margin:2em 20%;
}
div.horiz .q{
float:left;
width:50%;
background-color:purple;
display:block;
text-align:right;
}
div.horiz .a{
float:right;
width:50%;
background-color:orange;
display:block;
}
label{
display:block;
padding-left:1.5em;
}
input{
float:left;
}
</style>
</head>
<html>
<body>
<div class="vert"><!--radio-->
<div class="q">
<p>this is the question text this is the question text this is the question text </p>
</div>
<div class="a">
<p>
<input type="radio" name="r" value="1" id="r1" />
<label for="r1">this is the option this is the option this is the option </label>
</p>
<p>
<input type="radio" name="r" value="2" id="r2" />
<label for="r2">this is the option</label>
</p>
<p>
<input type="radio" name="r" value="3" id="r3" />
<label for="r3">this is the option</label>
</p>
</div>
</div>
<div class="horiz"><!--radio-->
<div class="q">
<p>this is the question text this is the question text this is the question text </p>
</div>
<div class="a">
<p>
<input type="radio" name="r" value="1" id="r4" />
<label for="r4">this is the option this is the option this is the option </label>
</p>
<p>
<input type="radio" name="r" value="2" id="r5" />
<label for="r5">this is the option</label>
</p>
<p>
<input type="radio" name="r" value="3" id="r6" />
<label for="r6">this is the option</label>
</p>
</div>
</div>
<div class="vert"><!--checkbox-->
<div class="q">
<p>this is the question text this is the question text this is the question text </p>
</div>
<div class="a">
<p>
<input type="checkbox" value="1" id="c1" />
<label for="c1">this is the option this is the option this is the option </label>
</p>
<p>
<input type="checkbox" value="2" id="c2" />
<label for="c2">this is the option</label>
</p>
<p>
<input type="checkbox" value="3" id="c3" />
<label for="c3">this is the option</label>
</p>
</div>
</div>
<div class="horiz"><!--checkbox-->
<div class="q">
<p>this is the question text this is the question text this is the question text </p>
</div>
<div class="a">
<p>
<input type="checkbox" value="1" id="c4" />
<label for="c4">this is the option this is the option this is the option </label>
</p>
<p>
<input type="checkbox" value="2" id="c5" />
<label for="c5">this is the option</label>
</p>
<p>
<input type="checkbox" value="3" id="c6" />
<label for="c6">this is the option</label>
</p>
</div>
</div>
<div class="vert"><!--textbox-->
<div class="q">
<p>this is the question text this is the question text this is the question text </p>
</div>
<div class="a">
<p>
<input type="text" name="t" value="" id="t1" />
</p>
</div>
</div>
<div class="horiz"><!--textbox-->
<div class="q">
<p>this is the question text this is the question text this is the question text </p>
</div>
<div class="a">
<p>
<input type="text" name="t" value="" id="t1" />
</p>
</div>
</div>
<div class="vert"><!--dropdown-->
<div class="q">
<p>this is the question text this is the question text this is the question text </p>
</div>
<div class="a">
<p>
<select name="s" value="" id="s1">
<option id="o1" value="o1">option text</option>
<option id="o2" value="o2">option text option text </option>
<option id="o3" value="o3">option text option text option text </option>
<option id="o4" value="o4">option text</option>
<option id="o5" value="o5">option text</option>
</select>
</p>
</div>
</div>
<div class="horiz"><!--dropdown-->
<div class="q">
<p>this is the question text this is the question text this is the question text </p>
</div>
<div class="a">
<p>
<select name="s" value="" id="s1">
<option id="o6" value="o1">option text</option>
<option id="o7" value="o2">option text option text </option>
<option id="o8" value="o3">option text option text option text </option>
<option id="o9" value="o4">option text</option>
<option id="o10" value="o5">option text</option>
</select>
</p>
</div>
</div>
</body>
</html>
[edited by: swa66 at 12:26 pm (utc) on Nov. 4, 2008]
[edit reason] smiley removal [/edit]
<div class="q">
<p>text</p>
</div>
You could do that easily as
<p class="q">text</p>
Also I think an id only is allowed once in each html file (t1).
the reason for the extra div was for allowing more flexible positioning with aligning things centrally etc
and yes the ids may well have been duplicated, alot of copying and pasting there :)
am still stumped by the comment i put in the second posting any ideas?
Here is my solution. To place the content at the center. Place the Main div and set the margin left and right properties as "auto". Now you can place the content at the center.
ex:
.MainDiv{
width:950px;
/*long code */
margin-left:auto;
margin-right:auto;
/* short code
margin: 0px auto;*/
}
thanks for that, but again that method requires a width to be set on the element that is centered, and i want that width to be controlled by the length of the options...
so in a checkboxlist would be centered on the longest checkbox label...
had achieved this before by using tables, having 3 cells, the left and the right overspecified in percent, and the center cell with no-wrap on worked quite well, then on elements that were way too long, take the no-wrap off to set the width on the next longest etc...
was hoping to avoid using tables if possible
S, you need to set the width for the main div. But it will be good if you set some width for the main div.
I would like to know for what purpose you need the width to be controlled by the length of the option. Let me know the exact requirement, then i can give suggestion.
OK I shall try to explain. basically I have something that kicks out questions.
you are able to add question prompts and answer options in all types of HTML input, so checkboxes/radiobuttons/select lists...etc
now previously we had something that allowed the 'user' to change the way the questions were formatted via a WYSIWYG. this allowed the user to set the % across the screen/form of the answer options (via a 2 cell table layout and setting that percentage on the LH cell), so it would 'look nice'. so for instance, if you have a checkbox question with 5 options, a la:
this is the prompt for the question
this is an answer
this is another answer
this is a particularly loooooooooooooong answer
etc...
etc.......
so using the WYSIWYG you would see that the answer would need to 'start' say 30% from the LHS of the page to look centred.
so the prompt (when the answer options are sitting below the question) wants to be centred on the page
the answer options want to render below, left aligned so that they are centred on the longest options width - this should give the best looking layout for these questions
i am trying to come up with some markup and CSS that would allow the user to add these 'questions' without having to worry about fiddling with percentages, to line things up nicely
as i mentioned, previously i had achieved this by using a table structure as follows
<table>
<tbody>
<tr>
<td colspan="3"><p style="text-align:center">this is the prompt</p></td>
</tr>
<tr>
<td width="45% - set by styles actually"> </td>
<td>answer option here<br />answer option2 here<br />etc.....</td>
<td width="45%... as other cell"> </td>
</tr>
</tbody>
</table>
by overspecifying the width of the side table cells, and setting the answer options to left align, and no-wrap, the answer options render vertically, all nicely left aligned, centered on their longest option.
so problem is to achieve this without tables. but maybe more importantly to allow the above and below options using the same markup, maybe selecting the differences by placing the above below layout in a div with a class of vert and the side by side layout in a div with a class of horiz, thus simply changing the rendering without really chaging the markup (allows this to be done dynamically with JS etc)
also am, as may have mentioned trying to get the markup to allow (with different styles) to render the questions like the above, but also allow this sort of layout
<table>
<tr>
<td width="50%">this is the question prompt</td>
<td><span>answer option 1</span><span>answer option 2</span><span>answer option 3</span></td>
</tr>
</table>
sorry this is a monster post, hope it makes sense, as always any help much appreciated
nat
text-align:center
