Tietääkö kukaan, että onko IE 8:n css-tulkissa tuettu jo display-muotoilun table ja table-cell arvot, kun floattien käyttö on jotenki rasittavaa kun ei millään meinaa saada toimimaan ja en ole pystynyt IE 8:saa vielä testaamaan...
MSDN:n mukaan on.
Onhan se ihan hyvä, että se on kasissa jo mukana, mut ainoo mikä jää ongelmaks on se, että kestää viel sairaan kauan ennen kun kasista tulee vakaa versio ja että ihmiset siirtyy kutosesta ja seiskasta kasia käyttämään...
Joo, kunhan nyt eka näkisi senkin ihmeen että kuutosesta siirryttäisiin kokonaan IE7:aan edes. Itse olen varsin kiinnostunut siitä että vihdoinkin IE saa jonkinlaisen järkevän tavan näyttää sivut ja ei tarvitse aina keksiä viritelmiä näiden toimivuuden saamiseksi.
Jännää kun itsellä ei yleensä ole pahemmin ollut ongelmaa, vaikka oon sivuja rustannut ihan puhtaasti FF:llä. Yleensä on toiminut moitteetta sitten IE:lläkin (ja Operalla, Safarilla, .... jne)
Grez kirjoitti:
Yleensä on toiminut moitteetta sitten IE:lläkin
Seiskalla?
On nimittäin ihan eri peto kuin tuo kuutonen, jonka soisi häviävän mun Internetistä nyt. Tuskin mikään muu ohjelmisto on hukannu yhtä paljon kehittäjien aikaa, vaivaa ja mielenterveyttä.
Siis itse asiassa nimenomaan IE6:lla olen testannut.
Harrastat taulukkotaittoa ja transitional-HTML:ää?
Koska kaikki edelläsanomani tulee väistämättä vastaan CSS-taittoa yrittäessä.
Jaa jaa, kyllä viimeksi tekemäni oli HTML4 Strict, ja menee läpi W3C:n validaattorista, tableja ei ole paitsi sivuilla, joissa on taulukkomuotoista dataa, sivut noudattaa graceful degradation periaatetta (asiasisällön pystyy lukemaan CSS:ää tukemattomillakin selaimilla ja tekstiselaimilla) IE6 ja uudemmilla ja muilla samanikäisillä tai uudemmilla näyttää vakiotekstikoolla 1:1 graafikon tekemältä leiskalta (jonka siis sain kuvana), mutta skaalautuu siististi sisällön kasvaessa. Ja sivusto on luonnollisesti myös erittäin hyvin lähestyttävä hakukoneiden näkökulmasta.
Sivusto myös hyödyntää javascriptiä muutamaan käytettämyysjuttuun, mutta perustoiminnallisuus toimii moitteettomasti ilmankin. Edes javascriptin kanssa ei tullut minkään selaimen takia harmaita hiuksia.
Tosin on kyllä tullut katseltua monia sivuja ja onhan niissä sen verran hirveitä virityksiä, että ei mikään ihme että toimivat juuri ja juuri muutamalla selaimella joille on hampaat irvessä säädetty se toimimaan.
Suurimmat ongelmat, mitkä tulee lähes aina vastaan ovat esim. floatin käyttö kun IE heittää divit aivan eri kohtaan ruutua, mitä olin FF:llä katsonut ja sitten se, että teksti tuntuu vuotavan lähes aina ulkoasusta "yli", vaikka laittaisinkin clear:bothia. Se myös teettää ongelmia jos haluaa, että kaksi vierekkäistä diviä venyy, vaikka vain tuoseen tulee sisältöä... Tuon ongelma saa ratkaistua nimenomaan display-muotoilua, mitä näköjään vasta tämä kasi versio tukee. Mistäköhän johtuu, että table-taittoa tulisi välttää ja käyttää divejä? Kun itse ainakin saan ulkoasuista huomattavasti toimivammat tableilla!
Hitaus varmaankin. Ainakin taulukoilla sivut ovat paljon raskaammat ja taulukot on tehty taulukkomuotoisen datan esittämiseen, ei taittoon.
Toni: puhut kuin taulukot ja divit olisivat jotenkin verrattavissa oleva asia, mutta ne eivät ole. Näyttävän ja toimivan ulkoasun voi tehdä vaikka ihan ilman kumpaakin. Kyse on vain siitä, miten käyttää CSS:ää ja kuinka hyvin sen tarjoamat mahdollisuudet ymmärtää.
Omassa käytössäni divit ovat usein lähinnä kertomassa, että "tämä kokonaisuus kuuluu yhteen". Eri divejä mitä esiintyy usein on vaikka #dokumentti, #otsikko ja #sisalto. Lisäksi hyvin usein esimerkiksi #valikko onkin lista eikä div.
Minusta yksi suurimpia ongelmia monien sivujen teossa on turha monimutkaisuus. Aika usein tuntuu, että jos eteen tulee ongelma, niin lisätään vaan yksi div ja toivotaan että se auttaa. Noin vaikka esimerkiksi:
- Haluan yläpalkin... hmm, lisään divin!
- Haluan valikon... hmm, lisään divin!
- Haluan valikon alle kuvan... hmm, lisään divin!
- Haluan ennen sisältöä palkin... hmm, lisään divin!
- Haluan sisällön viereen taustakuvan... hmm, lisään divin!
- Haluan sisällön jälkeen tekijämerkinnä... hmm, lisään divin!
- Haluan erikoismuotoilun otsikolle... hmm, lisään divin!
- Haluan kuvan kellutettuna oikeaan laitaan... hmm, lisään divin!
Ja sitten sivulla on 50 diviä joiden päälle ymmärtäminen on yhtä helskuttia, varsinkin silloin kun jätetään merkkaamatta minkäänlaista ID:tä tai edes luokkaa. Sama sotku syntyy taulukkotaitolla, tosin sitä käyttämällä tulee vielä paljon herkemmin turhia elementtejä.
Kaikki nuo mainitsemani esimerkit on mahdollista väistää CSS:n ja paremman suunnittelun turvin, jolloin sivun HTML säilyy lyhyenä ja ennen kaikkea ymmärrettävänä. On parempi että monimutkaisuus on CSS:n puolella kuin HTML:n. Ja kun tekee sivut näin, niin sitten myös temu92:n mainitsema sivujen keveys toteutuu. CSS kun on mahdollista välimuistittaa kätevämmin ja tehokkaammin kuin HTML-sivu, jonka sisältö muuttuu aika ajoin. Samasta syystä myös JavaScriptin sijoittaminen erilliseen tiedostoon, pakkaaminen gzipillä sekä pitkä välimuistiaika on erittäin suositeltavaa. Se tosin on taas aivan oma aiheensa sitten.
Ai joo, IE8 tuntuu renderöivän ainakin minun sivujani ihan pätevästi, ja siis pitää huomioida että en tarjoile IE8:lle minkäänlaisia erillisiä IE-korjauksia. Yksi sivuista kattaa foorumin, jonka ulkoasu on tehty kokonaan ilman taulukoita.
Merri: Kun kerroit, että hyviä sivustoja voi tehdä ilman divejä (sekä tableja), niin miten tämä sitten käy? Millä tavalla sivut pysyy järkevästi kasassa ja miten taitto kaiken kaikkiaan onnistuu?
Tiedätkö kesties jotain hyvää kirjaa tai opassarjaa, missä olisi kerrot erilaisia ratkasuja www-sivujen toteuttamiseen HTML:n ja CSS:n avulla?
Tämä ei nyt mikään maailman hienoin esimerkki visuaalisesti ole, mutta:
http://kontu.selfip.info/html.css.js/
Divit eivät ole ainoa elementti joille CSS:n välityksellä voi tehdä jotain: samat temput voi pääasiassa tehdä mille tahansa elementille. Lopulta siis tärkeämmäksi kuin divit muodostuu se, miten sisältö jaotellaan HTML:n rakenteisiin. Eli mitä elementtejä käytetään kuvaamaan mitäkin sisältöä.
Toiset valinnat ovat helppoja: otsikot on otsikoita, listat on listoja, korostettu teksti on korostettua tekstiä (em ja strong, visuaalisesti näytetään yleensä kursiivina tai lihavoituna), kappale tekstiä on kappale-elementissä... jotkut asiat vain vaativat hieman enemmän pohdintaa. Esimerkiksi valikko on käytännössä linkkilista -> yhdistelmä ul, li ja a -tageja.
Pelkästään useampien eri HTML:n valmiiksi määriteltyjen elementtien käyttäminen mahdollistaa helpomman tyylittelyn CSS:llä. Kun mukaan vielä lisää sopivasti harkitut ID:t ja luokat, niin tyylittelyn pitäisi olla jo varsin helppoa. Se taas, että miten oppii välttämään ylimääräisten elementtien luomista... no, se vaatii vain harjoitusta.
Kirjoja en osaa neuvoa. Olen oppini ottanut kokeilemalla, W3C:n dokumenteilla, lukemalla artikkeleja ja blogeja. Ja ennen kaikkea kyseenalaistamalla. Ainut kirja jota osaan suositella on "Älä pakota minua ajattelemaan!", mutta se kertoo ennemminkin sivustojen käyttöliittymäsuunnittelusta.
Kiitos hyvistä neuvoista!
Sellaista piti vielä kysyä, että minkälaisiin tilanteisiin sinä (Merri) hyödyntäisit divejä? Ne on kuitenkin kehitetty html:ään ja css:sään eli kaiketi niillä on jokin merkitys...
Mainitsin jo aiemmin: ryhmittelemään sisältöä joka kuuluu yhteen. Esimerkiksi pääsisältö on minulla aina tietyn divin sisällä. Olen myös ottanut tavaksi wrappia koko sivun yhden divin sisälle, tästä on/oli tiettyjä leiskoja tehdessä apua useamman selaimen temppuilujen yhtenäistämisessä. Myös valikkopuolen voi laittaa divin sisään jos sinne tulee useampia valikoita (vaihtoehtona tosin olisi tässä tilanteessa dl-lista).
Käytän divejä myös silloin kun joudun toteuttamaan jotain vähän monimutkaisempaa, joka ei nykyisillä CSS-määrityksillä muuten onnistu. Esimerkistä käy osin läpinäkyvä PNG-laatikko, jolla on toistuvat reunat joka suuntaan. Koska taustakuvia on sallittu vain yksi per elementti ja :before ja :after ovat liian rajallisia, ja kaiken kukkuraksi useammat PNG-kuvat eivät saa mennä päällekkäin keskenään, niin on aikamoisen pakko kikkailla useammalla "turhalla" elementillä.
Olen myös tehnyt sisällön tuplapalstoitteluja käyttäen divejä. Muuta ei tule nyt äkkiseltään mieleen. Käytännössä kuitenkin diviä tulee käytettyä kun mikään muu ei ole tilanteeseen käypä.
HTML:ään div on määritelty elementtinä, jolla ei ole oletuksena tyyliä eikä erityistä tarkoitusta. Divin ainut tyyli on display: block;. Span on kuten div, mutta sillä on oletustyylinä display: inline;. Pitää kuitenkin muistaa myös elementtien hierarkia, div ei voi olla spanin sisällä, vaikka ne muuten ovatkin aika samaa kauraa.
Eikö body toimi koko sivun wrapperina? Mitä ongelmia se tuo?
Aiemmin ja ehkä joissakin tilanteissa vielä nytkin selaimilla on ongelmia sijoitella elementtejä yhtenäisesti. Käytännön esimerkkiä ei ole tähän nyt heittää, mutta esim. Operassa vielä pari versiota sitten saattoi absoluuttisesti sijoiteltu elementti sijoittua jonnekin vikapaikkaan, tai vaihtoehtoisesti saattoi syntyä piirtovirheitä monimutkaisemmalla leiskalla, jossa oli useita sisäkkäisiä elementtejä. IE:stä lienee turha sanoa muuta kuin maininta... Ainut toimiva korjaus joka muodostui vakiotavakseni oli laittaa pohjalle div, jolle oli määritelty position: relative; ja IE:n käyttäytymisestä riippuen myös width: 100%; – huomionarvoista tässä on myös se, että IE:ssä bodyllä on oletuksena aina hasLayout, mutta ylimääräisellä elementillä ei ellei sitä itse kytke leveyttä asettamalla.
Kunhan päästään jonnekin parin vuoden päähän, niin sitten näitä ei toivottavasti tarvitse miettiä enää ollenkaan. IE8 on kirjoitettu kunnolla uusiksi ja Operastakin piirtovirheiden määrä onneksi enemmän vähenee kuin mitä niitä tulee lisää. Firefoxissa on aina ollut vakaampi piirto, kun bugeja on ollut ne ovat olleet paljon selvempiä (esim. selkeästi toiminnallisuuspuute). Chrome ja Safari ovat samassa kastissa Firefoxin kanssa tässä asiassa.
Tässä olen katsellut eri WWW-suunnitelu firmojen nettisivujen lähdekoodeja, niin aika monissa on ollut pohjalla sotkuinen div tai table härpäke. Mistäköhän mahtaa johtua, ettei edes alan yritykset osaa tehdä sivuja muuten kuin div tai table taitolla?
Triton kirjoitti:
Mistäköhän mahtaa johtua, ettei edes alan yritykset osaa tehdä sivuja muuten kuin div tai table taitolla?
Rumalla pikselimittoihin perustuvalla asettelulla saa pienimmällä vaivalla jälkeä, joka toimii 99 prosentilla kävijöistä (eli IE:llä ja oletusfonttikoolla) ja näyttää täsmälleen siltä, kuin kalliilla palkattu graafikko (joka ei välttämättä ymmärrä mitään sen paremmin toteutuksesta kuin todellisesta käytettävyydestäkään) on taiteellisesti suunnitellut. >_> Esimerkiksi näkövammaiset ovat yleisen näkemyksen mukaan niin marginaalinen ryhmä, ettei heitä ole taloudellisesti kannattavaa huomioida.
Myös työkaluilla on vaikutusta: suositun Dreamweaverin standardipuoli on ollut vuositolkulla aivan surkealla tolalla. Tilanne on ilmeisesti hieman parantunut, mutta on silti heikko.
Silläkin on vaikutusta, minkä vuoksi sivuja tekee. Jos sivuja joutuu tekemään työkseen mahdollisimman nopeasti, tulee tekijällä myös nähtyä minimivaiva. Joutuessani töissä tekemään sivuja jouduin toteamaan karun totuuden tältä osin, minkä vuoksi olen päättänyt etten ala ainakaan koskaan täysiaikaiseksi sivujen tekijäksi, mikäli minulle ei anneta vapautta tehdä sitä kunnolla ajan kanssa. Jos ei ole aikaa miettiä kunnolla muuta kuin että sivut tekee päällisin puolin sen mitä tarvitsee, niin se on ainakin minulle ei kiitos.
Toisaalta kaikkia ei yksinkertaisesti kiinnosta tehdä kunnolla, siis oikeasti paneutua opettelemaan HTML:ää ja CSS:ää. Jotkut henkilöt palkataan ennemmin persoonan ja/tai tiimityöskentelyyn sopivuuden perusteella. Omalla kohdallani tämä on heikkous: en ole ulospäinsuuntautunut ja vaatii aika paljon, että löytyy ihmisiä joiden kanssa tulen "luonnollisesti" toimeen saumattomasti.
Iso ongelma on sekin, että useamman eri alan henkilön työstäessä sivuja tulee eteen tilanteita, jossa asiat eivät saumattomasti loksahda kohdalleen. Esimerkiksi vaikkapa Metabolixin mainitsema graafikon tekemä ulkoasu ei välttämättä ole helpoiten edes muokattavissa oikeaksi leiskaksi.
Viimeinen maininnan arvoinen asia ovat pomot ja asiakkaat. Molempien mielipiteet saattavat olla ailahtelevia, yllättäen saatetaan halutakin jotain ihan muuta kuin mistä on alunperin ollut puhe, tai asiakas ei ole osannut kunnolla ilmaista mitä todellisuudessa haluaa. Pomot taas saattavat pakottaa toimimaan liian ahtaalla aikataululla.
Hyviäkin esimerkkejä löytyy: vaikkapa YLE:llä näyttäisi olevan oikein kelpo nettitiimi, joka osaa asiansa ja jolle annetaan tarpeeksi aikaa. Vaikka koodi ei välttämättä ole niin siistiä kuin se voisi olla, on silti monet asiat tehty oikein. Kontrastina esimerkiksi MTV3:lla on taas sivut niin jöötiä kuin vain voi olla. Tai no, ei ehkä ihan niin pahaa, mutta alimman riman "kunhan toimii" -laatua kuitenkin.
Eli toisin sanoen kukatahansa, joka on viitsinyt opetalla HTML:llää ja CSS:sää edes vähän voisi perustaa oman www-suunnittelu firman..;D
CSS:n toteutus selaimissa ei kyllä ole vielä lähellekään sitä tasoa, että ulkoasun voisi suunnitella vapaasti ilman kikkailuja HTML:n puolella. Käyttöliittymä kuitenkin tulee suunnitella lopputuloksen perusteella, eikä perustuen siihen mikä on HTML:llä luonnollista. HTML:ä ei kuitenkaan lueta sellaisenaan, eikä useimmiten enää kirjoitetakaan.
Lisäksi vähänkään monimutkaisempi layout tai käyttöliittymä vaatii eri selaimille tehtyjä säätöjä. Olisi ihan kiva tietää minkälaisia sivuja esim. Grez on toteuttanut, jos ei ole törmännyt edes javascriptin kanssa ongelmiin.
Net Applicationsin mukaan IE7:n markkinaosuus ohitti IE6:n reilu vuosi julkaisusta, marraskuussa 2007, ja tällä hetkellä jakauma on n. 45% / 20%. Saa siis todennäköisesti odotella tovin IE7:n unohtamista, jos sen osuus on parin vuoden päästä vielä tuo 20%.
A1A kirjoitti:
Olisi ihan kiva tietää minkälaisia sivuja esim. Grez on toteuttanut, jos ei ole törmännyt edes javascriptin kanssa ongelmiin.
No en nyt sano että olisin vaan koodannut suoraan javascriptin ja se olisi heti toiminut kaikissa selaimissa, mutta ei minulle tuota harmaita hiuksia jos huomaan että homma x ei toimi selaimessa y (joka ei aina ole IE) ja sitten pohdin ja/tai googletan 5-10 minuuttia ja korjaan sen.
Javascriptissä on onneksi erittäin hyvät keinot tarkistaa onko jokin toiminto tuettu ennen kuin sitä yrittää käyttää ilman että tarvitsee alkaa kaivelemaan selainta ja tai selaimen versionumeroa ja alkaa siitä sitten arpomaan.
Ehkä jossain välissä olisi keskustelun sijasta hyvä siirtyä esimerkkeihin, niin tästä voitaisiin paremmin hyötyäkin? Minulle tuli nyt tunne, että jos kirjoitan, niin voi olla että olisi mahdollisesti puhuttu vähän eri asiasta (etenkin liittyen virkkeeseen "HTML:ää ei kuitenkaan lueta sellaisenaan, eikä useimmiten enää kirjoitetakaan").
Toisaalta myös haastaminen olisi kiva juttu, minua on jo useamman vuoden kiehtonut mahdollisuus siitä, että minulle lykättäisiin eteen valmiiksi suunniteltu upean näköinen "mahdoton" leiska – sillä rajoituksella tosin, että lähtökohtaisesti se on kuitenkin suunniteltu joustavaksi nettisivuksi eikä esim. flashikikkareeksi tai vaan yhdeksi ruuduksi. Lisäksi olisi erittäin hyvä olla mahdollisuus päästä käsiksi kuvan jokaiseen tasoon eikä saada valmiiksi leikattuja palasia, jotka leiskan tekijä on olettanut olevan tarpeen. Tällä hetkellä omat rajalliset ja oppimalla opitut kykyni graafisella puolella rajoittavat enemmän kuin HTML ja CSS.
Mulla taas on niin päin että kotisivut ei näy oikein Firefoxilla, mutta IE6:lla näkyy. validia on :D
Tutkin nopeasti poikkeamat. Sivusi on taitettu taulukoilla, mutta IE6 näyttää silti väärin (miksi ylipäätään laitat soluja joiden leveys on 0% ja sitten laitat sinne kuvan, jota IE6 ei näytä noudattaessaan leveysasetusta, jota ei tulisi noudattaa?). Se että IE6 näyttää halutun lopputuloksen ei tarkoita sitä, että IE6 näyttää oikein. Validius taas ei tarkoita sitä, etteikö muita virheitä ole: se vain kertoo että kirjoittamassasi koodissa ei ole syntaksivirheitä.
IE8 näyttää sivun samalla tavalla kuin Chrome, Firefox, Opera ja Safari.
Taisin ymmärtää vähän turhan jyrkästi tuon JS:n ongelmattomuuden, kyllähän ne kaikki ratkeaa, mutta jos vertaa muuhun ohjelmointiin (vaikka PHP tai C++) on saman asian tekeminen kahdella eri tavalla ylimääräinen vaiva. Esimerkkinä vaikka hiiren sijainnin selvittäminen, ei siinä nyt montaa minuuttia mene, mutta ylimääräistä koodia kuitenkin.
HTML taas menee ainakin minulla väkisin sekavaksi, jos haluaa esim. pyöreitä reunoja tai varjostuksia muuttuvan kokoisille alueille, tai vaikka lomakkeen jossa kentän otsikko on vasemmalla aina tietyn levyinen oli oikealla puolella sitten tekstikenttä, nappi, yksi checkbox, joukko checkboxeja tai mitä hyvänsä. Ei onnistu ainakaan minulta pelkillä formin tageilla vaan divejä lisäilen.
Mutta en tiedä sitten puhutaanko eri asiasta. Eihän noida ylimääräisiä divejä tietenkään sisältöön sotketa, vaan jos sisältö on HTML:ä se pidetään siistinä ja lomakkeet esim. omassa XML-muodossaan.
A1A kirjoitti:
mutta jos vertaa muuhun ohjelmointiin (vaikka PHP tai C++)
No ei se nyt PHP:lläkään hirveän kivaa olisi tehdä koodia, jonka pitäisi toimia kaikissa versioissa PHP3:sta PHP5:een. Ja ne on kuitenkin kaikki saman valmistajan tekeleitä.
Sitä paitsi millä tahansa kielellä koodatessa tulee välillä tilanne, että koodi ei toiminutkaan ekalla kerralla ja sitten pohditaan ja/tai googletetaan hetki.
Yksi tapa tyylitellä lomakkeita vaivattomasti ilman taulukkoa ja ilman divejä:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Lomake</title>
<style type="text/css">/*<![CDATA[*/
form,fieldset,fieldset dl,fieldset dt,fieldset dd {
border: 0;
margin: 0;
padding: 0;
}
legend { display: none; }
label,button,input[type=button] {
cursor: pointer;
}
fieldset p,fieldset dl.radio {
margin: 5px 0;
padding: 0;
width: 100%;
}
fieldset p:after,fieldset dl:after {
clear: both;
content: '';
display: block;
}
fieldset p.text label,fieldset p.textarea label,fieldset dl.radio dt {
display: block;
float: left;
width: 10em;
}
fieldset p.text textarea,fieldset dl.radio dd {
display: block;
margin-left: 10em;
}
/*]]>*/</style>
</head>
<body>
<form action="" method="post">
<fieldset><legend></legend>
<p class="text">
<label for="nimi">Nimi:</label>
<input type="text" id="nimi" name="nimi" value="" />
</p>
<p class="textarea">
<label for="teksti">Teksti:</label>
<textarea id="teksti" name="teksti" cols="40" rows="8"></textarea>
</p>
<dl class="radio">
<dt>Valitse:</dt>
<dd><label><input type="radio" name="valinta" value="1" /> Yksi</label></dd>
<dd><label><input type="radio" name="valinta" value="2" /> Kaksi</label></dd>
<dd><label><input type="radio" name="valinta" value="3" /> Kolme</label></dd>
</dl>
</fieldset>
<p><button>Lähetä</button></p>
</form>
</body>
</html>
Class on vain sen vuoksi, ettei eräät selaimet ymmärrä noita input[type=button] -juttuja...
Merri kirjoitti:
fieldset p.text textarea
Ei taida osua mihinkään elementtiin tuo sääntö? :)
Kiijotus- tai kumitusviihe, joten sen voi siis poistaa. Lopputulos entistäkin yksinkertaisempi.
Merri kirjoitti:
Yksi tapa tyylitellä lomakkeita vaivattomasti ilman taulukkoa ja ilman divejä:
Olet sitten vaihtanut divit p:ksi, joka on minusta semantiikaltaan ihan käsittämätön valinta tuohon kohtaan. Melkein yhtä häröä toimintaa kuin taulukkotaitto. Ei todellakaan ole divia fiksumpi tehdä tuota noin. Ainoa järkevä syy tuolle p-tagin liikakäytölle lienee diviä lyhyempi kirjoitusasu. Toki tärkeä arvo sekin, kun oikeasti töitä paiskii.
p on tekstikappale. Eli sisältä pitäisi löytyä tekstikappale. Ei minusta tässä mitään kappaletta ole:
<p class="text"> <label for="nimi">Nimi:</label> <input type="text" id="nimi" name="nimi" value="" /> </p>
Minun ehdotukseni div/p/table-tagin tilalle tuossa on fieldset. Se on se lomakkeen elementtien ryhmittelyyn varattu tagi. En tosin ole sata varma, mitä W3C sanoo sisäkkäisistä fieldseteistä. Ainakaan validaattori ei älähtänyt. Jos ei ole sallittu, niin sitten div mieluummin kuin p. Div sentäs on nimenomaan ulkoasua varten olemassa. Toki se on vielä diviäkin pidempi kirjoittaa, fieldset ;-)
Eihän tuossa tarvita edes rumasti kahta sisäkkäistä fieldsettiä. Merrin esimerkissä on fieldset "koristeena", joten sen voi poistaa ja laittaa fieldsetit vain tuonne, minne niitä oikeasti tarvitaan. Eli puhtaasti lomakkeelle tarkoitetuilla elementeillä päästään ihan samaan lopputulkseen (CSS:ä en jaksanut hinkata, varmaan rikki kun hätäisesti muuttelin :):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Lomake 2</title>
<style type="text/css">/*<![CDATA[*/
fieldset {
border: 0;
padding: 0;
}
label, button, input[type=button] {
cursor: pointer;
}
form fieldset {
margin: 0;
padding: 5px 0;
width: 100%;
}
form fieldset:after {
clear: both;
content: '';
display: block;
}
form fieldset.text label, form fieldset.textarea label, form fieldset.nro legend {
display: block;
float: left;
width: 10em;
}
form fieldset.text textarea, form fieldset.nro label {
float: left;
clear: both;
display: block;
margin-left: 10em;
}
/*]]>*/</style>
</head>
<body>
<form action="" method="post">
<fieldset class="text">
<label for="nimi">Nimi:</label>
<input type="text" id="nimi" name="nimi" value="" />
</fieldset>
<fieldset class="textarea">
<label for="teksti">Teksti:</label>
<textarea id="teksti" name="teksti" cols="40" rows="8"></textarea>
</fieldset>
<fieldset class="nro">
<legend>Valitse:</legend>
<label><input type="radio" name="valinta" value="1" /> Yksi</label>
<label><input type="radio" name="valinta" value="2" /> Kaksi</label>
<label><input type="radio" name="valinta" value="3" /> Kolme</label>
</fieldset>
<fieldset>
<button>Lähetä</button>
</fieldset>
</form>
</body>
</html>Mikäli käyt kurkkimassa W3C:n dokumentteja ja tarjoamia esimerkkejä, huomaat että niissä on käytetty tekstikappaleita lomakkeissa samaan tapaan. Fieldset taas on tarkoitettu useamman kentän ryhmittelyä varten yhtenäiseksi kokonaisuudeksi, mihin nimikin viittaa. Legend on varsinainen ongelmien laari: sen tyylittely on rajoitettua ja selaimilla ei ole kovinkaan yhteneväistä ymmärrystä siitä, mitä tyylejä siihen voi käyttää. En ole selainten viimeisimmillä versioilla kokeillut, mutta tuossa pari vuotta sitten tilanne oli lähellä surkuhupaisaa.
Sisäkkäiset fieldsetit ovat sallittuja. Fieldset taas ei ole minulla koristeena: se ryhmittelee yhteen kuuluvat kentät kokonaisuudeksi. Samalla sivuvaikutuksena saan myös lisää vaihtoehtoja tyylittelyä varten. Yksi vähemmän tiedetty tieto on, että fieldset on sallittu myös lomakkeen ulkopuolella: sillä voi ryhmitellä myös kokonaisia lomakkeita.
Yksi virheellinen info ja tapa minulle tosin on jäänyt: legendin pakkosijoittaminen. Minulle oli jäänyt muistikuva, että legend olisi fieldsetissä pakollinen. En enää millään muista sivua, jossa luin aiheesta. Todennäköisesti se liittyi käytettävyyteen ja oli ehkä ennemminkin vahva suositus aina sijoittaa se fieldset-elementin sisään, vaikka se olisi tyhjä. Tämä sitten oli sekoittunut päässäni jossain välissä siihen, että legend olisi myös validoinnin kannalta pakollinen, vaikkei se ole.
Nettistandardien hienous ja huonous on se, että niissä on valinnan varaa valita, miten niitä käyttää. Tässäkin keskustelussa on lähinnä käyty lävitse sitä, miksi jotkut asiat ovat haitaksi (esim. vaikka taulukkotaitto tai ongelmien korjaaminen diveillä). Jos nyt mietit siitä, mikä on ongelma tekstikappaleen käytössä lomake-elementin sisällä, niin sitä on hyvin vaikea perustelemalla perustella: valtaosa lomake-elementeistä on tekstisisältöä. Joihinkin asioihin on hyvin vaikea sanoa, että vain tämä on oikea tapa toimia. Siksi muotoilinkin viestini "Yksi tapa tyylitellä lomakkeita vaivattomasti" sen sijaan että olisin yrittänyt väittää, että se olisi ainoa oikea tapa tehdä ja tyylitellä lomakkeita.
Muoks!
Toivottavasti HTML5:ssä on tarkempia määrityksiä tältäkin osin.
Nyt toteutin pienen sivuston ulkoasun, jolla harjoittilin floatin käyttöä, sekä CSS-määreitä jne... Eli kommenttia voisi antaa toteutus tavasta (eli kannattaako näin tehdä). Tän pitäis toimia ainakin FireFoxilla ja Chromella sekä IE7:ssa ainakin bugittaa!
<html>
<head>
<title>Float-testi</title>
<style type="text/css">
body {
font-family: arial;
font-size: 12px;
background-color: #999;
}
#left,#right {
border: 1px solid #000;
padding: 0.7em 0.5em;
text-align: justify;
min-height: 200px;
}
#top {
border: 1px solid #000;
border-bottom-color: #990000;
width: 625px;
height: 30px;
margin: 0px;
text-align: center;
color: #fff;
padding: 0.5em 0em;
background-color: #990000;
}
#left {
width: 200px;
background-color: #F2F2F2;
float: left;
}
#right {
width: 400px;
margin-left: 213px;
background-color: #fff;
}
#bottom {
border: 1px solid #000;
border-top-color: #990000;
background-color: #990000;
width: 613px;
height: 16px;
padding: 0.6em;
text-align: center;
font-size: 10px;
color: #fff;
clear: both;
}
</style>
</head>
<body>
<h1 id="top">Otsikko</h1>
<div id="left">Tällä palstalla on kaikki se teksti, mikä näkyy ruudun vasemmalla puolella!</div>
<div id="right">Kun taas tällä on kaikki oikeanpuolinen teksti...Tämä taas on varsin turhanpäivästä tekstiä, jolla testataan ulkoasun toimivuutta!</div>
<div id="bottom">Webdesign by Triton</div>
</body>
</html>Laita alkuun DOCTYPE, vaikka HTML 4.01 Strict, äläkä laita sen DOCTYPEn eteen mitään ylimääräistä, ei rivinvaihtoja, välilyöntejä tai UTF-8 -tiedostoa tehdessä BoMia. Sitten saat IE:n standarditilaansa.
Tein tossa jo toista ihan kunnon ulkoasua, mutta Chromen ja IE7:kan kanssa tuli ongelmia... Eli Chrome renderöi sivua niin, että alapalkki on n. 3px vajaa, mitä olen FireFoxilla asettanut. Ja IE:llä sellasta ongelmaa, että kun ulkoasussa on wrapperin sisällä kaksi diviä, mitkä on floatilla asetettu vierekkäin, niin niiden divien välissä on aivan liian monta pikseliä, mutta jos laitan ne vierekkäin, niin toinen diveistä siirtyy toisen alle. Onkohan nämä mahdollisesti kierrettävissä?
Aihe on jo aika vanha, joten et voi enää vastata siihen.