css form layout, trekt omhoog
http://www.thijsdamen.nl/test/register.html (url= geeft me problemen:S, zie hieronder)
voorbeeld
ik probeer om een beetje nette form aan te maken, gebeurt er dit (zie voorbeeld).
ik heb geen idee wat het veroorzaakt, ik heb geprobeerd de hoogte apart in te stellen maar dat schijnt niet te helpen.
iemand een idee? Mijn gok is namenlijk dat ik of:
font van de linkerkant moet vergroten, maar die vergroot ook in de breedte en word lelijk, een line-height instellen, word ook lelijk.
<P> een height mee geven, werkt niet.
de input box height veranderen (geen idee hoe).
In principe moet <P> gewoon 14px hoog worden, done, thats it. alleen lukt me dat niet ;)
(dit is de code)
html:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head></head>
<title>Honey, Im home</Title>
<link href="forms.css" type="text/css" rel="stylesheet">
</head>
<body>
<form name="signup" id="form" method="post" action="#">
<p class="left">test:</p><p class="right"><input type="text"></p>
<p class="left">test2:</p><p class="right"><input type="text"></p>
<p class="left">test3:</p><p class="right"><input type="text"></p>
<p class="left">test4:</p><p class="right"><input type="text"></p>
<p class="left">test5:</p><p class="right"><input type="text"></p>
<p class="left">test6:</p><p class="right"><input type="text"></p>
</form>
</body>
</html>
<head></head>
<title>Honey, Im home</Title>
<link href="forms.css" type="text/css" rel="stylesheet">
</head>
<body>
<form name="signup" id="form" method="post" action="#">
<p class="left">test:</p><p class="right"><input type="text"></p>
<p class="left">test2:</p><p class="right"><input type="text"></p>
<p class="left">test3:</p><p class="right"><input type="text"></p>
<p class="left">test4:</p><p class="right"><input type="text"></p>
<p class="left">test5:</p><p class="right"><input type="text"></p>
<p class="left">test6:</p><p class="right"><input type="text"></p>
</form>
</body>
</html>
CSS:
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
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
body,html {
margin:0;
padding:0;
color:#000;
}
body {
min-width:750px;
}
#form {
background-color: $f9FBFd;
color: #000000;
width: 440px;
border: 1px solid #d7e5F2;
border-collapse: collapse;
}
#form p {
border: 1px solid #d7e5f2;
border-collapse: collapse;
padding-left: 4px;
}
#form p input {
float: right;
}
.right {
float: right;
background-color: #F2F7FB;
color: #000000;
text-align: right;
margin-right: 0px;
padding-right: 3px;
width: 219px;
}
.left {
float: left;
font: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #3670A7;
background-color: transparent;
width: 219px;
}
margin:0;
padding:0;
color:#000;
}
body {
min-width:750px;
}
#form {
background-color: $f9FBFd;
color: #000000;
width: 440px;
border: 1px solid #d7e5F2;
border-collapse: collapse;
}
#form p {
border: 1px solid #d7e5f2;
border-collapse: collapse;
padding-left: 4px;
}
#form p input {
float: right;
}
.right {
float: right;
background-color: #F2F7FB;
color: #000000;
text-align: right;
margin-right: 0px;
padding-right: 3px;
width: 219px;
}
.left {
float: left;
font: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #3670A7;
background-color: transparent;
width: 219px;
}
mod_edit:
Een url naar een externe pagina doe je met http:// ervoor
[/edit]
[/edit]
Gewijzigd op 01/01/1970 01:00:00 door Thijs Damen
Code (php)
1
2
3
4
2
3
4
<p>
<label for="veld1">veld 1:</label>
<input id="veld1" name="veld1" type="text" />
</p>
<label for="veld1">veld 1:</label>
<input id="veld1" name="veld1" type="text" />
</p>
Als je in die opzet je label naar links float en een width geeft en je p binnen een form deze style geeft:
Code (php)
1
form p {overflow: hidden; width: 100%;}
dan heb je al een aardig begin.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<p>
<span class="labelcell">
<label for="username">Username:</label>
</span>
<span class="fieldcell">
<input type="text" name="username" id="username" tabindex="1">
</span>
</p>
<span class="labelcell">
<label for="username">Username:</label>
</span>
<span class="fieldcell">
<input type="text" name="username" id="username" tabindex="1">
</span>
</p>
(natuurlijk kun je ook een voorbeeldje bekijken op het linkje hierboven (1e post).
Nog een tip: zet op je labels een cursor: pointer; De user kan dan zien dat labels aanklikbaar zijn.
Als ik zonder Spans werk kan ik namenlijk niet de achtergrond kleur van de inputCELL wijzigen. (ik kan wel de inout box wijzigen maar niet de achtergrond kleur daarvan). Daarvoor gebruik ik dan weer die spans om ook die kleur netjes weer te geven.
ook gebruik ik de spans voor mijn floats.
(ik kan de label wel een float meegeven maar om het ook netjes te houden in Ie6 (geloof alleen ie6 en lager) gebruik ik width: 49%; om ervoor te zorgen dat ze ook daadwerkelijk naast elkaar staan.