Opmaak CSS formulier
tabel voorbeeld
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<?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'].'" /> '.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;
[/code]
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 ?
[url=http://dvd.php-design.be/dvd/?p=adddvdform2]CSS voorbeeld[/url]
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;
}
[/code]
Iemand een idee ?
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'].'" /> '.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;
[/code]
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 ?
[url=http://dvd.php-design.be/dvd/?p=adddvdform2]CSS voorbeeld[/url]
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;
}
[/code]
Iemand een idee ?
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
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.
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 ?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!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>
<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
getest en werkt in IE, FF en Opera
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Fantastisch
Nog 1 vraagje als ik voor mijn div een <br /> 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
Gewijzigd op 01/01/1970 01:00:00 door Red Crew
Als ik vlak voor die div een <br /> zet staat alles perfect in 3 kolommen maar 1 regels lager dan de omschrijving voor het geheel.
Als ik die break <br /> 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.
Of werk met margin-top: 10px bijvoorbeeld. Voor 10px speling.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/* 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;
}
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;
}