Forum Moderators: not2easy
been a while since my last post, so happy new year.. and again for last and maybe the one before that :)
i am trying to work out if i can achieve the follwing.. the server side parsing stuff isnt the problem, just wondering if this can be reliably done as far as the CSS goes
generating nice centered form elements..
when you have multiple radio groups/ droppers/checkboxes on the page.. maybe like this..
for instace
this is input 1
looooooooooooooooooong option 1
even looooooooooooooooooooooooonger option 1
very long indeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeed option 1
input 2
opt21
opt22
opt23
both of those with the same style applied would not look quite right as the bottom one would sit over to one side all on its lonesome.. as the answer options need to be left aligned (while still centerd on the prompt/input/question whatever you want to call it).
anyhow this is the real question here :
when a page is generated, use a parsing routine to take the length (counting characters) of the longest option, and bung all options in a centered DIV, having the width (in em's) of the longest option (+ as small a bit as you can manage), text aligning the content of this containing div to the left...
this is an attempt to get rid of the tables in my current way of doing things..
which involved setting the widths by hand.. not ideal
like this..
<tr><td colspan="2" align="center">this is the prompt</td></tr>
<tr><td width="45%"> </td><td><label for="radio_1">option 1</label><input type="radio" value="1" id="radio_1" /></td></tr>
<tr><td width="45%"> </td><td><label for="radio_2">option 2</label><input type="radio" value="2" id="radio_2" /></td></tr>
i am aware that fonts may well have an affect on this, but am thinking mostly just user ones ovverriding from the browser
cant go monospaced
anyhow, hope this makes sense
any thoughts gratefully recieved
nat
what i was trying to say was this..
is there any way of centering form elements on the page, where you have multiple different elements - with different lengths of options i.e in radios, checkbox lists.. in a single, couple of CSS selectors or tbh, a number of them?
that will also left align the options in the center of the page .. no 50% padding/margin.. - i mean so the whole width of the option is centered.
best ive come up with so far is this...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
td,th{
border:1px solid #000;
}
p{
font-weight:bold;
}
p.option{
text-align:left;
font-weight:normal;
white-space: nowrap;
}
p.textbox{
font-weight:bold;
}
table{
width:100%;
margin:20px 0px;
}
td.c{
text-align:center;
margin:0px auto;
border:1px solid #000;
}
td.l{
width:40%;
}
td.r{
width:40%;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<th colspan="3"><p class="q">Here is the question text Here is the question text Here is the question text Here is the question text Here is the question text </p></th>
</tr>
<tr>
<td class="l">left</td>
<td class="c">
<p class="option">
<input type="radio" name="radio1" id = "radio_1" value="1" />
<label for="radio_1">option 1</label>
</p>
<p class="option">
<input type="radio" name="radio1" id = "radio_2" value="2" />
<label for="radio_2">option 2222</label>
</p>
<p class="option">
<input type="radio" name="radio1" id = "radio_3" value=3" />
<label for="radio_3">option 3 333 3333</label>
</p>
<p class="option">
<input type="radio" name="radio1" id = "radio_4" value="4" />
<label for="radio_4">option 44 444 4444444 444 4444</label>
</p>
<p class="option">
<input type="radio" name="radio1" id = "radio_5" value="5" />
<label for="radio_5">option 5555555 5555555 5555555 555555 555555</label>
</p>
</td>
<td class="r">right</td>
</tr>
</table>
<table>
<tr>
<th colspan="3"><p class="q">Here is the question text Here is the question text Here is the question text Here is the question text Here is the question text </p></th>
</tr>
<tr>
<td class="l">left</td>
<td class="c">
<p class="option">
<input type="checkbox" name="check1" id = "check_1" value="1" />
<label for="check_1">option 11111111111111111111 1111111111111111111111111</label>
</p>
<p class="option">
<input type="checkbox" name="check1" id = "check_2" value="2" />
<label for="check_2">option 2222</label>
</p>
<p class="option">
<input type="checkbox" name="check1" id = "check_3" value=3" />
<label for="check_3">option 3 333 3333</label>
</p>
<p class="option">
<input type="checkbox" name="check1" id = "check_4" value="4" />
<label for="check_4">option 44 444 4444444 444 4444</label>
</p>
<p class="option">
<input type="checkbox" name="check1" id = "check_5" value="5" />
<label for="check_5">option 5555555 5555555 5555555 555555 555555 5555555555555555 555555</label>
</p>
</td>
<td class="r">right</td>
</tr>
</table>
<table>
<tr>
<th colspan="3"><p class="q">Here is the question text Here is the question text Here is the question text Here is the question text Here is the question text </p></th>
</tr>
<tr>
<td class="l">left</td>
<td class="c">
<p>
<select name="select1" id="select1">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
<option value="6">option 6</option>
<option value="7">option 7</option>
<option value="8">option 8 option 8 option 8 option 8 option 8 </option></select>
</p>
</td>
<td class="r">right</td>
</tr>
</table>
<table>
<tr>
<td class="l">left</td>
<td><p class="option textbox"><label for="text1">this is a text box prompt this is a text box prompt this is a text box prompt </label></p></td>
<td class="c">
<input type="text" id="text1" />
</td>
<td class="r">right</td>
</tr>
</table>
</form>
</body>
</html>
but would rather use something with no tables if poss..
thanks
