Etsi sivuiltani:

	Aihepiiriluettelo > CSS-oppaan etusivu > Oppaan lisäsivut > I Miten luoda dynaamisia valikoita > Ulko- eli esitysasuratkaisut (jakso 6/6)

Sivun jaksot:

Introjakso

Edellinen jakso

Ulkoasu

Mitä tulee valikoiden ulkoasuun ongelmat Netscape 4.x -selainten kanssa jatkuvat, koska CSS ei toimi kuin osittain käyttämäni dynaamisten valikoiden kanssa. Varsinkin linkitetyn CSS:n kanssa on vaikeuksia, sillä vain osa siitä toimii. Koska suora CSS toimi paremmin, käytän jonkin verran style-attribuutteja (olen tarvittaessa kumonnut niiden vaikutuksen käyttäen muille selaimille !important-sääntöä). Jouduin lisäämään jonkin verran ylimääräisiä elementtejä (esim. B ja IMG), jotta sain esitysasun riittävän hyväksi. Linkit tuntuivat kaipaavan FONT elementtiä, sillä edes style attribuutti ei aina toimi. Muille kuin Netscape 4.x -selaimille ulkoasu määräytyy pääosin ulkopuolisista CSS-tiedostoista käsin.

Mikäli Netscape 4.x -selaimia tuetaan, dynaamisen valikon HTML-koodi täytyy laittaa aivan sivun alkuun, sillä havaitsin, että Netscape 4.x kaatui, kun se oli keskellä sivua erään taulukon sisällä!

Mielestäni on järkevää asettaa id- or class-attribuutti jokaiselle linkille ja sen emoelementille tai taulukkosolulle, jonka sisällä linkki on (muista, että id-attribuutin arvojen tulisi olla sivukohtaisesti uniikkeja). Tällä tavoin voi sama valikko näkyä joka sivulla hieman erilaisena. Joka sivulla on tyylisivu, joka on sääntö, joka koskee avoinna olevaan sivuun viittaavaa linkkiä. Yksitasoissa dynaamisissa tai staattisissa valikoissa avoinna olevan sivun linkin voi joko piilottaa display:none tai sille määritellään erityiset color ja/tai background-color/ background ominaisuudet. Jälkimmäistä vaihtoehtoa voidaan käyttää myös monitasoisissa dynaamisissa valikoissa. Esim. tällä sivulla on seuraava CSS:

#Dy {background-color:#ffd700 !important; color:#303400 !important}

Se luo seuraavan kuvakaappauksen kaltaisen lopputuloksen:

Ominaisuuksille on asetettu !important eliminoimaan linkki- ja dynaamisten näennäisluokkien (a:visited jne.) vaikutus. Jos linkeillä ei ole alivalikoita, niille voi asettaa myös cursor:default. Merkkaamalla avoinna olevan sivun, sivulla vierailija ei niin helposti klikkaa avoinna olevaa sivua koskevaa linkkiä turhanaikaisesti. Samalla hän voi joka hetki tietää, missä kohtaa hän on valitussa sivuryhmässä.

Uudet Opera, MS IE ja Mozilla Gecko (esim. Netscape 6.x) -selaimet eivät tarvitse kuvalinkkejä, sillä asettamalla tekstilinkille display:block se näyttää ikään kuin kuvalta kuten alla olevassa kuvakaappauksessa (uusilla Opera ja Netscape -selaimilla koko elementti toimii aina linkkinä, mutta MS IE kohdalla toisinaan koko elementti on aktiivinen ja toisinaan ei; jälkimmäisessä tapauksessa display:block saa aikaan vain visuaalisen efektin, mutta vain teksti toimii linkkinä; jos MS IE:llä ominaisuuden width arvo on jokin muu kuin auto, linkit ovat aktiivisia koko käytettävissä olevalta leveydeltään lukuun ottamatta tilanteita, joissa linkit käyttävät ominaisuutta float eivätkä kaikki linkit mahdu samalle riville; ongelmasta voidaan päästä eroon myös lähinnä MS IE 4.x Windowsille esittämälläni tavalla).

Käyttämällä eräitä näennäisluokkia, on mahdollista saada sama lopputulos kuin JavaScript & tapahtumankäsittelijöillä, jotka vaihtavat kuvan or tekstilinkin taustavärin kun hiiri kulkee linkin ylitse/ohitse tai tekee muita toimenpiteitä. Optimaalisen lopputuloksen saavuttamiseksi tarvitaan esim. seuraavat ominaisuudet:

.pageGroup a {display:block; width:100px; height:15px; line-height:15px; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; font-size:12px} /* Ilman line-height ominaisuutta linkkien väliin saattaa jäädä pystytasossa tyhjää tilaa eivätkä tekstilinkit toimi täysin kuvalinkkien tapaan. Jos linkit ovat taulukkosolujen sisällä, myös taulukkosolut tarvitsevat line-height ominaisuuden, jotta saadaan hyvä lopputulos myös Mozilla Gecko -selaimissa (edempänä on tähän asiaan liittyvä koodiesimerkki). Pystytason margin ja padding ominaisuudet on mielekästä asettaa nollaksi, että linkit toimisivat samoin mahdollisimman monessa selaimessa. Fonttikoko kannattaa määrittää siten, että sitä on mahdollisuus isontaa 120%. */
.pageGroup span.link {background:...; padding-left:11px;...} /* Olen joissakin versioissa tekstilinkkien ympärillä elementtiä, joille olen taustaominaisuudet ja padding-left ominaisuuden. Tämä elementtikerros ei ole välttämätön. Suosittelen vain taustavärien asettamista, sillä taustakuva ei toimi kaikissa selaimissa. */
.pageGroup span.Link a:link {background:...; color:...}
.pageGroup span.Link a:visited {background:...; color:...}
.pageGroup span.Link a:hover {background:...; color:...}
.pageGroup span.Link a:active {background:...; color:...}
.pageGroup span.Link a:focus {background:...; color:...}

Koska display:block ei toimi kunnolla Netscape 4.x - ja MS IE 4.x Windows -selaimissa (ks. yllä oikealla puolella oleva kuvakaappaus MS IE Windows -selaimen toteutuksesta ja vertaa sitä vasemmanpuoleiseen kuvaan), ratkaisu ei ole tyylikäs Netscape 4.x - ja MS IE 4.x Windows -selaimissa. Medialohkoja käyttäen luoda CSS, jossa MS IE 4.x Windows ja Netscape 4.x eivät saa tekstilinkeille taustaominaisuuksia (minulla MS IE ongelmia käsittelevällä sivulla joitakin tähän asiaan liittyviä vihjeitä; koska laitoin tekstilinkeille taustaominaisuuksia, ne voivat näyttää em. selaimilla hieman rumilta).

MS IE 4.x Windowsille on tosin mahdollista saada sama lopputulos linkkien emoelementeille annetuilla tapahtumankäsittelijäattribuutilla. Mikäli myös alivalikoiden avaus- ja sulkemistoiminnot toteutetaan emoelementtien välityksellä saadaan illuusio, että linkit ovat koko leveydeltään aktiivisia, esim.:

var nav_over = "this.style.background='#cee8ea';";
var nav_out = "this.style.background='#ffffff';";
...
<div onmouseover="MM_showHideLayers('Generic','','show',...); eval(nav_over);" onmouseout="eval(nav_out);"><a onmouseover="MM_showHideLayers('Generic','','show',...);" href="..."></div>

Vastaavan ratkaisun lisääminen Netscape 4.x:lle kasvattaa koodimäärää rajusti, sillä tarvitaan (jälleen kerran) LAYER-elementtejä.

Tekstipohjaiset linkitkin toimivat kohtalaisen hyvin Netscape 4.x - ja MS IE 4.x Windows -selaimissa, jos linkeillä itsellään ei ole taustaominaisuuksia ja jokainen linkki on omalla taulukkorivillä siten, että sekä linkin vasemmalla että oikealla puolella on taulukkosolu, jossa on kuva ja keskimmäisen solun leveys määritellään kuvalla. Vasemmalla ja oikealla puolella olevissa soluissa olisi linkkejä, jotka avaisivat/ sulkisivat alivalikoita. Vasemmanpuoleisissa soluissa voisi olisi listanappeja. Tarvittaessa myös korkeusarvoja määritellään läpinäkyvillä täytekuvilla.

Edelleen jää jäljelle reunusongelma. Jos reunukset antaa CSS:llä Netscape 4.x jättää taustavärin ja lohkon reunusten väliin muutaman pikselin levyisen läpinäkyvän ruman täytealueen. Lisäksi on huomattava se, että vanhimmat Netscape 4.x -sarjan selaimet kaatuvat CSS-reunuksista. Kokonaisuutta ajatellen tämän eliminoimiseksi on paras keino määritellä taulukolle taustaväri ja luoda "reunukset" joka puolella sisältöä kiertävien taulukkosolujen avulla (soluissa voi käyttää rowspan ja colspan attribuutteja). En ole näin menetellyt kaikkien valikoiden osalta menetellyt vaan ainoastaan päävalikon kohdalla.

Jos taustaväri annetaan elementille LAYER ja sen sisään tulee elementti, jolla on reunukset, ei myöskään synny ongelmaa läpinäkyvistä täytealueesta. Alla on kuvakaappaus testivalikosta. Ratkaisin reunus- ja taustaväriongelmat ensimmäisen tason valikon kohdalla lisäämällä ylimääräisiä taulukkosoluja. Toisen tason valikossa on käytetty tuotettua LAYER elementtiä.

LAYER-ratkaisun etu on helppous ja se se, että myös taustakuvia voi käyttää eikä Netscape 4.x hajota niitä rumasti yksittäisiin taulukkosoluihin. Sillä on myös haittapuolensa. Kuvakaappauksesta näkyy, että taulukkorivien korkeus ei ole sama. Oikeanpuoleisen taulukon ympärillä on lohko, jolla on border ja padding ominaisuudet. Taulukon korkeus vaihtelee tällaisissa tapauksissa, vaikka niissä olisi yhtä monta solua. Ylimääräisten taulukkosolujen lisäetu on siinä, että pystydimensiot toimivat täsmällisemmin. Itse asiassa täsmällisesti toimivat täytealueet vaativat sisällön ympärille reunusten tavoin ylimääräisiä taulukkosoluja (tarvittavien palstojen määrä nousee tällöin seitsemään ja ylimääräisten taulukkorivien neljään).

Tekemässäni mallisivussa on päävalikoissa käytetty seitsenpalstaisia taulukkorivejä mutta alivalikoissa yksinkertaisempia kolmipalstaisia rakenteita. Kaikki valikot sekä yläoikealla valikoihin liittyvät linkkikokonaisuudet ovat skripteillä tuotettujen LAYER-elementtien sisällä. Alla on esimerkki menetelmästä miten luoda ylimääräiset taulukkorivit ja -palstat (koska täytekuvan luonnolliset dimensiot ovat 1x1 pikseliä, ei ole aina välttämätöntä määrittää sekä height että width attribuutteja).

<table summary="" cellspacing="0" cellpadding="0" border="0" bgcolor="white" width="126" >
<tr class="topCells">
<td id="cell1" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" height="1" width="1" /></td>
<td id="cell2" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" height="1" width="2" /></td>
<td id="cell3" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" height="1" width="11" /></td>
<td id="cell4" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" height="1" width="101" /></td>
<td id="cell5" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" height="1" width="8" /></td>
<td id="cell6" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" height="1" width="2" /></td>
<td id="cell7" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" height="1" width="1" /></td>
</tr>

<tr class="paddingCells">
<td rowspan="5" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" width="1" /></td>
<td rowspan="5"><img src="spacer.gif" border="0" alt="" width="2" /></td>
<td colspan="3"><img src="spacer.gif" border="0" alt="" height="5" /></td>
<td rowspan="5"><img src="spacer.gif" border="0" alt="" width="2" /></td>
<td rowspan="5" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" width="1" /></td>
</tr>

<tr class="contentCells">
<td><img src="menuButton.gif" border="0" alt="" height="10" width="10" /></td>
<td>Ekarivi</td>
<td><img src="rightArrowr.gif" border="0" alt="" height="15" width="8" /></td>
</tr>

<tr>
<td><img src="menuButton.gif" border="0" alt="" height="10" width="10" /></td>
<td>Tokarivi</td>
<td><img src="rightArrowr.gif" border="0" alt="" height="15" width="8" /></td>
</tr>

<tr>
<td><img src="menuButton.gif" border="0" alt="" height="10" width="10" /></td>
<td>Kolmasrivi</td>
<td><img src="rightArrowr.gif" border="0" alt="" height="15" width="8" /></td>
</tr>

<tr class="paddingCells">
<td colspan="3"><img src="spacer.gif" border="0" alt="" height="5" /></td>
</tr>

<tr class="bottomCells">
<td bgcolor="#303400" colspan="7">
<img src="spacer.gif" border="0" alt="" height="1" /></td>
</tr>
</table>


Huomasin, että päävalikko toimi pääasiallisena testiselaimena käyttämässäni Operassa hieman hitaammin kuin aiemmin. Ainakin Opera kärsii monimutkaisemmasta rakenteesta, jolla ulkonäkö tuli paremmaksi Netsape 4.x -selaimissa. En suosittele luomaan käyttämääni rakennetta raskaampaa systeemiä. Jos käytetään perusratkaisuna kaksinkertaisia taulukoita laskin, että kohtuullisen hyvän lopputuloksen saamiseksi Netscape 4.x vaatii yli 50% prosenttia enemmän koodia kuin modernit selaimet. Minimikoodaukseen verrattuna Netscape 4.x takia saattaa tarvita lisätä yli kaksinkertainen määrä koodia! On siksi melko kyseenalaista tukea Netscape 4.x -selaimia.

Seitsenpalstainen taulukkorivi, joka oli päävalikon DIV-elementin sisällä, aiheutti uusille Opera, MS IE ja Mozilla Gecko -selaimille ongelmia taulukossa;. HTML-attribuuteista huolimatta taulukkorivit, täytekuvat ja itse taulukko on syytä määrittää CSS:llä. Testaamassani Netscape 6.1 tasoinen Mozilla 0.9 tarvitsi height ja width ominaisuuksien lisäksi matalille taulukkosoluille myös line-height ja font-size ominaisuudet (selain tuntuu olettavan, että solussa on aina järkevän kokoista tekstiä) sekä taulukolle table-layout:fixed. Alla on muutamia esimerkkejä miten sen voisi toteuttaa (osa CSS:stä on käytässä sivustoillani):

#Pages table, #PagesEn table {width:136px; table-layout:fixed} /* Kun käytetään kiinteää taulukonlaadintaa, yksittäisten solujen kokonaisleveys täytyy täsmätä taulukon kokonaisleveyden kanssa */
#cell1,#cell2, #cell3,... {height:1px; line-height:1px; font-size:1px}
#cell1 img, #cell2 img, #cell3 img,... {height:1px}
#cell1 img, #cell7 img, td#cell1, td#cell7 {width:1px}
...
#cell4 img, td#cell4 {width:105px}
...
.paddingCells td {line-height:5px; font-size:5px; height:5px}
...
div.pageGroup td {height:15px; line-height:15px; padding:0} /* Solut, joissa on itse linkit. Ilman tätä määritystä rivien korkeus ei ole sama kuin uusissa MS IE ja Opera selaimissa. Ratkaisu ei toimi kunnolla MS IE 4.x Windows -selaimissa, sillä vain osassa soluista rivikorkeus on oikein. */

Vanhanaikaiset HTML 3.2 -tyyppiset rakenneratkaisut aiheuttavat ylimääräistä työtä ja niitä on vaikea saada toimimaan oikein uusissa Mozilla Gecko -pohjaisissa selaimissa. Uusille selaimille olisi paljon järkevämpää poistaa ylimääräiset taulukkorivit (ja jos rowspan attribuutteja on käytetty) samalla myös ylimääräiset taulukkopalstat määrittämällä ylimääräisille taulukkoriveille display:none (päävalikon taulukoihin jäisi tällöin kolme palstaa). Jotta näin voi toimia ylimääräisille taulukkoriveille täytyy määrittää joko id tai class attribuutit (esim. tr.topCells, tr.paddingCells, tr.bottomCells {display:none}). Tällöin voitaisiin määrittää todelliset padding ja border ominaisuudet päävalikon säilytinelementille. Näin Netscape 4.x toimisi vanhanaikaisella HTML 3.2:n ohjauksella ja uudemmat selaimet modernimmalla CSS:n ohjauksella. Olen kuitenkin havainnut, että line-height ominaisuuden asettaminen ei aina auta saamaan haluttua lopputulosta Mozilla Gecko selaimissa (a test page).

Edellä esittämäni ratkaisu ei kuitenkaan toimi MS IE 4.x Windows -selaimessa, sillä selain ei tue display:none taulukkoriveille. Jos Netscape 4.x:n tarvitsemat ylimääräiset rivit ja pastat skripteillä, dokumentti ei ole rakennettu aivan (X)HTML spesifikaatioiden mukaisesti. En löytänyt MS IE 4.x Windows -selaimille tekstilinkkejä käytettäessä täysin tyydyttävää ratkaisua. Jos valikoita tuotetaan lennosta JavaScript-koodauksella (kuten DHTML Menu Builder tekee), ne voivat olla erilaisia Netscape 4.x ja muille selaimille. Mutta valikoiden tuotattaminen skripteillä on sekin ongelmallista.

Optimaalisen tyylikäs ja parhaalla mahdollisella tavalla toimiva lopputulos MS IE 4.x Windows ja Netscape 4.x -selaimille saadaan ainoastaan silloin, kun kaikki linkit ovat kuvalinkkejä. En muuta kuitenkaan kaikkia linkkejä kuvalinkeiksi niiden vaatiman ylimääräisen työn vuoksi. Kuvalinkkien suosijan ei mielestäni kannata koodata sivuja käsin, vaikka TechsOfTheWeb.Com sivusto opettaa, miten kuvia voi käyttää dynaamisissa valikoissa. Koska MS IE 4.x ja Netscape 4.x käytetään suhteellisen vähän ja ne ovat sangen virheellisesti toimivia selaimia, en koe niiden täysipainoista huomioon ottamista mielekkääksi. Suosittelen koodieditoria käytettäessä tekstilinkkien käyttöä täytekuvin täydennettynä. Mielestäni ainoa järkevä vaihtoehto tälle on tehdä valikot kaupallisilla ohjelmilla kuten Macromedia Dreamweaver ja DHTML Menu Builder. Tosin huomautan vielä siitä, että em. ohjelmilla tehdyillä valikoilla esiintyy todennäköisesti ainakin joillakin selaimilla stabiliteettiongelmia.

Valikoiden ulkonäköä voi luoda tyylikkäämmäksi laittamalla niille aidosti tai näennäisesti läpinäkyviä valikoita tai varjoja.

Selostan joitakin käyttöseikkoja myös selailuohjeissa - suurimmalla osalla sivuista on pikalinkki tähän opastukseen (kysymysmerkki ).

Sivun jaksot:

Introjakso

Edellinen jakso