Miten divien paikka määritellään CSS:ssä? Olen kuullut, että position:absolute ei ole kovin hyvä vaihtoehto, sillä sivustoa voi olla hankala muuttaa myöhemmin. Mulla on nyt seuraava koodi:
div.reqspace {
float:left
top:100px;
left:0px;
width:200px;
}Tämä div on bodyn sisällä. Kuitenkin tämä reqspace tulee liian oikealle verrattuna yläpuolella olevaan kappaleen tekstiin.
Anna sähköpostiosoitteesi ja valitse salasanasi rekisteröityäksesi: <br/> <div class="reqspace"> Sähköpostiosoite: <br/> Valitse salasanasi: <br/> </div>
Tuosta ei vielä aukene, minkälaista layoutia olet tekemässä. Nykyään Googlella löytyy aika hyvin vinkkejä, jos vaan tietää mitä etsii. Jotain tämmöistäkö olet tekemässä?
Mulla on siinä kaksi tekstiriviä, "Anna sähköpostiosoite" ja "Valitse salasana". Sitten näiden oikealle puolelle olisi kiva saada input-lootat, jotka olisivat yhtä pitkiä ja tasattuna pystysuunnassa. Varmaankin pitää tehdä ensin yksi div, reqspace, teksteille ja toinen div lootille.
Eli haluat nuo labelit kohdakkain input fieldien kanssa? Eikö silloin kannattaisi tehdä jotain tämmöistä:
<form> <div class="field_wrapper"> <span class="label">Sähköposti:</span> <input type="text" name="email" /> </div> <div class="field_wrapper"> <span class="label">Salasana:</span> <input type="password" name="salasana" /> </div> </form>
Tuosta nuo on jo kohtuu helppo saada samalle riville ja samaan "sarakkeeseen" antamalla labelille riittävästi leveyttä.
Labelille on ihan oma elementtinsä.
<div class="field_wrapper"> <label for="my_email">Sähköposti:</label> <input id="my_email" type="text" name="email" /> </div>
Se oikeasti linkittyy tuohon input-kenttään (labelin for ja inputin id -attribuutit). Tämän huomaa esimerkiksi siitä, että jos klikkaat hiirellä labelia, niin fookus siirtyy for-kentässä ilmaistuun elementtiin.
Merrin esimerkin voi kirjoittaa myös ilman for- ja id-attribuutteja, jos sen sijaan sijoittaa input-elementin labelin sisään. Joka tapauksessa labelin käyttö oikein on suositeltavaa Merrin mainitsemasta syystä.
Sitten vielä loppusilaus vieden eteenpäin Metabolixin mainitsemaa input-kenttää suoraan labelin sisällä.
Mallisivu ja koodi itsessään:
<!DOCTYPE html>
<html lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Lomaketyylejä</title>
<style type="text/css">
label,button,input[type=submit],input[type=reset] {
cursor: pointer;
}
legend {
display: none;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
#lomake1 label {
background: #EEE;
display: block;
line-height: 1.5em;
padding: .5em 1em;
position: relative;
}
#lomake1 label:hover {
background: #DDD;
}
#lomake1 label input {
left: 12em;
position: absolute;
}
#lomake1 button {
margin: 1em .5em;
}
</style>
</head>
<body>
<form id="lomake1">
<fieldset><legend></legend>
<label>Etu- ja sukunimi: <input type="text" name="fullname"></label>
<label>Sähköpostiosoite: <input type="text" name="email"></label>
<label>Salasana: <input type="password" name="email"></label>
<button type="submit">Lähetä</button>
<button type="reset">Palauta</button>
</fieldset>
</form>
</body>
</html>Kuten näkyy, olen aivan surutta käyttänyt tässä tapauksessa absoluuttista sijoittelua. Se on ihan ookoo. Ongelmat absoluten kanssa tulee silloin, kun koko leiska on suunniteltu lähes pelkällä absoluuttisella sijoittelulla. Lopputulos kun ei ole lainkaan joustava.
HTML on lyhyt ja nätti. CSS on myös varsin lyhyt. Tyyli korostaa label-kenttien klikattavuutta fookuksen siirtämiseksi niitä vastaavaan input-kenttään.
Muoks!
Mallisivua on muokattu jälkikäteen, ylläoleva koodi pidetty entisellään.
Miksihän en ymmärrä, että mitä merkitystä on tuolla legend -laatikolla.
<legend></legend>, jonka arvoksi on määritelty display: none.
Tuollahan ei ole vaikutusta mihinkään, vai olenko väärässä?
Legend on tarkoitettu fieldsetin kuvaukseksi/otsikoksi. Ongelma legendin kanssa on yleensä se, että sen tyylittely on monia muita elementtejä rajatumpaa. Voi kai sanoa että sillä on ihan oma elämänsä ja se on vaikea saada toimimaan eri selainten välillä samalla tavalla kai vielä nykyäänkin (en ole toviin kokeillut). Tämän lisäksi se on tietääkseni pakollinen elementti fieldsetille, joka noin muuten on hyväksyttävä elementti useamman toisiinsa liittyvän lomakekentän ryhmittämiseen.
En osaa sanoa yleisluontoista faktaa, mutta omien kokemuksieni mukaan legend jätetään aika usein pellolle ja sen sijasta käytetään otsikkoelementtiä, ainakin silloin kun fieldsetiä käytetään.
display: none; on pakollinen, jottei se tyhjä legend-elementti kummittele.
Merri, legend ei ole pakollinen.
Haa, tein vähän tutkimista, että miksi minulle on jäänyt tavaksi lisätä aina legend-tagi. Tämä juttu taitaa liittyä selainten vanhaan tapaan toimia, esimerkiksi Firefox 2 ilmeisesti lisäsi aina legend-elementin vaikkei sitä ollut koodissa määritetty. Tämän takia taas tuli kai yhteneväisyysongelmia eri selainten välillä, joten oli kai jokin "kirjoittamaton sääntö" lisätä legend-elementti mukaan vaikka sitten tyhjänä.
En kuitenkaan alkanut tutkia tätä perinpohjaisesti, tahdon pelata Civiä just nyt :)
Aihe on jo aika vanha, joten et voi enää vastata siihen.