INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Label position on Checkbox

Label position on Checkbox

(OP)
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.

[code]
<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

RE: Label position on Checkbox

Try this

CODE --> html

<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

RE: Label position on Checkbox

(OP)
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

RE: Label position on Checkbox

All doable, just have to play with the chkdiv width

CODE

<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

RE: Label position on Checkbox

To centre on the screen play with

CODE

<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 :D

}...the bane of my life!
http://www.gamified.uk
http://www.fuzzyd.co.uk

RE: Label position on Checkbox

(OP)
[quote]
You could always use tables :D
[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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close