Opmaak CSS formulier

Door Red Crew op 30-10-2006 21:18

3.233 views

Bij het opmaken van een formulier haal ik allemaal genre's uit een database en zet ik ze in het formulier als checkboxes. Bij mijn tabellen plaatste ik ze in 3 rijen met onderstaande code
tabel voorbeeld


<?php
		echo '<table>'.PHP_EOL;
		$i = 0;
	
		$result = mysql_query( "SELECT id, genre FROM genres", $conn );
		while ( $data = mysql_fetch_array($result) ) {
			if ( $i == 0 )
				echo '<tr>'.PHP_EOL;
				echo '<td width="33%" valign="top">'.PHP_EOL;
				$genre = stripslashes($data['genre']);
				echo '<input type="checkbox" name="genre_id['.$data['id'].']" value="'.$data['id'].'" />&nbsp;'.PHP_EOL;
				echo $genre;
			
			echo '</td>'.PHP_EOL;
	
			if ( $i == 2 ) {
				echo '</tr>'.PHP_EOL;
				$i = 0;
			} else
				$i++;
		}
	
		if ( $i != 0 ) {
			while ( $i <= 2 ) {
				echo '<td width="33%"></td>'.PHP_EOL;
				$i++;
			}
			echo '</tr>'.PHP_EOL;
		}
		echo '</table>'.PHP_EOL;

Nu wil ik ze opmaken met CSS maar ik weet al niet hoe ik 1X genre's moet neer zetten aan de linkerkant (ik heb het voorlopig opgelost door er een legend rond te zetten). En ik wil ze ook in rijen van 3 gaat dit ook zonder tabellen ?
CSS voorbeeld
Hieronder post ik ook even de code zoals ik het nu heb.


<?php
	$result = mysql_query( "SELECT id, genre FROM genres", $conn );
		while ( $data = mysql_fetch_array($result) ) {
			$genre = stripslashes($data['genre']);
			echo '<p>'.PHP_EOL;
			echo '<input id="'.$data['id'].'" name="genre_id['.$data['id'].']" type="checkbox" value="'.$data['id'].'"'.PHP_EOL;
			echo '<label for="'.$data['id'].'">'.$genre.'</label>'.PHP_EOL;
			echo '</p>'.PHP_EOL;
		}

Iemand een idee ?

K i p

30-10-2006 21:25

Ik snap niet doen snap doen.

Red Crew

30-10-2006 21:28

maw ik wil dat er links 1 x Genre's : staat
en dat er rechts in rijen alle genre's checkboxes weergegeven worden. zoals in mijn voorbeeld met tabellen.
Alleen wil ik het nu in CSS ipv tabellen

Red Crew

30-10-2006 22:30

Het grote probleem is hoe krijg ik via CSS mijn checkboxes uitgelijnd in 3 rijen ?

Bo az

30-10-2006 22:39

Iets op die manier in 3 kolommen neer zetten lijkt me puur iets voor een tabel.

PHP Newbie

30-10-2006 22:46

dit is wat je zoekt denk ik

Jan Koehoorn

30-10-2006 23:07

RedCrew schreef op 30.10.2006 22:30
Het grote probleem is hoe krijg ik via CSS mijn checkboxes uitgelijnd in 3 rijen ?

Het gaat om semantiek hier. Een rijtje checkboxen is niet te vergelijken met een tabel, want dat is meer een verzameling gegevens met een x- en een y-as.

Welk element is het meest geschikt om een rijtje weer te geven? Een list. Als je drie kolommen wilt, maak dan drie <ul>'s. Geef ze allemaal een float: left en geef ze een width. Het eerste element dat onder je drie <ul>'s moet komen geef je een clear: both, en klaar ben je.

Red Crew

01-11-2006 22:21

michien nog enige tips ?

Ik heb ze allemaal uitgelijnd gekregen per 3. Maar als ik ze in een ul li list zet dan zet hij ze weer allemaal naast elkaar.

Moet ik nu werken met een class=li1, class=li2, class=li3 (elke rij een aparte class) ?
En hoe lijn ik deze dan het beste uit ?

Jan Koehoorn

01-11-2006 22:31

Ik ben in een ADHD bui. Ik maak voor jou ook wel ff iets.

Red Crew

01-11-2006 22:34

Oh zalig fijn

Jan Koehoorn

01-11-2006 22:39


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>Checkboxen uitlijnen</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<style type="text/css">
		ul.kolom {
			list-style: none;
			float: left;
			width: 150px;
			border: 1px solid #999;
			margin: 0px;
			padding: 0px;
		}
		p.clearer {
			clear: both;
		}
		label {
			cursor: pointer;
			font: 12px verdana;
		}
	</style>
</head>

<body>
	<form method="post" action="#">
		<ul class="kolom">
			<li><input id="input1" name="check[]" type="checkbox" value="een"><label for="input1">een</label></li>
			<li><input id="input2" name="check[]" type="checkbox" value="twee"><label for="input2">twee</label></li>
			<li><input id="input3" name="check[]" type="checkbox" value="drie"><label for="input3">drie</label></li>
			<li><input id="input4" name="check[]" type="checkbox" value="vier"><label for="input4">vier</label></li>
			<li><input id="input5" name="check[]" type="checkbox" value="vijf"><label for="input5">vijf</label></li>
		</ul>
		<ul class="kolom">
			<li><input id="input6" name="check[]" type="checkbox" value="zes"><label for="input6">zes</label></li>
			<li><input id="input7" name="check[]" type="checkbox" value="zeven"><label for="input7">zeven</label></li>
			<li><input id="input8" name="check[]" type="checkbox" value="acht"><label for="input8">acht</label></li>
			<li><input id="input9" name="check[]" type="checkbox" value="negen"><label for="input9">negen</label></li>
			<li><input id="input10" name="check[]" type="checkbox" value="tien"><label for="input10">tien</label></li>
		</ul>
		<ul class="kolom">
			<li><input id="input11" name="check[]" type="checkbox" value="elf"><label for="input11">elf</label></li>
			<li><input id="input12" name="check[]" type="checkbox" value="twaalf"><label for="input12">twaalf</label></li>
			<li><input id="input13" name="check[]" type="checkbox" value="dertien"><label for="input13">dertien</label></li>
			<li><input id="input14" name="check[]" type="checkbox" value="veertien"><label for="input14">veertien</label></li>
			<li><input id="input15" name="check[]" type="checkbox" value="vijftien"><label for="input15">vijftien</label></li>
		</ul>
		<p class="clearer">
			<input type="submit" value="verzenden">
		</p>
	</form>
</body>
</html>

Link naar online voorbeeld op jankoehoorn.nl

[edit]
getest en werkt in IE, FF en Opera
[/edit]

Reageren

Inloggen om te reageren