Opmaak CSS formulier

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

3.232 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 ?

- -

01-11-2006 22:41

Jan, jij bent zo'n goede CSS-er! Als je niet op de 1e plek van NL staat, sta je wel in de top10! Hoe bedenk je al deze dingen? want css kan afwijken an je gedachten.

Jan Koehoorn

01-11-2006 22:44

@ Jonathan: hahaha, dank je :-) Ik heb er geen standaardtruc voor. Hoe meer je het doet, hoe beter je intuitie wordt voor oplossingen.

Red Crew

01-11-2006 23:12

Merci jan,
Fantastisch

Nog 1 vraagje als ik voor mijn div een zet is ,alles goed van uiterlijk maar dan staat hij te laag. En nu zet hij 1tje van boven en de rest eronder (wel goed).

http://dvd.php-design.be/dvd/?p=adddvdform2

Jan Koehoorn

01-11-2006 23:19

Sorry, ik snap niet precies wat je bedoelt?

Red Crew

01-11-2006 23:24

Voor de <ul class="kolom"> heb ik een div gemaakt waar alles in terecht komt.
Als ik vlak voor die div een zet staat alles perfect in 3 kolommen maar 1 regels lager dan de omschrijving voor het geheel.

Als ik die break weglaat staat er op de eerste regel maar 1 checkbox ipv 3. vanaf daaronder begint alles weer goed.

form

Nu was mijn vraag wat heb ik fout gedaan.

Kalle P

01-11-2006 23:25

Gebruik geen maar 

Of werk met margin-top: 10px bijvoorbeeld. Voor 10px speling.

Red Crew

01-11-2006 23:29

Helpt niet en als ik een margin-top doe zet hij het opniuw lager en dat is wat ik juist NIET wil.

Jan Koehoorn

02-11-2006 00:08

Je CSS zo doen:


/* CSS Document */
form {
	margin: 10px 0px;	
	padding: 15px;
}
label {
	cursor: pointer;
}
#pipe {
	position: relative;
	left: 250px;
	width: 500px;
	} 

ul.kolom {
	list-style: none;
	float: left;
	width: 150px;
	margin: 0px;
	padding: 0px;
}
p.clearer {
	clear: both;
}
fieldset {
	border: 2px solid #333399;	
}
legend {
	font-weight: bold;
	background: #333399;
	padding: 5px;
	font-size: large;
	color: #FFFFFF;
}

input.my_textfield, textarea.my_textfield {
	color: #333399;
	font-weight: bold;
	padding: 2px;
	border-top: 1px solid #333;
	border-left: 1px solid #333;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

input.button {
	color: #333399;
	float: left;
	margin-left: 180px;
	font-weight: bolder;
}
hr.clearer {
	visibility: hidden;
	clear: both;
}

Reageren

Inloggen om te reageren