Label position on Checkbox

[IPGuru]

This should be a simple task but I just dont seem to be able to find the answer

I have a row of check boxes with labels, currently the label a appears to the right of the check box
I want the label to appear on top of each check box whilst still displaying the check boxes in a horizontal row.

<form>
          <input type='checkbox' name='Mode' id='0' value='0'>
          <label from='0'>S</label>
          <input type='checkbox' name='Mode' id='1' value='1'>
          <label from='1'>M</label>
          <input type='checkbox' name='Mode' id='2' value='2'>
          <label from='2'>T</label>
</form>

I have tries setting the left, right, bottom & top attributes of the label
I have tried setting the label to display block (all check boxes then display vertically)
I have tied setting possition to Fixed, Absolute & relative with varying degrees of failure

Can anyone steer  me in the right direction?

A Maintenance contract is essential, not a Luxury.
Do things on the cheap & it will cost you dear

 

[guitardave78]

Try this

<style>
	.checkboxes label{
		display:block;
		width:20px;
		text-align:center;
	}
	.checkboxes .chkdiv{
		width:20px;
		float:left;
		margin-right:5px;
		text-align:center;
	}
</style>

<form class="checkboxes">
	<div class="chkdiv">
		<label for='0'>S</label>
		<input type='checkbox' name='Mode' id='0' value='0'>
	</div>
	<div class="chkdiv">
		<label for='1'>M</label>
		<input type='checkbox' name='Mode' id='1' value='1'>
	</div>
	<div class="chkdiv">
		<label for='2'>T</label>
		<input type='checkbox' name='Mode' id='2' value='2'>
	</div>

</form>

}...the bane of my life!

http://www.gamified.uk

http://www.fuzzyd.co.uk

 

[IPGuru]

Close
but I may also want a some text inputs before the checkboxes & preferably centred on the display

it gives me something to experiment with though so thanks

A Maintenance contract is essential, not a Luxury.
Do things on the cheap & it will cost you dear

 

[guitardave78]

All doable, just have to play with the chkdiv width

<style>
	.checkboxes label{
		display:block;
		width:100%;
		text-align:center;
	}
	.checkboxes .chkdiv{
		width:140px;
		float:left;
		margin-right:5px;
		text-align:center;
	}
	

	
</style>

<form class="checkboxes">
	<div class="chkdiv">
		<label for='0'>S</label>
		<input type="text" /> <input type='checkbox' name='Mode' id='0' value='0'>
	</div>
	<div class="chkdiv">
		<label for='1'>M</label>
		<input type="text" /> <input type='checkbox' name='Mode' id='1' value='1'>
	</div>
	<div class="chkdiv">
		<label for='2'>T</label>
		<input type="text" /> <input type='checkbox' name='Mode' id='2' value='2'>
	</div>

</form>

}...the bane of my life!

http://www.gamified.uk

http://www.fuzzyd.co.uk

 

[guitardave78]

To centre on the screen play with

<style>

.wrapper{
	width:100%;
	
}
.checkboxes{
	width:700px;
	margin:0 auto;
}
	.checkboxes label{
		display:block;
		width:100%;
		text-align:center;
	}
	.checkboxes .chkdiv{
		width:140px;
		float:left;
		margin-right:5px;
		text-align:center;
	}
	

	
</style>
<div class="wrapper">
<form class="checkboxes">
	<div class="chkdiv">
		<label for='0'>S</label>
		<input type="text" /> <input type='checkbox' name='Mode' id='0' value='0'>
	</div>
	<div class="chkdiv">
		<label for='1'>M</label>
		<input type="text" /> <input type='checkbox' name='Mode' id='1' value='1'>
	</div>
	<div class="chkdiv">
		<label for='2'>T</label>
		<input type="text" /> <input type='checkbox' name='Mode' id='2' value='2'>
	</div>

</form>
</div>

You could always use tables


}...the bane of my life!

http://www.gamified.uk

http://www.fuzzyd.co.uk

 

[IPGuru]

You could always use tables
[quote}

I think that although that would be cheating it is probably the simplest way
it is for an internal app so style is secondary to function

A Maintenance contract is essential, not a Luxury.
Do things on the cheap & it will cost you dear