Solved

CSS help with group of checkboxes

Posted on 2011-02-21
5
573 Views
Last Modified: 2012-05-11
layout
I am trying to layout part of a form like the image above.  I have tried various methods but
cannot get it quite right.  I would like to do it with css instead of a table if possible.

Any help would be appreciated.

Thanks  
0
Comment
Question by:Ross-C
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 16

Expert Comment

by:SSupreme
ID: 34948091
You can have a look at this example, but I strongly recommend to use table in this case.
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Running Profiles - Home Page -</title>
<style type="text/css">
input {margin:5px;}
</style>
</head>
<body>
<form>
<div style="width:80px; float:left;" >
<p style="font-size:15px; margin:20px 0 0;">Breakfast</p>
<p style="font-size:15px; margin:5px 0 0;">Teatime</p>
<p style="font-size:15px; margin:5px 0 0;">Full Day</p>
</div>
<div style="width:140px; float:left;" >
<p style="font-size:15px; margin:0px;">Mon Tue Wed Thu Fri</p>
<input type="checkbox" name="vehicle" value="Bike" /> 
<input type="checkbox" name="vehicle" value="Car" />
<input type="checkbox" name="vehicle" value="Bike" /> 
<input type="checkbox" name="vehicle" value="Car" />
<input type="checkbox" name="vehicle" value="Bike" /> 
<input type="checkbox" name="vehicle" value="Bike" /> 
<input type="checkbox" name="vehicle" value="Car" />
<input type="checkbox" name="vehicle" value="Bike" /> 
<input type="checkbox" name="vehicle" value="Car" />
<input type="checkbox" name="vehicle" value="Bike" />
<input type="checkbox" name="vehicle" value="Bike" /> 
<input type="checkbox" name="vehicle" value="Car" />
<input type="checkbox" name="vehicle" value="Bike" /> 
<input type="checkbox" name="vehicle" value="Car" />
<input type="checkbox" name="vehicle" value="Bike" /> 
</div> 
</form> 
</body>
</html>

Open in new window

0
 
LVL 12

Accepted Solution

by:
Chad Haney earned 500 total points
ID: 34953970
This should look how you want it.
<html>
<head>
<style type="text/css">
	p{
		margin:0px;
		padding:0px;
	}
	.form{
		border:1px solid #000000;
		clear:both;
		float:left;
	}
	.form>.header{
		margin-left:60px;
		float:left
		clear:both;
	}
	.form>.header>p{
		width:35px;
		float:left;
	}
	.form>.data, .form>.data>.row{
		clear:both;
	}
	.form>.data>.row>p{
		width:35px;
		float:left;
		text-align:center;
	}
	.form>.data>.row>.rowTitle{
		width:60px;
		text-align:left;
	}
</style>
<body>
	<div class="form">
		<div class="header">
			<p>Mon</p>
			<p>Tue</p>
			<p>Wed</p>
			<p>Thu</p>
			<p>Fri</p>
		</div>
		<div class="data">
			<div class="row">
				<p class="rowTitle">Breakfast</p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
			</div>
			<div class="row">
				<p class="rowTitle">Teatime</p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
			</div>
			<div class="row">
				<p class="rowTitle">Full Day</p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
				<p><input type="checkbox" /></p>
			</div>
		</div>
	</div>
</body>
</html>

Open in new window

0
 
LVL 11

Author Closing Comment

by:Ross-C
ID: 34957053
Works great i replaced the > characters for spaces in the style section think something must have gone wrong with the paste.

Many thanks
0
 
LVL 12

Expert Comment

by:Chad Haney
ID: 34957165
The > chars were there intentionally, but not necessary in this example.  Used for precision to indicate to only modify elements that are immediately followed as children.
0
 
LVL 11

Author Comment

by:Ross-C
ID: 34957255
Ah ok sorry I misunderstood, thanks
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
push Book Today button to right 10 100
CSS DIV Height in Percent 1 37
WordPress navigation menus: how to change color when clicked 10 42
How do I wrap text in dialog window 6 33
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question