Div meerekken als tabel
Ik heb nu op m'n website een tabel als formulier, maar ik weet dat dit niet klopt. Ik heb voor deze manier gekozen omdat alles zo netjes uitgelijnd wordt onder elkaar.
Kan het op een andere manier met div's die meerekt als een tabel?
Thanks!
en dan left div: (width: 40%)
en dan right div: (width: 60%)
Is maar een voorbeeld?
http://www.rpgtopten.nl/mijn-account
Maar ik weet niet of jij dat ook bedoelt, want als dat wel zo is weet ik niet of dat werkt.
Edit: dit is wat je bedoelt ja, foutje. Verkeerd gelezen.
Toevoeging op 07/04/2011 22:26:18:
Dat is het dus niet. Ik wil echt alles netjes uitgelijnd hebben. Het leek op het begin goed te gaan, maar als er dan een hoger veld komt gaat het fout:
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
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
<style type="text/css">
.formulier {
border: 1px solid silver;
padding: 5px;
display: table;
}
.beschrijving {
float: left;
padding: 5px;
}
.element {
padding: 5px;
}
</style>
<div class="formulier">
<div class="beschrijving">
<div class="element">Beschrijving:</div>
<div class="element">URL:</div>
<div class="element">Uitleg:</div>
<div class="element">Kies:</div>
</div>
<div class="beschrijving">
<div class="element"><input type="text" /></div>
<div class="element"><input type="text" /></div>
<div class="element"><textarea rows="6" cols="37"></textarea></div>
<div class="element"><input type="text" /></div>
</div>
</div>
.formulier {
border: 1px solid silver;
padding: 5px;
display: table;
}
.beschrijving {
float: left;
padding: 5px;
}
.element {
padding: 5px;
}
</style>
<div class="formulier">
<div class="beschrijving">
<div class="element">Beschrijving:</div>
<div class="element">URL:</div>
<div class="element">Uitleg:</div>
<div class="element">Kies:</div>
</div>
<div class="beschrijving">
<div class="element"><input type="text" /></div>
<div class="element"><input type="text" /></div>
<div class="element"><textarea rows="6" cols="37"></textarea></div>
<div class="element"><input type="text" /></div>
</div>
</div>
Hoe kan ik dit oplossen?
Gewijzigd op 07/04/2011 22:07:54 door Roel -
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div id="inlogForm">
<form>
<label for="naam">Naam: </label><input type="text" id="naam" name="naam">
<label for="email">Email: </label><input type="text" id="email" name="email">
</form>
</div>
<form>
<label for="naam">Naam: </label><input type="text" id="naam" name="naam">
<label for="email">Email: </label><input type="text" id="email" name="email">
</form>
</div>
Sorry hoor, maar m'n CSS kant zuigt echt.
Ik heb wel een idee van wat je bedoelt.
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
56
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
56
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
<style type="text/css">
body
{
background: #aaa;
margin: 1em;
font-family: 'Verdana', Arial, sans-serif;
}
#inlogForm
{
width: 300px;
border: 1px solid #777;
padding: 5px;
background: #ddd;
}
label
{
display: block;
float: left;
width: 30%;
}
input[type=text], input[type=email], textarea
{
width: 70%;
}
input[type=submit]
{
width: 70%;
margin-left: 30%;
}
form *
{
font-family: 'Verdana', Arial, sans-serif;
}
textarea
{
font-size: 12px;
height: 100px;
}
</style>
</head>
<body>
<div id="inlogForm">
<form>
<label for="naam">Naam: </label><input type="text" id="naam" name="naam">
<label for="email">Email: </label><input type="text" id="email" name="email">
<label for="bericht">Bericht: </label><textarea id="bericht" name="bericht"></textarea>
<input type="submit" value="Verzenden">
</form>
</div>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
<style type="text/css">
body
{
background: #aaa;
margin: 1em;
font-family: 'Verdana', Arial, sans-serif;
}
#inlogForm
{
width: 300px;
border: 1px solid #777;
padding: 5px;
background: #ddd;
}
label
{
display: block;
float: left;
width: 30%;
}
input[type=text], input[type=email], textarea
{
width: 70%;
}
input[type=submit]
{
width: 70%;
margin-left: 30%;
}
form *
{
font-family: 'Verdana', Arial, sans-serif;
}
textarea
{
font-size: 12px;
height: 100px;
}
</style>
</head>
<body>
<div id="inlogForm">
<form>
<label for="naam">Naam: </label><input type="text" id="naam" name="naam">
<label for="email">Email: </label><input type="text" id="email" name="email">
<label for="bericht">Bericht: </label><textarea id="bericht" name="bericht"></textarea>
<input type="submit" value="Verzenden">
</form>
</div>
</body>
</html>
Gewijzigd op 08/04/2011 09:05:39 door Wouter J