Moikka tännekkin vuosien tai kuukausien takaa! ;)
Olen tässä muutamia nettisivustoja suunnitelleena tullut siihen tulokseen että tablejen käytössä ei oikeastaan ole mitään vikaa ulkoasua suunnitellessa. Syyt tähän tulokseen taas ovat seuraavat:
1. Selaintuki
On tärkeää että yksi koodinpätkä tukee montaa eri selainta mahdollisimman vähillä "selain X-only"-koodilla.
2. Dynaaminen sisältö
Tablejen kanssa vääntäessä sisällöstä saa monta kertaa dynaamisemman, yhäkin niin, että se tukee myös muita selaimia.
3. CSS-hack
Divejä käyttäessä törmää melkein aina tähän, pitää käyttää erilaisia margin-hackejä jotta saa haluamansa tuloksen. Tuhoaa lähestulkoon aina layoutin vanhemmilla selaimilla.
Tulos
Tablet ovat yksinkertaisia, helppoja ja toimivia. Divien käyttö on monimutkaista ja rikkoo lähestulkoon aina selaintuen.
Haaste
Heitänkin nyt divi-fanaatikoille pienen haasteen. Haasteena on tehdä pienehkö layout ja säännöt ovat seuraavat:
- vain divejä, tottakai ;)
- mahdollisimman vähän yksittäisiin selaimiin pohjautuvaa koodia (if IE do shit etc.)
- ei css-hackeja (paitsi jos ne toimivat määritetyillä selaimilla, mm. IE6 ei tue negatiivisia margineita)
- sivun tulee luottaa täysin XHTML+CSS (ei JavaScript, ei PHP)
Layout:
http://kyto.xellnet.fi/layout_haaste.png
Määritelmät:
Standardit: XHTML 1.0 Strict ja CSS 2.1
Selain-toimivuus: IE6+, Firefox (3.5.0+), Opera (uusin) ja Safari (uusin)
Sivu on keskitetty divillä jonka leveys on 700px ja jonka korkeus pitää olla aina joko selaimen ikkunan kokoinen tai suurempi (huom. dynaaminen minimikoko).
"Päädivin" sisäiset divit
sisalto:
- leveys on maksimi mahdollinen ottaen huomioon vieressä olevat divit
- korkeus on aina sivun pohjaan asti (riippumatta selaajan resoluutiosta), mutta jos sisältöä on enemmän pitää venyä
a:
- leveys on 25% (annan anteeksi jos ei onnistu prosenteilla)
- korkeus on sisällön tarvitsema
b:
- leveys on sama kuin a:lla
- korkeus on sisällön tarvitsema
c:
- leveys on 100%
- korkeus on sisällön tarvitsema
Kuulostaako jo hankalalta? Lisätääs pieni jippo, divejen logo, sisalto, a, b ja c reunat pitää muodostua kahdeksasta eri kuvasta (kulmat+sivut).
Löytyykö osaavia divi-fanaatikkoja? Ehkäpä itsekkin ryhdyn siihen jos joku tämmöisen onnistuu vetämään. En tätä varsinaisesti itse tarvitse, saan saman tehtyä tablella miljoona kertaa helpommin (ehkä koska käytän niitä enemmän).
Toivottavasti ei mitään unohtunut.
JoonasK kirjoitti:
Olen tässä muutamia nettisivustoja suunnitelleena tullut siihen tulokseen että tablejen käytössä ei oikeastaan ole mitään vikaa ulkoasua suunnitellessa. Syyt tähän tulokseen taas ovat seuraavat:
Muutama hassu, merkityksetön "syykö" mitätöivät kaikki ne muut syyt joita tuskin olet edes huomioinut?
HTML ilman tagien semanttista merkitystä olisi merkintäkielenä lähinnä turha; samaan lopputulokseen pääsisi paljon helpommin määrittelemällä omat XML-DTD:t. Tämän vuoksi jo pelkästään ei-taulukollisen sisällön esittäminen HTML-taulukoilla tekee sivustasi epäyhtenevän (X)HTML-standardin kanssa, etkä näin edes täytä oman "haasteesi" vaatimuksia.
Vähällä vaivalla aikaansaamaasi "superhienoa" ulkoasua arvostaa yllättäen vähemmän, kun sivun itse sisältöön ei ilman graafista selainta pääse käsiksi. Jos sellaista sisältöä siis on.
JoonasK kirjoitti:
Määritelmät:
Standardit: XHTML 1.0 Strict ja CSS 2.1
Selain-toimivuus: IE6+,
IE:n mikään versio ei tue XHTML:ää, joten olisi kohtuutonta vaatia tällaisen yhdistelmän täyttä toimivuutta.
eq kirjoitti:
JoonasK kirjoitti:
Määritelmät:
Standardit: XHTML 1.0 Strict ja CSS 2.1
Selain-toimivuus: IE6+,IE:n mikään versio ei tue XHTML:ää, joten olisi kohtuutonta vaatia tällaisen yhdistelmän täyttä toimivuutta.
Riittää ihan että sivusto näyttää samalta IE:llä.
eq kirjoitti:
Muutama hassu, merkityksetön "syykö" mitätöivät kaikki ne muut syyt joita tuskin olet edes huomioinut?
HTML ilman tagien semanttista merkitystä olisi merkintäkielenä lähinnä turha; samaan lopputulokseen pääsisi paljon helpommin määrittelemällä omat XML-DTD:t. Tämän vuoksi jo pelkästään ei-taulukollisen sisällön esittäminen HTML-taulukoilla tekee sivustasi epäyhtenevän (X)HTML-standardin kanssa, etkä näin edes täytä oman "haasteesi" vaatimuksia.
Vähällä vaivalla aikaansaamaasi "superhienoa" ulkoasua arvostaa yllättäen vähemmän, kun sivun itse sisältöön ei ilman graafista selainta pääse käsiksi. Jos sellaista sisältöä siis on.
Tuskinpa ketään nettisivuja selailee ilman graafista selainta muutenkaan, hakubotit yms. ei minua pahemmin kiinnosta, haluan että sivustolla kävijät näkevät sivun samanlaisena selaimesta riippumatta. Eikä mua sinänsä kiinnosta että sivustoni on semanttisesti tehty, haluan vain koodin olevan validia.
En myöskään pyytänyt sinulta saarnaa, jos haluat todistaa rakkaiden diviesi pystyvän hyvin toimivan ja dynaamisen sivuston luomiseen ota haaste vastaan. Muuten voit lopettaa postailun. Mielipiteesi on omasi, mutta ei jakseta väitellä siitä, haluan vain esimerkin että voin itsekkin jakaa saman vision divien toimivuudesta.
Haasteesi on vääristynyt. Aloitat lähtökohtaisesti siitä, että taulukkotaitto täytyy vääntää yksyhteen diveillä. Toisaalta vertailu suoraan diveihin on jo sinällään heikoilla kantimilla: (ainakin) minä vältän divien käyttöä mahdollisimman paljon, sillä en pidä elementtien sekametelisopasta. Haluan selkeää ja luettavaa koodia, ja haluan sitä mahdollisimman vähän, jotta se olisi helposti hallittavaa. Tämä tavoite onnistuu CSS-taitolla ja tämän takia sitä käytetään. Elementtien semantiikkakaan ei ole pahasta, lista sinne missä lista on paras tapa ryhmitellä elementit (HTML 5:ssä on lisää erilaisia listaelementtejä mm. navigaatiota varten, muiden parannuksien lisäksi).
Haasteessasi asetat standardiksi CSS 2.1:n, mutta seuraavaksi määrittelet minimiselaimeksi IE6:n, joka ei noudata CSS 2.1 -standardia. Tämä jättää tulkinnanvaraiseksi sen, kumpi on tärkeämpi (oletusarvoisesti ensin mainittu on tärkeämpi). Toisaalta sana toimivuus on tulkinnanvarainen sekin: minulle toimivuus tarkoittaa sitä, että asiat ovat suhtkoht paikallaan selaimella kuin selaimella ja että sivustoa voi käyttää. Kävijälle ei ole paskan vertaa väliä sillä, näyttääkö sivusto pikselilleen samalta kaikilla selaimilla, koska käyttäjät yleensä käyttävät vain yhtä ainutta selainta. Ja yleensä jos käyttäjä käyttää IE:tä, ei käyttäjä selvästikään välitä muusta kuin siitä, että sivua voi käyttää ja että sieltä voi löytää sen mitä tarvitsee. Vain nörttikäyttäjät välittävät sellaisista teknisistä asioista kuin sivun skaalautuminen aina vähintään koko sivun korkeudelle. Eikä heistäkään välttämättä kovin moni.
Teknisiä idioottimaisuuksia tuossa asettamassasi haasteessa on mm. se, että asetat sivun minimileveydeksi 700 pikseliä ja sitten määrität tuon 25% sisemmälle elementille. Ei tuollaisessa ole mitään järkeä: joko valitaan täysdynaaminen linjaus myös leveyssuuntaan, jotta prosenttileveydellä on edes teoriassa jotain merkitystä, tai sitten käytetään niitä pikseleitä. Tästä päästään kahdeksan kuvan vaatimukseen: ei ole järkeä toteuttaa kahdeksan kuvan dynaamista reunamekanismia jos leveys on aina vakio. Kolmellakin kuvalla pärjää, tai kokonaan ilman jos tarvitsee vain kulmien pyöristyksen! Muista, IE:n käyttäjä ei välitä tämmöisistä pienistä yksityiskohdista, ja kaikki muut selaimet tukevat jo CSS:n pyöristyksiä. Korkeintaan joku selaimensa vaihtava saattaa huomata, että "hei tää sivu näyttää jotenkin paremmalta tällä!"
Kun taulukkotaitosta luopuu, niin täytyy vain osata irroittaa mielensä tietystä teknisestä kikkailusta, joka taulukoihin liittyy:
- Ulkoasukuvien käytöstä IMG-tagien voimin voi luopua (huomaa ero sisällön kuviin).
- Leikatuista ulkoasukuvista voi luopua.
- Pakotetusta taulukkomallista voi luopua. Leiskan voi asetella paljon vapaammin (vaatii harjoitusta ja avointa mieltä).
CSS-taitossa tarvitsee vähemmän kuvia ja yhä useampi asia löytyy kätevästi yhdestä paikasta. Koodi on ylläpidettävämpää, koska HTML-koodin ei tarvitse sisältää ulkoasua, jolloin saman asian kierrättäminen toiseen paikkaan on myöskin helpompaa. Oikeiden elementtien käyttö oikeaan tarkoitukseen tekee myös omalla tavallaan tyylittelystä ja sivuston persoonallisemman ilmeen tekemisestä helpompaa (mm. aivan liian usein huomiotta jäävät, mutta tärkeät kappaletagit).
Mitä tulee vielä vanhoihin selaimiin, niin en todellakaan enää välitä muusta kuin siitä, että sivu on IE6:lla ja IE7:llä katsottava ja käytettävä, jos sivu näyttää paremmalta uudemmalla selaimella niin sitten näyttää. Olen luopunut tämän vuoden aikana kokonaan selainkohtaisista korjauksista, kaikki selaimet saavat saman CSS:n. JavaScriptissä annan jQueryn hoitaa valtaosan yhteensopivuudesta. Jos sivu ei toimi, niin sitten toki teen tarvittavia korjauksia, mutta en lisää erillisiä selainkohdistettuja tyylejä tms. – ja jos vikaa ei sitten näinkään voi korjata, niin vallassaan. Tähän ei kuitenkaan ole tullut vielä jouduttua, kaikki on saatu toimimaan. Tässä toki auttaa se, että tunnen IE:n oikut varsin erinomaisesti.
Tässä on heikohkoa esimerkkiä CSS-taitosta, jollaista on vaikeampi toteuttaa järkevästi puhtaalla taulukkotaitolla. Klikkaamalla sivua voi vaihtaa valikon puolta. Sisältöalueelle siirtyminen tuo tekstiä lisää, paitsi IE6:lla (vajaa :hover-tuki). Sivu on keskitetty, paitsi vanhemmilla IE:n versioilla (display: table -tuki puuttuu).
Vähän parempana (ja viimeistellympänä) esimerkkinä mennee Settlers II.net, se käyttää mm. kaipaamiasi dynaamisia reunoja, olkootkin että sivu on jälkikäteen pakotettu 770px leveyteen. Dynaamisuuden voi paremmin erottaa käyttämällä esimerkiksi Firebugia ja vaihtamalla #document1:n leveyttä. Sivu on XHTML 1.0 Strict, tarjoilee saman CSS:n kaikille, ei sisällä CSS-hackeja ja toimii ihan kelvosti IE6:llakin. CSS-tiedosto on verrattain lyhyt. Lyhyeksi jäävän sivun ongelma on korjattu riittävällä sisällön määrällä. Elementtien läpinäkyvyyttä on käytetty runsaasti hyväksi taustakuvien muodossa. Bonuksena epä-IE -selaimilla sivu näyttää hieman paremmalta lisättyine varjostuksineen ja pyöristyksineen. En voi korostaa kylliksi, että tavallinen kävijä ei tätä asiaa huomaa. Hyvin suunniteltu ulkoasu näyttää hyvältä heikommankin CSS-tuen selaimella. Ja tämä on ollut yksi CSS:n tavoite ja mihin CSS on myös kehittynyt, ja se on tärkeä asia huomioida CSS-taitossa.
Olen otettu, että joku ylipäätänsä teki jotain eikä vain ruikuttanut miten huono ihminen olen. Tekemäsi esimerkki toimii hyvin, mutta sivuntekijän kannalta tablejen luominen on monta kertaa helpompaa. Joudut mm. jatkuvasti käyttämään display, float ja position-määritelmiä jotka eivät ikinä toimi kunnolla, siis ainakaan kun itse koitan niiden kanssa työskennelle. Ehkäpä se on omien taitojeni puutetta. Osaisitko yhtään valaista näiden toimintaa divien kanssa säädettäessä?
Koen itse myös ongelmia floattien kanssa. Luultavasti kyse on puutteista taidoissani.
Olen kuitenkin samoilla linjoilla Joonaksen kanssa, että taulukolla leiskan tekeminen tuntuu helpommalta. Tämä voi myös olla (ja luultavasti onkin) tottumuskysymys. Olen nimittäin melkein poikkeuksetta tehnyt kaikki ulkoasut taulukkoon.
Aina silloin tällöin yritän rikkoa kaavaa, mutta törmään juuri johonkin ihmeelliseen float-härpäkkeeseen, jonka takia koodi ei toimi kuten haluaisin. Näissä tapauksissa olen yleensä todennut, että on helpompaa pitäytyä tableissa.. :-/
Nyt kun tiedän, että firefoxin developer toolbarilla (tai joku melkein sen niminen) onnistuu css:n reaaliaikainen muokkaaminen, niin ehkä voisi harjoitella tuota floatin käyttöä ja jopa oppia rakentamaan ulkoasut ilman tableja...
Helpoimmaksi huomaamani tapa kellutuksen kanssa on, että:
1) Määritä kiinteä pikselileveys kellutetulle elementille.
2) Sen viereen tulevalle elementille määritä marginaalia. Muista huomioida sisennys (padding).
3) Yleensä on parempi jättää leveys määrittämättä.
4) Määrittämällä pseudo :after-elementin CSS:llä saa floattielementin isäntäelementin venymään vähintään floattielementin mittaan.
HTML:
<div id="isanta">
<div id="floatti">
</div>
<div id="sisalto">
</div>
</div>CSS runsaiden kommenttien kanssa:
/* tähän elementtiin voidaan määrittää mm. jatkuva taustakuva! */
#isanta {
position: relative; /* absoluuttiset elementin tämän elementin mukaisesti */
width: 100%; /* IE<8:n ":after", selainbugin hyväksikäyttö hyödylliseen */
}
/* IE-insider: leveyden/korkeuden määritteleminen kytkee sisäisen hasLayoutin päälle,
joka muuttaa elementin käyttäytymistä! Vanhan IE:n toiminta on aika kikkakoodattu
toimimaan edes jokseenkin CSS:n sääntöjen mukaan, ja epäonnistuu siinä pahasti */
/* tämän tarkoitus on säästää turha tyhjän elementin määritteleminen HTML:ään */
#isanta:after {
clear: both; /* jos kellutus pidempi, pidenna isanta sen loppuun */
content: ''; /* luo tyhjan pseudon */
display: block; /* maarittelee lohkoelementiksi */
}
/* kellutettu elementti vasempaan laitaan */
#floatti {
float: left;
width: 250px;
}
/* marginaalia, jottei kellutus vaikuta sisaltöelementin lapsielementteihin */
#sisalto {
margin-left: 250px;
}Tähän liittyy pari asiaa, jotka kannattaa huomioida: #floatti ja #sisalto ovat todennäköisesti aina eripituisia. Niihin ei kannata määrittää jatkuvaa taustakuvaa, jos siis tarkoitus on saada tausta jatkumaan yhtä pitkänä kuin näistä korkeampi. Sen sijaan taustakuva kannattaa määrittää #isantaan. Lisäksi jos halutaan dynaaminen leveys ja jatkuva taustakuva molemmille reunoille, niin tarvitaan vielä jonkin ulomman elementin apua taustakuvan kanssa. Tämä kuulostaa monimutkaisemmalta kuin on :) Lisäksi CSS3 tuo mukanaan useamman taustakuvan tuen yhteen elementtiin, joten jossain vaiheessa tähänkin tarvittavien elementtien määrä vähenee!
Vika siis ei ole diveissä, vaan CSS-tuen hitaassa kehityksessä selaimissa. Myöhemmin kuin IE7 ja IE6 ovat jo täyttä historiaa, niin voitte rauhassa käyttää display: table; -määritystä. Kellutuksen opettelu ei kuitenkaan ole pahasta!
Mitä tulee position-määrittelyihin, niin jakosuhde relativen ja absoluten välillä kannattaa ehdottomasti huomioida. Yleensä relativen kanssa ei kannata tehdä mitään kamalan erikoisia juttuja, vaan määrittelee sen vaan jollekin elementille. Tämän jälkeen absoluuttisesti sijoiteltavat lapsielementit noudattavat tämän relative-elementin rajoja, esim. left ja bottom 0, width 100% ja vähän korkeutta saa absoluuttisen elementin sijoittumaan relative-elementin alalaitaan. Tälle voi jättää tilaa määrittämällä relative-elementtiin alasisennystä (padding). Pikselit ovat helpoimpia.
Toinen yleishyödyllinen kellutus liittyy valikoihin. Tässä sille yleispätevä ja erittäin vanhaselain yhteensopiva pätkä:
<ul id="valikko">
<li><a href="">Yksi</a></li>
<li><a href="">Kaksi</a></li>
<li><a href="">Kolme</a></li>
<li><a href="">Neljä</a></li>
</ul>
#valikko {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#valikko:after {
clear: both;
content: '';
display: block;
}
/* IE<8:n takia kannattaa tehdä näin, muuten tulee outouksia IE:llä
... ja näin kannattaa tehdä vaikkei näitä kelluttaisi! */
#valikko li {
display: inline;
float: left;
margin: 0;
padding: 0;
}
#valikko a {
display: block;
margin: 0 1px;
padding: 5px;
}Toisaalta tyylit voi määritellä myös vaikkapa näin:
#valikko {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
#valikko li {
display: inline;
margin: 0;
padding: 0;
}
#valikko a {
display: inline-block;
margin: 0 1px;
padding: 5px;
}Tämä on hieman uudempi tapa, sillä Firefox 1 ei vielä tukenut display: inline-block – keskitys onnistuu nätisti!
Näissä molemmissa tavoissa on myös huomioitavana, että valikon korkeuteen voi vaikuttaa line-heightiä käyttäen! Line-height lienee yksi sellaisia CSS-määrityksiä, joiden arvoa ei yleensä huomata (aloittelevien toimesta). Sen voi kuitenkin yhdistää muidenkin tyylien kanssa, mm. vertical-align, jolloin pääseekin vaikuttamaan jo aika paljon siihen, miltä lopputulos näyttää.
Loppukanettina todettakoon, että minulla meni noin kolme vuotta päästä kunnolla sisään CSS-taittoon. Firefox oli minulle se työkalu, joka auttoi paljon. Vielä 2003 käytin taulukkotaittoa, 2004 aloitin kiroilut, 2005 sain aikaiseksi jo aika hyvin toimivan ulkoasun (mozilla.fi), 2006 eteenpäin olen vain syventänyt ymmärrystäni. IE:n suhteen en ole enää pariin vuoteen oppinut mitään uutta, lähinnä vain saanut todeta IE8:n vihdoin toimivan Oikein.
Taulukkotaiton oppimiseen minulla muuten meni myös kolmisen vuotta, tosin siinä pitää huomioida modeemiaika.
Muoks!
Ai joo, ja kannattaa kysellä kun tulee ongelmia. Olen itse hyvä oppimaan pelkällä kokeilulla ja netti on lähinnä toiminut referenssinä, tosin hyvien artikkeleiden lukeminen ei ole pahitteeksi enkä googlettamisessakaan kovin huono ole. Sen kuitenkin ymmärrän, ettei tämä päde kaikkiin, toisilla avun saaminen vaikka foorumilta auttaa paljon nopeammin. Lisäksi esim. minulla on runsaasti työkalupakissa valmiita ratkaisuja moniin ongelmiin, kuten vaikkapa lomakkeen asettelu ilman taulukoita.
Mieleeni sattui juolahtamaan vierekkäiset divit, miten vierekkäisiä divejä voitaisiin käyttää isäntä divi-elementin sisällä siten, että vasemmaisin on vasemmalle alignattu, keskimmäinen keskelle ja oikeammaisin oikealle? Miten tämä taas käyttäytyy mm. IE6:n kanssa?
HTML:n järjestyksessä käy niin, että sivummaiset elementit on määritelty ensin ja viimeisenä keskimmäinen. Sivuelementit on kellutettu ja keskimmäistä ei. Keskimmäisellä sen sijaan on marginaalit molemmassa reunassa. IE6:lla on nimenomaan ongelmia sen kanssa, jos on paljon kellutettuja elementtejä peräkkäin, koska se on hieman yliherkkä pudottamaan kellutetun elementin alemmas kuin pitäisi tilan loppuessa + bugien takia selain välillä laskee ylimääräisiä pikselejäkin kaiken lisäksi (voi tulla ~kolme pikseliä täysin selittämätöntä "marginaalia", asian voi onneksi korjata).
<div id="isanta">
<div id="valikko"></div>
<div id="mainokset"></div>
<div id="sisalto"></div>
</div>/* kasvata isäntäelementti vähintään kellutettujen mittaan, IE6 & IE7 */
#isanta {
width: 100%;
}
/* kasvata isäntäelementti vähintään kellutettujen mittaan, kaikki muut */
#isanta:after {
clear: both;
content: '';
display: block;
}
#valikko {
float: left;
width: 200px;
}
#mainokset {
float: right;
width: 200px;
}
#sisalto {
margin: 0 200px;
}Ja kuten viimeksi, kaikki nämä elementit ovat todennäköisesti eri pituisia, taustakuvan taakka menee aina isännöiviin elementteihin.
Kiitoksia paljon! :)
Vielä kysymys liittyen haaste-vastaukseesi ( http://kyto.xellnet.fi/vastahaaste_JoonasKoolle.
Pystyisikö navigaatio-div toimimaan sisalto-divin sisällä siten, että kun tekstiä tulee navigaatio-divin loppuessa lisää (sen alapuolelle), teksti menisi myös tämän alapuolelle.
Toivottavasti ymmärsit.
Saa sen sillä tavalla toimimaan, poistaa vaan marginaalin ja leveysasetuksen sisällöstä. Yleensä se on vain sellainen asia, jota ei haluta, mutta se toimisi kyllä silloin kun valikko on oikealla puolella. Vasemmanpuoleisella valikolla se ei toimi niin hyvin.
Merri kirjoitti:
Saa sen sillä tavalla toimimaan, poistaa vaan marginaalin ja leveysasetuksen sisällöstä. Yleensä se on vain sellainen asia, jota ei haluta, mutta se toimisi kyllä silloin kun valikko on oikealla puolella. Vasemmanpuoleisella valikolla se ei toimi niin hyvin.
Taidat olla oikeassa en taida itsekkään haluta tota. :D
Kiitoksia todella paljon avustasi, onnistuin layoutissa aivan mahtavasti ilman tableja. Toivottavasti näin tulevaisuudessakin. :)
Muokkaus: Äh onko mitään hajua miksei vertical-align toimi noissa kolmessa vierekkäisessä divissä? Pitäs saada middle niihin mutta eivät liiku mihinkään.
Se ei toimi aivan kuten oletat sen toimivan. Taulukon soluissa vertical-align määrittää kyllä sisällön sijainnin sillä tavalla kuin olet tottunutkin, mutta muissa elementeissä se vaikuttaa inline-elementtien kuten tekstin asettumiseen rivikorkeudella. Esimerkiksi middle-asetus sekä kuvalla että tekstillä saa kuvan että tekstin keskittymään suht nätin näköisesti. Tai samalla rivillä olevat mitä erilaisemmat lomake-elementit saa keskitettyä pystysuunnassa, jos kaikille määritetään middle.
<p><img alt="" src="hymio.png" /> Teksti!</p>
/* pystykeskitä teksti (teksti on inlineä) */
p {
line-height: 25px;
vertical-align: middle;
}
/* pystykeskitä myös kuva (muuten jäävät eri tasolle; kuva on inline-elementti) */
p > img {
vertical-align: middle;
}Voit parantaa havainnollistamista määrittelemällä mm. taustavärin.
Muoks!
Ah joo, mitä taas tulee pystysuuntaiseen keskittämiseen, niin se ei valitettavasti onnistu ilman display: table; -temppuja, mutta sitten tulee vastaan se, ettei IE6 ja 7 osaa.
Sama koodi ei taida päteä tuohon kolmen vierekkäisen divin koodiin? Koitin myös display: inline; mutta ei tuntunut auttavan. Sisädivien korkeudet eivät myöskään näytä täsmäävän ja line-height vaihtaa jokaisen sisädivin korkeuden erilaiseksi.
IE6:lla tuli myös vastaan ongelma jossa vertical-align: top; ei toimi sisalto-divissä.
Ai joo, sinulla saattaa myös tulla sitten ongelmaksi marginaalit. Esimerkiksi otsikkotageilla on marginaaleja, ja mikäli isäntäelementtiin ei ole määritetty yläsisennystä, niin ensimmäisen otsikkotagin ylämarginaali siirtyy myös isäntäelementin marginaaliksi. Helpoin korjaus on siis määrittää sisennystä, tosin yleensä näin tulee tehtyäkin.
Lisäksi on toki hyvä yhtenäistää selainten välisiä perustyylin eroja määrittelemällä näitä tyylejä itse (ainakin mikäli ne häiritsevät).
Alussa oli taulukot ja sitten niitä haluttiin täydentää ja parantaa - sitten tuli divit, en nyt kyllä muista tahoa joka divit sai ajettua läpi. Ne vain tulivat.
Alussa oli HTML ja tylsät sivut, joilla teksti kulki aina vasemmalta oikealle, ylhäältä alas, koko sivun leveydeltä.
Sitten joku sai neronleimauksen käyttää taulukoita sivuntaittoon ja teksti alkoi pomppia eri kohdissa sivua siellä täällä. HTML laajentui täyttämään näitä tarpeita. Selainsota syttyi Netscapen ja Internet Explorerin välille ja nämä kaksi määrittivät monia uusia HTML-tageja. W3C seurasi osittain perässä.
Sitten tajuttiin virhe ja alettiin kehitellä yksinkertaistavaa vastinetta. Ilmestyi CSS. HTML 4:ssä huomioitiin CSS:n mahdollisuudet ja kieltä karsittiin. Haluttiin pois järkyttävän vaikeasta päivitettävyydestä ja jättisuurista HTML-sivuista.
Internet Explorer 6 julkaistiin, joka tarjosi suurinpiirtein ensimmäistä kertaa toimivan CSS-tuen, joka oli runsaasti edellä muita. Sitten kaikki muuttui. Alkoi synkkä pysähtyneisyyden aika, sillä Microsoft ei päivittänyt selaintaan viiteen vuoteen.
Lopulta ilmestyi Firefox, netin monimuotoisuus ja selainkilpailu palasi. CSS:n kehittyminen selaimissa sai uutta pontta. Kaikki ei kuitenkaan ollut vielä hyvin: W3C:n päätöksenteko takkusi eikä HTML:n ja CSS:n seuraavaa versiota kuulunut.
Tässä olemme edelleen. HTML 5 ja CSS 3 ovat tulevan vuosikymmenen juttu. Selainten tuki näille on kehittymässä ja saavuttaessaan kypsemmän vaiheen tarjoavat järkevöidyt, nykyisiä tarpeita paremmin vastaavat työkalut nettisivujen luomiseen. Uudet sisältöä paremmin kuvaavat elementit vähentävät muutoin merkityksettömien divien tarvetta.
Aihe on jo aika vanha, joten et voi enää vastata siihen.