HEJ!
Jag har satt ihop ett formulär med utgångspunkt från http://www.picment.com/articles/css/funwithforms/, men jag får inte ihop det riktigt.
1. Är font rätt (=på bästa sätt) beskrivet i Body? Letade förgäves efter tråden som beskrev vad de 70 procenten utgår från. Har för mig att de skrev att man skulle utgå från 62.5 istället, enklare att räkna om till pixlar.
2. Textrutorna har bredd i pixel, hur översätter man det till em? Dessa borde ju också ändra storlek när fontstorleken ändras? Gäller även de 80px för Label.
3. Om man ändrar radhöjden i body till 1.3em eller mer, hamnar text och textrutor snett nedanför varandra. Hur löser man det?
Detsamma inträffar när man ändrar fontstorleken.
4. Kan man få texten till radioknappen (label) att hamna mer i linje med varandra? Den ligger lite under centrumlinjen nu. Jag gissar att det beror på fontstorleken?
5. Något annat att justera?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
FIELDSET{
width:400px;
border:0px;
}
.fieldset LABEL{
width:80px;
float:left;
margin-top:5px;
}
.nobr{
display:none;
}
.textfield{
margin:1px;
width:200px;
border:solid 1px #1860AB;
font:1em Verdana, Arial, Helvetica, sans-serif;
}
.textfield50{
margin:1px;
width:50px;
border:solid 1px #1860AB;
font:1em Verdana, Arial, Helvetica, sans-serif;
}
.submit{
margin:5px 0px 0px 84px;
border:solid 1px #aaa;
background-color:#1860AB;
color:#fff;
font:1em Verdana, Arial, Helvetica, sans-serif;
}
body{
margin:0px;
padding: 0px;
font:70%/1.2 Verdana, Arial, Helvetica, sans-serif;
}
H1{
font-size:1.3em;
}
</style>
</head>
<body>
<h1>Mer expedit distinct.</h1>
<form name="form" method="post" action="send.asp">
<fieldset>
Et harumd dereud facilis est er expedit distinct?<br />
<input type="radio" id="rb11" name="q1" value="1" title="eligend optio" />
<label for="rb11">eligend optio</label><br />
<input type="radio" id="rb12" name="q1" value="2" title="comque nihil" />
<label for="rb12">comque nihil</label><br />
<input type="radio" id="rb13" name="q1" value="3" title="a impedit anim" />
<label for="rb13">a impedit anim</label>
<br /><br />
Temporem autem quinsud et aur office debit aut
tum rerum necesit atib saepe eveniet ut er
repudiand sint et molestia non este recusand.
</fieldset>
<br />
<fieldset class="fieldset">
<label for="namn">Namn</label><br class="nobr" />
<input type="text" name="namn" class="textfield" title="Namn" /><br />
<label for="adress">Adress</label><br class="nobr" />
<input type="text" name="adress" class="textfield" title="Adress" /><br />
<label for="postnr">Postnummer</label><br class="nobr" />
<input type="text" name="postnr" class="textfield50" title="Postnummer" /><br />
<label for="ort">Ort</label><br class="nobr" />
<input type="text" name="ort" value="" class="textfield" title="Ort" /><br />
<input type="submit" name="submit" value="Klar" class="submit" title="Klar" />
</fieldset>
</form>
</div>
</body>
</html>
