?
Solved

CSS help with group of checkboxes

Posted on 2011-02-21
5
Medium Priority
?
604 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
  • 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 2000 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

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month5 days, 18 hours left to enroll

589 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