[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Oppaan lisäsivut > I Miten luoda dynaamisia valikoita > Asemointi (jakso 5/6)

Asemointi

Aiheet

Visibility & position

Kaikissa muissa DOM/DHTML tukevissa selaimissa paitsi Netscape 4.x -selaimissa asemointi perustuu yksinomaan CSS:ään. Kunnolla tuettuja ominaisuuksia ja niiden arvoja ovat position:absolute, top ja left. Näiden lisäksi sivujen suunnittelijoiden tulee määritellä pinotaso käyttäen ominaisuutta z-index, jos suurempi arvo merkitsee korkeampaa asemaa elementtien muodostamassa pinossa. Oletus näkyvyysarvo on yleisimmin päävalikolla visibility:visible ja alivalikoilla visibility:hidden. Näitä arvoja sitten muutetaan JavaScript-koodauksella.

Jos valikoita suljetaan sisällön kautta, sekä valikon pohjaelementille että asiasisällölle tulee antaa z-index ominaisuus, jotta valikot olisivat oikeassa pinotasosuhteessa myös varsinaisen asiasisällön kanssa. Mikäli pohjatason elementille ei ole määritellä pinotasoja, mikä tahansa jäljessä tulevan asiasisällön elementti, jolle on määritelty pinotaso tulee asettaa valikon yläpuolelle. Valikkoelementin sisällä olevat pinotasot ovat tällöin suhteessa vain keskenään eivätkä suhteessa Web-sivun asiasisältöön.

Tällä tavoin määritellyt elementit eivät vaikuta millään lailla toisten elementtien asemointiin. Esim. position:absolute; top:50px; left:50px; width:600px; height:400px; visibility:hidden vaikutus on käytännössä sama kuin sillä, että elementillä olisi display:none. Asemoituna ja piilotettuna linkit eivät lainkaan tilaa dokumentin muulta sisällöltä!

Esittämääni systeemiä voidaan käyttää kaikissa sellaisissa valikoissa, joissa elementeille voidaan etukäteen määritellä tietty paikka. Tyypillisin ratkaisu on pudotusvalikko, joita olen käsitellyt tällä verkkosivulla. Ratkaisun etu on siinä, että valikoiden aukaiseminen ei koskaan aiheuta koko dokumentin tai siitä suuren osan uudelleen muotoilun tarvetta. Omassa ratkaisussani vain määritellyt valikot paljastetaan niissä paikoissaan, joissa ne todellisuudessa ovat sivulla! Jos valikot tuotetaan "lennosta", ne eivät silloinkaan vaikuta millään tavoin dokumentin muiden elementtien asemointiin - vain valikoiden suorittamisen nopeus ja/tai luotettavuus muuttuu verrattuna linkkeihin, jotka ovat valmiiksi olemassa sivulla!

Koska minulla on samasta perusvalikosta useita eri versioita, kokosin asemointimäärittelyjä ryhmiin sen mukaan, mikä on valikoiden vaaka- tai pystyasemointi (valikoiden nimet ja ominaisuuksien arvot ovat nykyisin eri kuin esimerkissä):

/* toisen tason alivalikoiden vaaka-asemointi ja z-index */
#Generic, #MainPages,... {left:128px; z-index:19;}
 /* kolmannen tason alivalikoiden vaaka-asemointi ja z-index */
#MainPagesAppendixes, #Generic1,... {left:266px; z-index:20}
/* kaikkien valikoiden pystyasemointi */
#Pages, #PagesEn,... {top:42px}
#MainPages, #Generic1,... {top:59px}
...

Käyttämissäni esimerkeissä on ollut monitasoisia valikoita. Vaihtoehtona olisi sisentää alemman tason valikkokohdat - alivalikot muistuttaisivat tällöin sisällysluetteloa - vertaa vaihtoehtoja kahden kuvakaappauksen avulla[S].

Selainkohtaisia huomautuksia:

  1. MS IE näyttää elementit, joilla on visibility:visible vaikka ne olisivat sellaisten elementtien sisällä, joille on määritelty visibility:hidden. Selaimen tulee toimia tällä tavoin. Opera piilottaa aina ja uudet Mozilla Gecko (esim. Netscape 6.1) -selaimet position:fixed käytäessä piilottavat virheellisesti tällaiset elementit (engl. testisivu[S]).

  2. Aluksi käyttämissäni dynaamisissa valikoissa viittaamani ominaisuudet eivät useimmiten toimineet testaamassani Netscape 4.x -selaimissa. Annan siksi esimerkkisivuilla vastaavat attribuutit skriteillä tuotetuille LAYER elementeille. LAYER elementillä ei ole position attribuuttia, mutta aiemmassa esimerkissä ollut <LAYER top="66" left="141"> tarkoittaa teoriassa samaa kuin CSS:ssä position:absolute; top:66px; left:141px (ja esim. z-index="3" tarkoittaa samaa kuin z-index:3) - tosin Netscape 4.x asemoi elementtejä vähän eri lailla kuin MS IE ja Opera. Koska LAYER elementit ovat epästandardeja tuotatin ne kaikki skripteillä.

  3. Kun asemoidaan valikoita, on syytä tutustua absoluuttisesti asemoitujen elementtien asemointiin liittyvät yleisohjeeni[S], jotta suuremmilta ongelmilta vältyttäisiin.

Kaikista kehittyneimmillä selaimilla toimii myös position:fixed asemointityyppi. Näin asemoituihin valikoihin pääsee koska tahansa. Olen havainnut, että position:fixed tuo suunnitteluun rajoituksia sillä ainoa järkevä systeemi on se, että päävalikko on pystytasossa ja linkit ovat allekkain. Jos käytettäisiin kaikki ankkurit aiheuttavat ongelmia sillä valikko peittää sisällön alun. Vierailijan täytyisi joka kerta hieman vierittää tekstiä ylöspäin kun sivun sisäisiä linkkejä olisi käytetty - vierailija olisi äkkiä vihainen kuin ampiainen ja kirosanoja piisaisi!

Jos on mahdollista syntyä tilanne, että valikko piilottaa osan sisällöstä, pitäisi olla mahdollista piilottaa koko valikko. Tietenkin tulee olla myös linkki, jolla saa piilotetun valikon uudestaan esille. Alla on muutamia kuvia mahdollista linkeistä, jolla päävalikon saa piilotettua ja paljastettua sekä kuvakaappaus valikosta, joka niitä käyttää.

Kasaa
Kasaa		 Laajenna
Laajenna		 Luontosivut

Piilottamisen ja paljastamisen voi tehdä myös täysi- tai puoliautomaattisesti. Jälkimmäisessä tapauksessa onmousedown sulkisi sisällön kautta koko valikon. Se paljastaisi myös sivun (vasemmassa, oikeassa tai molemmissa) reunoissa olevat aktiiviset alueet, joilla on onmouseover, jotka tuovat valikon jälleen näkyviin.

Selainkohtaisia huomautuksia:

  1. Kiinteän asemoinnin voi antaa attribuuttivalitsinten avulla, joita MS IE ei ymmärrä, jolloin vain uudet Opera ja Mozilla Gecko -selaimet toimivat sen mukaan:

    div.pageGroup, div#allPages {position:absolute} div[class="pageGroup"], div[id="allPages"] {position:fixed !important}/* Koska attribuuttivalitsimilla on alempi painoarvo kuin id-valitsimilla, kuvauksessa täytyy olla !important-sääntö. */

  2. Systeemi ei toimi aivan ihanteellisesti Opera 5.x-6.x -selaimissa (toimii kunnolla Opera 7.0 Beta 2 lähtien) eikä mitenkään MS IE 5.0 Mac -selaimissa. Se toimii ihanteellisesti ainoastaan uusimmissa Mozilla Gecko -selaimissa (lue puutteista tarkemmin selainten toimivuutta[S] käsittelevältä sivulta, tein myös testisarjan[S] osoittaakseni ongelmia).

  3. Kiinteästi asemoitujen elementtien sijaan voi käyttää JavaScript-koodauksella toteutettuja "kelluvia" elementtejä, jotka pienellä viivellä asettuvat paikoilleen. Toimivuus on kuitenkin jossakin määrin huonompi kuin kiinteästi asemoiduilla elementeillä. Käsittelen tällaisia elementterjä eräällä lisäsivulla[S].

  4. Vaikka Netscape 6.0 ei tue position:fixed asemointityyppiä huomasin yllätyksekseni, että se toimi position:absolute mukaisesti, joten Netscape 6.0 ei tuottanutkaan odottamiani ongelmia.

  5. Olen joskus nähnyt paikallaan pidettyjä valikoita. Koska selaimet nostivat/laskivat elementtejä toimivuus oli melko huono. En osaa opettaa sellaisten skriptien laatimista, jotka aikaansaisivat (ainakin osittain) paikallaan pysyvät elementit. Alla on osoite, josta saa valikon Andy Woolleyn tekemä Top Navigational Bar IV (ver. 3.3.19) nimisen valikon, joka on tietyillä asetuksilla useimmissa selaimissa (myös Opera 4.x-6.x) vakaa ja siirtyy rullauksen mukana (oletusasetuksilla valikko on Opera 5.x-6.x selaimissa epävakaa ja Opera 5.x on vaikeuksia ladata valikko).

    Määrittelemällä menu_arrays.js tiedostossa valikoille esim. ,,120,1,,style1,0,"left",effect,1,,1,,,,,,,,,, valikko pysyy näkyvillä ja seuraa hiiren liikettä kunnes toinen alivalikko avataan. Monitasoisissa valikoissa toimivuus on kuitenkin monissa selaimissa melko huono sillä alivalikot seuraavat emovalikkoa ärsyttävällä viiveellä. Toimivuus on paljon huonompi kuin position:fixed Mozilla Gecko -selaimissa. Tämän tyyppiset linkit toimivat parhaiten linkkinuolina, jotka vievät sivun alkuun (mallisivu[S]) ja edelliselle/seuraavalle sivulle. Tosin Andy Woolleyn Milonic sivustolla monitasoinenkin valikko toimi sangen hyvin Opera 7.x:ssä (paljon paremmin kuin MS IE 6.0 Windows:ssa) ja kohtalaisen hyvin Opera 6.x:ssäkin (valikko ei kuitenkaan ala toimimaan yhtä nopeasti kuin Opera 7.x:ssä). Valikko on aiemmin mainitsemani valikon uudistettu versio (lataamani versio oli 3.5.08 mutta nykyisin se on todennäköisesti uudempi). Versio 3.5.08 ei lataannu Opera 5.x:ssä aina lainkaan eikä mahdollisesti lataantuessaankaan sovellu Opera 5.x:lle. Tästä ongelmasta voi päästä kirjoittamalla JavaScript, jossa Opera 5.x saa vanhemman valikon (katso tämän sivun lähdekoodi[S]). Yleisesti ottaen tämän tyyppisten valikoiden ongelma on siinä, että ne toimivat vain JavaScript-tuki päällä. Itse valikkorakenne olisi parempi kasata serveripuolen ohjelmoinnilla, joilloin valikko voisi olla ainakin jonkin muotoisena aina käytettävissä. Kokeile PHP:n avulla[S] valikkorakenteen luomista.

    Dynamic Drive: Top Navigational Bar IV; Milonic.

  6. Sisällön päälle menemisen ongelmaa voisi periaatteessa helpottaa myös CSS3:een kuuluvalla läpinäkyvyyden (transparency) hallintaan liittyvällä ominaisuudella opacity (= läpinäkymättömyys), mutta yleinen tuki puuttuu em. ominaisuudelta. Netscape 6.2+/ Mozilla 0.9.4+/ vähintään yhtä uusille muille Mozilla Gecko -selaimille voi käyttää -moz-opacity ominaisuutta, joka on väliaikainen opacity ominaisuuden toteutus.

  7. Operan kanssa voisi kokeilla muitakin asemointityyppejä kuin top-left, mutta niiden toimivuus on muissa selaimissa heikko, joten en suosittele bottom-left, top-right ja bottom-right bottom-right asemointityyppien käyttämistä. Yksittäisiä linkkejä tai pieniä linkkikokonaisuuksia voi asemoida niiden mukaisesti, mutta ei dynaamisia valikoita.

[Alku]

Muut vaihtoehdot

Jos valikot määritellään aina samaan paikkaan ja saman kokoisina, valikoiden vaihdot voidaan periaatteessa toteuttaa visibility ominaisuuden arvojen muutosten sijasta z-index ominaisuuden arvojen muutoksilla. En osaa kuitenkaan sanoa, miten laajasti tämä ratkaisu on tuettu.

Sekä visibility että z-index ratkaisujen on siinä, että se ei sovellu valikoihin, joissa elementeille ei voi etukäteen määrittää tiettyä paikkaa. Tämän tyyppinen valikko on esim. Windowsin Resurssienhallinta, josta on alla kuvakaappaus.

Resurssienhallinta

Koska valikkoa voidaan laajentaa missä tilanteessa tahansa, pystytason asemointia ei voi määrittää etukäteen. Elementit pitäisi piilottaa/ paljastaa display:none ja display:block vaihdoilla. Kun elementeille on määritelty display:none niitä ei ikään kuin ole lainkaan koko dokumentissa. Kun niille määritellään display:block ne "raivaavat" itselleen oman tilan.

Ratkaisulla on erittäin ongelmallinen, jos valikoille ei ole varattu lainkaan tai niille on varattu riittämättömästi laajentumistilaa. Valikoiden avaaminen voi aiheuttaa jatkuvaa dokumentin uudelleen muotoilua. Se tuo selaimen toimintaan hitautta ja kaatumisriskin. Kuten olen tuonut esille, ominaisuuden display dynaamiset muutokset eivät ei toimi Opera 4.x-6.x -selaimissa. Vasta . Ymmärtääkseni juuri edellä esittämieni ongelmien vuoksi Opera Software on päättänyt, että sen valmistamat Opera 4.x-6.x -selaimet eivät tue ominaisuuden display dynaamisia muutoksia. Mielestäni display-ominaisuuden dynaamiset muutokset ovat ylipäätänsä huono ratkaisu kehyksettömillä Web-sivuilla, vaikka Opera 7.x+ ja muut modernit selaimet tukevat niitä.

Resurssienhallinnan tapaiset valikot soveltuvat oikeastaan vain kehyksiin, jossa valikko on omassa kehyksessään - sitenhän Windowsin resurssienhallintakin toimii! Vastaavan systeemin saa Java-appleteilla, esim. Auscompin tuotteilla. Java-applettien ongelmana on hitaus ja se, että monet selaimet eivät tue niitä vakiona. Sun Microsystemsin JRE on iso apuohjelma ladattavaksi modeemiyhteyksillä. Dynaamisia valikoita saa myös Flash-animaatioina. Macromedian tuotteiden lisäksi Flash-animaatioita saa muillakin ohjelmilla. Itselläni ei ole mitään kokemusta niiden käytöstä.

Auscomp, Macromedia, Sun Microsystems.

Flash- ja applettivaihtoehtojen edut ja haitat:

Valikoiden luominen on suhteellisen helppo hoitaa kehyksissä myös siten, että JavaScript tai serveripuolen ohjelmointi luo "lennosta" alivalikon avaamisen yhteydessä kokonaan uuden valikkosivun. Tällaiset valikot toimivat myös Operassa.

[Alku]