stylesheet and 2 columns of checkboxes

aliashippysmom · Sep 24, 2004

Hi! I've decided to ditch tables for layout and go exclusively to stylesheets. I am modifying a form I currently have on the site to use stylesheets instead of tables. I retrieve the values for the checkboxes from a database and then loop through and display them, like this:

Code:

<cfoutput query="myquery">
<cfif myquery.CurrentRow MOD 2 AND myquery.CurrentRow NEQ 1>
  </tr>
  <tr>
</cfif>  
<td><input type="checkbox" name="element" value="#element_name#">#element_name#</td>
</cfoutput>

aliashippysmom · Sep 24, 2004

Sorry, I hit the wrong button:

This code renders a two column checkboxes that are lined up...any way to do this using stylesheets. I've tried some things to no avail. Thanks!!

cLFlaVA · Sep 24, 2004

And your question is?

*cLFlaVA
----------------------------
Breaking the habit...

cLFlaVA · Sep 24, 2004

You'd need to set up two divs. Because you would now lose the following format:

[tt]
CB1 CB2
CB3 CB4
CB5 CB6
CB7 CB8
[/tt]

it would show up as follows:

[tt]
CB1 CB5
CB2 CB6
CB3 CB7
CB4 CB8
[/tt]

You'd have to build two [tt]<div>[/tt] strings within ColdFusion. One would contain something like this:

"<div id="cblist1">
<input type="checkbox" name="cb1">
<input type="checkbox" name="cb3">
<input type="checkbox" name="cb5">
<input type="checkbox" name="cb7">
</div>"

And the other would look just like that, but with even numbers. You'd build these while looping through the records, then, at the end, print them out to the browser.

*cLFlaVA
----------------------------
Breaking the habit...

aliashippysmom · Sep 24, 2004

Thanks, cLFlaVA:

I'm not exactly sure about this. Here's the stylesheet:

Code:

#leftcontent {
		position:static;
		left: 100px;
                top: 875px;
		leftmargin:10px;
		
	     }
#rightcontent {
	    	
		}

I've tried adjusting rightcontent many ways to no avail.
Here's what I have now:

Code:

 <cfset leftcolumn = "<div id=""leftcontent"">">
   <cfset rightcolumn = "<div id=""rightcontent"">">
<cfoutput query="get_committee_names">
   <cfif get_committee_names.CurrentRow MOD 2 AND get_committee_names.CurrentRow NEQ 1>
<cfset leftcolumn = leftcolumn & "<input type=""checkbox"" name=""committees"" value=""#com_id#"">#com_name#<br>">
<cfelse>
<cfset rightcolumn = rightcolumn & "<input type=""checkbox"" name=""committees"" value=""#com_id#"">#com_name#<br>">
</cfif>

</cfoutput>
<cfset leftcolumn = leftcolumn & "</div>">
<cfset rightcolumn = rightcolumn & "</div>">
<cfoutput>#leftcolumn#&nbsp;&nbsp;&nbsp; #rightcolumn#</cfoutput>

Comes out as one big list. What I really want are the checkbox values aligned in two columns, aligned left.
Thanks!

cLFlaVA · Sep 24, 2004

Are you asking how to align two columns with CSS or are you asking how to build them with ColdFusion?

One question, I can help you with. The other will have to be posted in another forum.

*cLFlaVA
----------------------------
Breaking the habit...

cLFlaVA · Sep 24, 2004

Here's an example of side-by-side divs acting like table columns:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<style type="text/css">
body
{
	text-align: center;
}

#wrapper
{
	width: 600px;
	border: 2px solid gray;
	background-color: #99CCFF;
	margin-left: 0 auto;
	margin-right: 0 auto;
	text-align: left;
}

#left
{
	position: relative;
	float: left;
	width: 50%;
	margin-left: 15px;
}

#right
{
	position: relative;
	width: 50%;
	margin-left: 15px;
}
</style>
</HEAD>

<BODY>
<div id="wrapper">
<form name="the_form" action="index.html" method="post">
<div id="left">stuff in left</div>
<div id="right">stuff in right</div>
</form>
</div>
</BODY>
</HTML>

*cLFlaVA
----------------------------
Breaking the habit...

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

stylesheet and 2 columns of checkboxes

aliashippysmom

Programmer

aliashippysmom

Programmer

cLFlaVA

Programmer

cLFlaVA

Programmer

aliashippysmom

Programmer

cLFlaVA

Programmer

cLFlaVA

Programmer

Similar threads

Part and Inventory Search

Sponsor