Hoe krijg ik het precies op zijn plaats
Bijvoorbeeld
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<form>
<ul>
<li>
<label>Uw naam</label>
<input name"naam"/>
</li>
</ul>
</form>
<ul>
<li>
<label>Uw naam</label>
<input name"naam"/>
</li>
</ul>
</form>
Als css geef je de label li een float naar links en display op block + eventuele verdere styling. Daarna kan je het element label een width mee geven om de afstand tussen naam en invuld veld beter te maken.
Succes ermee!
EDIT: @ED
Bedankt, ik zal het een proberen
Gewijzigd op 30/09/2011 15:44:20 door Jerry php
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
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
<form>
<fieldset>
<legend>Delivery Details</legend>
<ol>
<li>
<label for="name">Name<em>*</em></label>
<input id="name" name="name" />
</li>
<li>
<label for="email">E-mail<em>*</em></label>
<input id="email" name="email" />
</li>
<li>
<label for="address1">Address<em>*</em></label>
<input id="address1" name="address1" />
</li>
<li>
<label for="address2">Address 2</label>
<input id="address2" name="address2" />
</li>
<li>
<label for="town-city">Town/City</label>
<input id="town-city" name="towncity" />
</li>
<li>
<label for="postcode">Postal Code<em>*</em></label>
<input id="postcode" name="postcode" />
</li>
</ol>
<input type="submit" value="Verstuur" />
</fieldset>
</form>
<fieldset>
<legend>Delivery Details</legend>
<ol>
<li>
<label for="name">Name<em>*</em></label>
<input id="name" name="name" />
</li>
<li>
<label for="email">E-mail<em>*</em></label>
<input id="email" name="email" />
</li>
<li>
<label for="address1">Address<em>*</em></label>
<input id="address1" name="address1" />
</li>
<li>
<label for="address2">Address 2</label>
<input id="address2" name="address2" />
</li>
<li>
<label for="town-city">Town/City</label>
<input id="town-city" name="towncity" />
</li>
<li>
<label for="postcode">Postal Code<em>*</em></label>
<input id="postcode" name="postcode" />
</li>
</ol>
<input type="submit" value="Verstuur" />
</fieldset>
</form>
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">
form fieldset {
margin-bottom: 10px;
}
form legend {
padding: 0 2px;
font-weight: bold;
}
form label {
display: inline-block;
line-height: 1.8;
vertical-align: top;
}
form fieldset ol {
margin: 0;
padding: 0;
}
form fieldset li {
list-style: none;
padding: 5px;
margin: 0;
}
form em {
font-weight: bold;
font-style: normal;
color: #f00;
}
form label {
width: 120px; /* Width of labels */
}
</style>
form fieldset {
margin-bottom: 10px;
}
form legend {
padding: 0 2px;
font-weight: bold;
}
form label {
display: inline-block;
line-height: 1.8;
vertical-align: top;
}
form fieldset ol {
margin: 0;
padding: 0;
}
form fieldset li {
list-style: none;
padding: 5px;
margin: 0;
}
form em {
font-weight: bold;
font-style: normal;
color: #f00;
}
form label {
width: 120px; /* Width of labels */
}
</style>
Dat is een voorbeeld)
Gewijzigd op 30/09/2011 15:48:42 door Ed van Papenrecht
Maikel B op 30/09/2011 15:42:52:
Het is in normale HTML gewoon width="200"
zonder px. px wordt alleen gebruikt in CSS
Ger van Steenderen op 30/09/2011 15:10:28:
ps. het is width="200px" en niet width="200x"
Het is in normale HTML gewoon width="200"
zonder px. px wordt alleen gebruikt in CSS
Dan kan je toch wel eens voor verrassingen te komen staan
Ed van Papenrecht op 30/09/2011 15:47:02:
Dat is een css die je kunt gebruiken:)
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">
form fieldset {
margin-bottom: 10px;
}
form legend {
padding: 0 2px;
font-weight: bold;
}
form label {
display: inline-block;
line-height: 1.8;
vertical-align: top;
}
form fieldset ol {
margin: 0;
padding: 0;
}
form fieldset li {
list-style: none;
padding: 5px;
margin: 0;
}
form em {
font-weight: bold;
font-style: normal;
color: #f00;
}
form label {
width: 120px; /* Width of labels */
}
</style>
form fieldset {
margin-bottom: 10px;
}
form legend {
padding: 0 2px;
font-weight: bold;
}
form label {
display: inline-block;
line-height: 1.8;
vertical-align: top;
}
form fieldset ol {
margin: 0;
padding: 0;
}
form fieldset li {
list-style: none;
padding: 5px;
margin: 0;
}
form em {
font-weight: bold;
font-style: normal;
color: #f00;
}
form label {
width: 120px; /* Width of labels */
}
</style>
Dat is een css die je kunt gebruiken:)
Jeetje, super bedankt! maar ik leer hier niet veel van snapje?
Ed van Papenrecht op 30/09/2011 15:50:17:
Ik heb de basis er nog even bijgevoegd. Je leert er wel van als je het gaat ontleden en zelf er mee gaat experimenteren. Zo heb ik het ook geleerd.. Veel kijken hoe andere het doen en daar zelf je eigen draai aan geven zodat je het ook zelf kan toepassen:)
Oke, dat is inderdaad wel een goede tip. Dankje!
Toevoeging op 30/09/2011 16:14:48:
@ed
wat wil dit zeggen in jouw css bestand die je gaf?
fieldset {
margin-bottom: 0px;
}
en margin-bottom is de marge aan de onderkant.
0px is dus geen geen marge aan de onderkant.
Maikel B op 30/09/2011 16:28:33:
de fieldset is de lijn om het formulier heen.
en margin-bottom is de marge aan de onderkant.
0px is dus geen geen marge aan de onderkant.
en margin-bottom is de marge aan de onderkant.
0px is dus geen geen marge aan de onderkant.
Maar hij hoeft er dus niet persee bij, want ik heb hem net weggehaald en je ziet er niets van
Maikel B op 30/09/2011 16:31:35:
in de code van ed stond de margin-bottom op 10px en niet op 0
Maar er veranderde niets aan
neem niet te veel 'hooi op je vork', daarmee wil ik zeggen dat je eerst het ene onder de knie moet krijgen en daarna het andere.
Jerry php op 30/09/2011 16:40:59:
Wat moet ik als eerst doen, php he, want daar was ik eigenlijk mee bezig.
Juist, eerst zorgen dat je de gegevens die je getoond wilt hebben er ook daadwerkelijk daarna pas gaan stylen.
Ger van Steenderen op 30/09/2011 16:49:44:
Juist, eerst zorgen dat je de gegevens die je getoond wilt hebben er ook daadwerkelijk daarna pas gaan stylen.
Jerry php op 30/09/2011 16:40:59:
Wat moet ik als eerst doen, php he, want daar was ik eigenlijk mee bezig.
Juist, eerst zorgen dat je de gegevens die je getoond wilt hebben er ook daadwerkelijk daarna pas gaan stylen.
Dankje