Hyvä ihminen! Tämä ei ole blogin etusivu. Täällä on tagiin "css" kytketyt jutut.

Hei Samuel! Juuri tätä tarkoitin.

  • Julkaistu: 28.04.2008
  • Kategoria:
  • 7 kommenttia

Taustakuvatesti on päivän sana. Tai linkki. Tuolla testisivulla on siis sellainen jännittävä efekti, jossa parin kuvatiedoston ja CSS-merkkauksen avulla on luotu kolmiulotteista menoa ja meininkiä. PNG-kuvatiedostot, jotka on tallennettu 24-bittisiksi ja osittain läpinäkyviksi (alpha channelilla) on sijoitettu toinen toisensa päälle.

Tällaisen efektin näin ensimmäistä kertaa jollakin englanninkielisellä nettisivustolla, jossa oli ikään kuin viidakon pöpelikköä toteutettu nettisivuston ulkoasuun tällä tavalla.

Tagit: ,

Label, label, label.

  • Julkaistu: 17.04.2008
  • Kategoria:
  • Kommentointi suljettu.

Olen mieltynyt hehkuttamaan verkkolomakkeiden label-elementin käyttämistä lomakkeissa. Tämän jännittävääkin jännittävämmän elementin avulla voi sitä oikeaoppisesti käytettäessä suurentaa lomakkeessa esimerkiksi tekstikentän tai pudotusvalikon aktivoimista varten sen klikkauspinta-alaa. Olen puhunut blogissa labelista aikaisemminkin. Ensimmäisen kerran vuoden 2005 marraskuussa.

Oikeaoppisesti tämä elementti voidaan niitata yhteen halutun lomakkeesta löytyvän tavaran kanssa laittamalla ensin label-tagiin for="id-tunnisteen-nimi" ja sitten yhdistettävään yksi- tai moniriviseen tekstikenttään tai vaikka pudotusvalikkoon vastaava id-tunniste, joka on esimerkissä id="id-tunnisteen-nimi". Esimerkiksi tekstikenttään yhdistettäessä merkkaus näyttäisi tältä:

<label for="id-tunnisteen-nimi">Käyttäjätunnus</label>
<input type="text" id="id-tunnisteen-nimi" />

Näin yksinkertaista. Tämän tempun teho ilmenee käytännössä siten, että nämä kaksi elementtiä on ikään kuin sidottu toisiinsa ajatustasolla. Päällisin puolin ne usein toimivat siten, että nyt tekstikentän aktivoimista varten osoitettu alue on kasvanut kattamaan myös label-laatikon pinta-alan. Klikkaamalla hiiren osoittimella sanan “Käyttäjätunnus” päällä, tuo tekstikenttä aktivoituu.

Yleensä label-kenttien kohdalla käyttäjälle ei kuitenkaan vihjata mahdollisuudesta hyödyntää kyseistä tekstialuetta jonkin lomake-elementin aktivoimiseksi. Siispä ohjeistetaan. Tehdään siis CSS-merkkauksen sekaan yhden rivin pituinen mahtikäsky:

label { cursor: pointer; }

Tagit: , ,

Vähän kuin Suomen W3C.

  • Julkaistu: 05.04.2008
  • Kategoria:
  • Kommentointi suljettu.
  • Menthal27 uudistui muutamia päiviä sitten ihan kiireestä kantapäähän. Tämä sivusto on sellainen suomenkielinen tietopankki, jossa on käyttökelpoista tietoa etenkin XHTML:n ja CSS:n ja muiden tällaisten nettisivujen tekemiseen liittyvien aiheiden ympäriltä. Tämä on kuin tripla-W:n sivusto, mutta tekstit suomeksi ja (suureksi osaksi sivuston raikkaan ulkoasun ansiosta) sivustolla esitetty tieto löytyy miellyttävästi omaksuttavassa muodossa.
  • Ammuu.com avasi asiakasyhteisöksi kutsumansa keskustelupalstan jälleen pitkän tauon jälkeen. Firmallahan oli joskus vuosi(a) sitten samanlainen nettipalsta pystyssä, mutta se suljettiin ymmärtääkseni lähinnä sen takia kun sivustolla käytetty foorumiversio oli niin vanha. Vanha foorumiversio salli spammereiden levittää viagrapitoista missiotaan. Aikaisemmalla foorumilla oli käytössä phpBB ja nykyisellä vBulletin.
  • VerkkosivutPlus on jälleen uusi CSS-galleria. Suomalainen. Suomenkielinen. Galleriaan voi ehdottaa uusia sivustoja lisättäväksi. Sieltä löytyy jo tämä Korinaa kuopasta -blogikin. Sivustogalleriaa pyörittää joensuulaisen Arkimedian übermaestro Mikko Virenius. Ehdottakaa galtsuun omianne!

Tagit: , ,

Hallitse ulkoasua CSS:n ja body-elementin avulla.

  • Julkaistu: 10.03.2008
  • Kategoria:
  • Kommentointi suljettu.

Tyylitiedostojen avulla voidaan hallinnoida koko nettisivuston ulkoasua. Jokaisen sivuston sivun. CSS:n teho on juuri siinä, että hyvin pienellä vaivannäöllä, ideaalitilanteessa vain yhden tyylitiedoston, kautta voidaan muokata kaikkien sivuston ulkoasussa olevien tavaroiden esitystapaa.

Joskus voi vastaan tulla sellainen tilanne, jossa halutaan tehdä globaalilla tasolla toimivan tyylitiedoston kautta muutoksia vain johonkin sivustolla olevaan sivuun. Hämärältä kuulostaa, mutta tarkoitan tällä sitä, että jos meillä on koko nettisivuston alueella toiminnassa tyylitiedosto “oletus.css” ja halutaan siitä käsin vaikuttaa esimerkiksi vain jotakin yhtä haluttua osiota. Tämä on mahdollista tehdä asettamalla nettisivun lähdekoodiin haluttuun osioon haluttu id-tunniste avaavaan body-tagiin. Esimerkiksi näin:

<body id="yhteydenotto">

Tämän tunnisteen avulla voi koko sivun sisältöön tarrautua CSS:n avulla. Hyvin yksinkertaista, mutta tätä ei nähdäkseni kovin usein toteuteta. Syynä lienee se, ettei kansa tunne tämänlaisen ratkaisun olevan olemassa. Syynä tähän ilmiöön voi tietysti olla myös julkaisujärjestelmän kankeus.

Demonstroidaan (tämä on päivän fiini sana, jota pyrin jatkossakin suoltamaan suustani) vielä jonkin verran. Jospa nettisivuilla on vaikka yhteinen ulkoasun rakenne. Esimerkkitilanteessa sivuston rakenne on laitettu div-palikoilla läjään. Elementit on sijoitettu CSS:n avulla. Vau. Mitä mahdollisuuksia nyt avautuukaan! Asettamalla uniikin id-selektorin halutuille osioille voimme vaikka vaihtaa haluttujen osioiden palstojen leveyttä, sijaintia, fontin väriä, koko ulkoasun grafiikkaa… Kaikki sivuston ulkoasun tavarat kun on sijoitettu polveutuvasti body-elementin väliin. Esitellään tätä ajatusta näin:

Meillä on sivusto, siinä on useita eri sivuja. Laitamme etusivulle body-elementtiin CSS-selektoriksi “etusivu”. Sitten vaan tyylitiedostoa kopeloimaan.

body { background: #fff; }
body p { color: #000; }
body#etusivu { background: #000; }
body#etusivu p { color: #fff; }

Oheisessa esimerkkimerkkauksessa kaksi ylintä riviä käskyttävät kaikkia sivuston osioita, mutta kaksi alempaa riviä kumoavat ylimpien rivien ehdottamat temput.

Tagit: ,

Textpatternin julkaisujen arvostelu Ajax-vetoisella pluginilla.

  • Julkaistu: 10.01.2008
  • Kategoria:
  • Kommentointi suljettu.

Textpattern Resources -sivustolla 8. päivä kuluvaa kuukautta julkaistu liitännäinen wlk_helpful on osoittautunut erittäin näppäräksi toiminnoksi. Sen avulla Textpattern-sivustoilla käyttäjät voivat yksinkertaisesti klikkaamalla arvostella artikkeleita. Liitännäisen avulla kukin artikkeli saa joko positiivisia tai negatiivisia pisteitä, jonka jälkeen arvosteltuja julkaisuja voi printata ruudulle julkaisujen saamien negatiivisten tai positiivisten pisteiden mukaan. Tämä liitännäinen toimii Ajaxilla. Pluginin versionumero on tätä kirjoittaessani 0.2.5.

Olen ottanut tähän mennessä tämän pluginin käyttöön Viihdeuutinen.

Lue loputkin…

Tagit: ,

Disabled="disabled"

  • Julkaistu: 10.11.2007
  • Kategoria:
  • Kommentointi suljettu.

Eräät nettiselaimet tukevat CSS-muotoilun asettamista myös sellaisiin verkkolomake-elementteihin, jotka on otettu pois käytöstä. Että jotta tuota jos siis lomakkeessa on sellainen nappula tai tekstikenttä, or whatever, se on ilmoitettu nettisivun lähdekoodissa jotakuinkin näin:

disabled="disabled

Tässä vaiheessa täytyy tunnustaa, että kirjoitan tätä blogimerkintää vailla käytännössä todettuja testituloksia. En jaksa. Pitäisi mennä nukkumaan. Tuohon yllä näkyvään merkkaukseen voidaan tarttua (todennäköisesti) CSS-tiedostosta käsin vaikkapa näin:

[disabled] { oma merkkaus tähän }

Voidaan tarkentaa tuota merkkausta ulottamalla sen koskemaan vain sellaisia button-nappuloita, jolloin CSS voisi näyttää tältä:

button[disabled] { oma merkkaus tähän ]

Tämä disabloituja elementtejä kyykyttävä CSS-merkkaus toimii ainakin Mozilla Firefoxissa.

Tagit:

File input -kentän esitystavan muokkaaminen CSS:n avulla.

  • Julkaistu: 22.09.2007
  • Kategoria:
  • Kommentointi suljettu.

Tässä on toimii-jos-toimii -periaatteella rakennettu viritys, jonka avulla saadaan muotoiltua input="file"-tyyppiä edustavan (X)HTML-lomakkeen tiedostonsiirtoelementin ulkonäköä puhtaasti CSS-merkkauksen avulla. Suuria ja ylväitä sanoja. Käytännössä tämän lomake-elementin säätäminen halutunnäköiseksi onnistuu ihan vain hapuilemalla. Tässä annetut esimerkit eivät varmaankaan toimi kaikissa tapauksissa tai kaikissa nettiselaimissa.

Lomake-elementin muotoilemista varten joudutaan laittamaan esimerkiksi span-tagi muotoiltavaksi valitun file input -kentän ympärille. Näin:

<span><input type="file" /></span>

Tämä sen takia, ettei tuota input-kenttää oikein muuten saa ruttuun. span-kääryleen sisälle laitetaan myöhemmin esimerkiksi kuvatiedosto, missä lukee “Valitse tiedosto…” tai vaikkapa jonkinlainen symboli, josta ilmenee kyseessä olevan tiedostonsiirtokenttä.

Seuraavaksi olisi kaiveltava muistista image replacement -kikkojen periaatteita. Tässähän on käytännössä sama idea kuin tavallisen tekstin piilottaminen ja sen korvaaminen kuvatiedostolla, paitsi sillä erotuksella että nyt piilotetaan ainakin osittain tuo file input ja laitetaan sen tilalle (taustalle) hyllymään oma kuvatiedosto. Tässä tempussa käytetään hyväksi myös CSS:n avulla luotavaa läpinäkyvyyttä. Joudumme laittamaan itse tiedostonsiirtokentän näkymättömiin, mutta kuitenkin siten että sitä voidaan klikata. Kun tiedostonsiirtokenttä on piilossa ja klikkauskelpoinen, asetetaan span-elementin taustakuvaksi haluttu kuvatiedosto. Sillä lailla. Virityksessä joudutaan kuitenkin tekemään kohtalaisen paljon hienosäätöä, että itse klikattava tiedostonsiirtokentän nappula saadaan span-kääreen kohdalle.

Tätä systeemiä rakennellessani mietin tovin jos toisenkin miten file inputin klikattava nappula saadaan pingotettua haluttuun kokoon… CSS:n avulla nappulaa ei saa suoraan suuremmaksi esim. lisäämällä elementin korkeutta. Ainoa toimiva ratkaisu on nähdäkseni kasvattaa file inputin fontin kokoa. Käytännössä siis näin:

form span input { font-size: 40px !important; }

Otetaan vielä askel kerrallaan ja katsotaan miten voisi kaikkein vaivattomimmin saavuttaa jonkinlaisen lopputuloksen.

  1. Tarvitaan verkkolomake, jossa tietenkin on tällainen file input -kenttä.
  2. Luodaan kuvatiedosto tai -tiedostoja em. tiedostonsiirtokenttää varten.
  3. Säädetään CSS-merkkaus.

Vau. Kolme vaihetta. Haastavin näistä lienee tuo kolmas. Se kun vaatii silmämääräistä säätämistä aikaisemmin mainitun input="file -tyyppiä olevan elementin kanssa. Kannattaa jättää alussa CSS-merkkausta säädettäessä tiedostonsiirtoelementti läpinäkyvyydeltään esim. 50 % tasolle, sillä siten nähdään missä se file inputin nappula oikein lymyilee ja onko se sopivan kokoinen. Nappula on oikeassa paikassa kun se peittää lomake-elementin ympärille käärityn span-tagin. Oikea paikka voi näyttää tältä. Tuosta linkistä avautuu kuvakaappaus, jossa tiedostonsiirtopömpeli on laitettu peittämään sitä ympäröivä span ihan ja täysin kokonaan. Kun nappula on saatu paikoilleen, voidaan vetää läpinäkyvyyssäätimet kaakkoon, eli piilotetaan file input CSS-tiedostoon merkatun läpinäkyvyyden avulla.

Jospa se kenttä onkin disabloitu?

Niin. Jos se on niin se on. Tällaisessa tilanteessa voisimme vaikkapa lisätä nettisivulla näkyvän lomakkeen merkkaukseen, että:

<span class="disabled"><nput type="file" disabled="disabled" /></span>

Tällöin CSS-tiedostoon voisi säätää esimerkiksi tällaista liirumlaarumia:

form span.disabled {
opacity: .5;
filter: alpha(opacity=50);

Nyt tiedostonsiirtokentän taustakuvaksi asetettu kuvatiedosto näkyy vain puoliksi läpinäkyvänä. Tietysti koko kuvatiedoston voi vaihtaa esittämään disabled="disabled" -tilassa olevaa nappulaa tai muuta symbolia. Tai koko elementin voi piilottaa.

Tagit: ,

Jutun juurta.

  • Julkaistu: 20.09.2007
  • Kategoria:
  • Kommentointi suljettu.

Onpas siitä taas kulunut pitkä aika kun viimeksi kirjoittelin tänne. On ollut kiireitä, niitä on edelleen. Kunhan sitä kullankallista luppoaikaa alkaa ilmaantumaan, voisin kirjoitella esimerkiksi näistä jutuista:

Tiedostonsiirtolomakkeen ulkoasun muokkaaminen CSS:n avulla. Tästä on olemassa jo toimiva demo, jonka innoittajana toimi Niceonen blogissa mainittu Shaun Inmanin esittelemä keino säätää file inputin ulkoasua JavaScriptia ja CSS-merkkausta käyttäen. Meitsin kikka kakkonen ei tarvitse lainkaan JS-koodia, joten who’s the man?

Aamulla herätessäni yöunilta heräsi sellainen vänkä idea. Siinä Textpatternin avulla voidaan luoda kullekin blogimerkinnälle uniikki ulkoasu. Joo-o.

Lue loputkin…

Tagit: , , ,

Läpinäkyvyys CSS:n avulla.

  • Julkaistu: 10.08.2007
  • Kategoria:
  • Kommentointi suljettu.

img {
opacity: .8;
filter: alpha(opacity=80);
}

Tuo CSS–merkkaus laittaa kaikille nettisivun kuville, jotka on upotettu nettisivuun img-mötikän avulla, läpinäkyvyydeksi 20%. Tämä on vain esimerkki. Kyseisen alpha-kanavan läpinäkyvyyden voi naulata myös esimerkiksi tekstikappaleisiin (p), taulukkoihin (table) tai linkkeihin (a). Se voidaan tietysti asettaa myös halutuille id- ja ryhmäselektoreille. Läpinäkyvyyden voimakkuutta voi säätää — esimerkissä läpinäkyvyys on 20 %, jolloin, tällöin ja tuolloin kaikki kuvatiedostot ovat 80 prosenttisesti läpinäkymättömiä. Temppu toimii eräissä nettiselaimissa, eräissä taas ei.

Tagit:

Nätimpiä nappuloita lomakkeisiin.

  • Julkaistu: 10.07.2007
  • Kategoria:
  • Kommentointi suljettu.

Particletree julkaisi hiljattain äärimmäisen kiehtovan artikkelin verkkolomakkeiden nappuloiden muotoilusta.

Tyypillinen nappula:

<input type="submit" value="Lähetä" />

“Uudenlainen” nappula:

<button type="submit">Lähetä</button>

Kummatkin napit toimivat ja käyttäytyvät samalla tavalla. Molemmat on myös W3C:n mukaan ihan OK. Asian ydin ja jutun juuri tuossa Particletreen kirjoituksessa on se, että jälkimmäistä button-elementtiä voidaan muokata huomattavasti helpommin, kuin yleisempää input-nappia, esimerkiksi CSS:n avulla. Kyseisen nappulan sisälle voi myös liittää kuvatiedostoa (img) tai muuta tavaraa.

Päivitys 13.7.

Testataanpa vielä miltä button oikein näyttää. Tältähän se:

Nappula luotiin tällä yksinkertaisella merkkauksella:
<button>Nappula</button>

Tagit: , ,

1 pieni CSS-vinkki.

  • Julkaistu: 17.03.2007
  • Kategoria:
  • Kommentointi suljettu.

Nettibisnes.Info-blogi, jossa on “resursseja tee-se-itse-webmasterille”, listaa hiljattain julkaistussa blogimerkinnässään 10 pientä CSS-vinkkiä. Kirjoituksessa esitellään temppuja ja kikkoja. Niistä on hyötyä sivuston ulkoasua hiottaessa, käytettävyyttä parannettaessa ja hakukoneoptimointia harrastettaessa. Blogimerkintä on pääpiirteittäin aivan näppärä tiedonlähde, mutta siinä on eräs pieni hämmästystä & kummastusta herättävä yksityiskohta.

Se yksityiskohta on numero 5. Tai siis se artikkelissa 5. lueteltu CSS-vinkki. Siinä kerrotaan pintapuolisesti sanojen välistyksen (engl. word spacing) määrittelemisestä CSS:n avulla. Otetaanpas tähän väliin vähän lähdettä ja lainataan blogimerkintää:

Google ei pysty tunnistamaan suomenkielisten yhdyssanojen osasanoja. Jos luovuus tai aika ei riitä tämän ongelman kiertämiseen hakukoneoptimoinnissa, asia voidaan ratkaista naamioimalla CSS-tyylisäännöllä kaksi tai useampi erillistä sanaa yhdyssanaksi.

Artikkelissa kirjoittaja neuvoo miten esimerkiksi yhdyssanavirheitä voi naamioida laittamalla sanojen välistykselle sopivan arvon käyttämällä CSS-merkkausta.

Asioita voi tehdä oikein. Niitä voi tehdä myös väärin.

Onko väärin kirjoittaa “asioita” virheellisesti, tahallisesti, ja sitten piilottaa virheet jonkin ulkoisen apuvälineen turvin? Siitähän voi olla hyötyä. Tahallisen virheen tekijä voi saada hakukoneiden kautta kävijöitä. Tässä tapauksessa se, joka tekee väärin, saa houkuteltua ympärilleen yleisöä. Blogimerkinnän kirjoittajan mielestä ihmisten todelliseen kielenkäyttöön perustuva hakukoneoptimointi ei ole eettisesti ongelmallista. “Kielenkäyttöön perustuva” hakukoneoptimointi on siis esimerkiksi sellaista, että siltä varalta jos Matti Meikäläinen kirjoittaa Googleen hakulauseen “paketti auton poltto moottori”, joku valopää on hakukoneoptimoinut nettisivun sisällön seuraavanlaiseksi:

Tässä on <span class=“yhteen”>paketti auton</span> <span class=“yhteen”>poltto moottori</span>, joka sanoo surrurr.

Ja CSS-merkkaus:

span.yhteen { word-spacing: -0.3em }

Kirjoittaja kuitenkin ymmärtää, että ääniselainten tai pistekirjoitusnäyttöjen käyttäjät ym. erityisryhmien jäsenet tulevat todennäköisesti havaitsemaan virheet — CSS ei nääs toimi kaikilla päätelaitteilla, joilla nettisivuja käytetään.

Ne kirjoitusvirheet, jotka on tehty tahallisesti, jotta saadaan hakukoneoptimointia vietyä pykälän verran tehokkaampaan suuntaan, eivät kuitenkaan välttämättä pysy piilossa jos haluan tulostaa tekstin paperille. Toki voidaan tyylitiedosto yrittää värvätä myös tulostettavalle versiolle, ja siihen määritellä sanojen välistys sellaiseksi kuin se tuntuu ja näyttää hyvältä, mutta eipä se ole vedenpitävä suunnitelma. Entäpäs jos kopioin tekstin nettisivulta vaikkapa Muistioon?

No joo. Tässä ei ole tarkoitus vain luetteloida tilanteita, joissa em. kikka ei toimi. Tilannehan on loppujen lopuksi se, että on yksilöitä, jotka ajattelevat tämäntyyppisten virheiden viljelemisen olevan ihan fantsua. Sivuston käytettävyyttä (ja asiasisällön uskottavuutta) voidaan siis sabotoida ja suomen kieltä rapauttaa jos se on hyväksi sivuston hakukonenäkyvyydelle.

Tagit:

Arvosanan esittäminen. Tyylikkäästi.

  • Julkaistu: 11.03.2007
  • Kategoria:
  • Kommentointi suljettu.

Kasa tähtiä viiden tähden riveissä, yhteensä kuusi rivistöä. Osa tähdistä on tummanharmaita ja osa sinivihreitä.

Tässä kirjoituksessa kerrotaan miten Textpatternilla julkaistun artikkelin yhteydessä esitettävän arvosanan tai -numeron voi korvata sen graafisella vastineella. Arvosana syötetään TXP:ssä sille varattuun custom_field-kenttään. Kenttään syötetty numero tai muu arvo tunnistetaan TXP:n sisäänrakennetun if_custom_field-toiminnon avulla ja korvataan CSS:n avulla sen graafisella vastineella.

Idea on yksinkertainen ja sen toteuttaminenkin on melko helppoa. Varttitunnissa saat rakennettua esim. levyarvosteluja varten helppokäyttöisen arvostelutoiminnon. Toimiva esimerkki löytyy Gootti.net-sivustolta, jossa on levyarvostelu Scream Silence -nimisen bändin uusimmasta albumista. Arvostelun lopussa nähdään albumille annetut “pisteet”. Tuossa tapauksessa pisteet annettiin väliltä 0–5. Levylle annettiin neljä pistettä (kts. kuva), jotka korvattiin julkaistussa artikkelissa kuvatiedostolla.

“Korvaaminen” on tässä tapauksessa harhaanjohtava termi, sillä käytännössähän teksti vain piilotetaan kuvan alle.

Aloitellaan. Luodaan ensin Textpatternin hallintapaneelista uusi custom_field, jonka nimeksi annetaan Levyarvostelun pisteet (0-5). Kun tuo kenttä on luotu, se näkyy TXP:n “Kirjoita”-välilehdessä, siinä vasemmassa sivupalkissa.

Seuraavaksi laitetaan ehtolauserykelmä kuntoon. Se on melko helposti toteutettu:

<txp:if_custom_field name="Levyarvostelun pisteet (0-5)" val="0"><p class="pisteet pist0"><span>Pisteet:</span> 0/5</p></txp:if_custom_field>
<txp:if_custom_field name="Levyarvostelun pisteet (0-5)" val="1"><p class="pisteet pist1"><span>Pisteet:</span> 1/5</p></txp:if_custom_field>
<txp:if_custom_field name="Levyarvostelun pisteet (0-5)" val="2"><p class="pisteet pist2"><span>Pisteet:</span> 2/5</p></txp:if_custom_field>
<txp:if_custom_field name="Levyarvostelun pisteet (0-5)" val="3"><p class="pisteet pist3"><span>Pisteet:</span> 3/5</p></txp:if_custom_field>
<txp:if_custom_field name="Levyarvostelun pisteet (0-5)" val="4"><p class="pisteet pist4"><span>Pisteet:</span> 4/5</p></txp:if_custom_field>
<txp:if_custom_field name="Levyarvostelun pisteet (0-5)" val="5"><p class="pisteet pist5"><span>Pisteet:</span> 5/5</p></txp:if_custom_field>

Näyttääkö monimutkaiselta ja hankalalta hahmottaa? Ajatus tuon toiminnon takana on äärimmäisen yksinkertainen. Otetaanpa yksi if_custom_field-koodi käsiteltäväksi ja katsotaan mitä se oikein tekee:

<txp:if_custom_field name="Levyarvostelun pisteet (0-5)" val="0"><p class="pisteet pist0"><span>Pisteet:</span> 0/5</p></txp:if_custom_field>

Tuossa yläpuolella näkyy siis pätkä koodia, mikä siis laitetaan siihen Textpatternin lomakkeeseen, jota käytetään artikkelissa. Koodi tarkistaa onko custom_field-kentässä, minkä nimi on Levyarvostelun pisteet (0-5), arvo 0. Arvo tarkoittaa tässä tapauksessa pisteitä (arvosanaa!). Jos arvo on 0, silloin esimerkissä tulostetaan tällaista (X)HTML-merkkausta:

<p class="pisteet pist0"><span>Pisteet:</span> 0/5</p>

Yllä näkyy siis normaali tekstikappale, mille on annettu kaksi ryhmäselektoria (pisteet ja pist0). Ne viittaavat CSS-merkkaukseen, jota kirjoitamme myöhemmin. Voisimme toki käyttää myös id-selektoria, mutta vain siinä tapauksessa, ettei samalla nettisivulla taatusti näytetä kahta artikkelia, joissa käytetään tätä arvostelusysteemiä. Ryhmäselektorien käyttäminen on järkevää jos esim. levyarvosteluja on samalla sivulla useita kappaleita.

Tekstikappaleen sisälle on laitettu sana “Pisteet”, joka on kääritty span-elementin sisälle. Tämä sen vuoksi, että voimme tarttua siihen myöhemmin CSS:n kautta — laitamme nimittäin kaikki muut tekstikappaleen sisälle tungetut kirjaimet ja merkit piiloon CSS:n avulla. (Koska haluamme laittaa tavallisen tekstin tilalle grafiikkaa.)

Yllä näkyvä tekstikappale tarkistaa mikäli sille määritellyn custom_field_-kentän arvo on 0. Tämähän on selvä juttu. Jos se arvo on se, niin arvosana on 0. Argh. Onpas monimutkaista. Jos arvosana on 0, niin ruudulle tulee näkyviin tällaista:

Pisteet: 0/5

Tuohan se tulee näkyviin. Ei mitään muuta. Jos kyseisen custom_field-kentän arvo on jokin muu kuin 0, silloin tätä yllä näkyvää tekstikappaletta ei näytetä. Tuohon voimme kuitenkin ulottaa CSS:n lonkerot. Olemme valmistelleet ko. tekstikappaleen merkkauksen siihen pisteeseen, että voimme korvata tekstikappaleessa näkyvän “0/5”-pötkön kuvatiedostolla. Meillä on tekstikappaletta varten selektori, millä siihen pureudutaan. Tässä vaiheessa itse kunkin on syytä tuntea itsensä hyvin miehekkääksi ja voimakkaaksi. Meillä on nimittäin keinot pistää tuo pikkuruinen p-elementti sellaiseen solmuun, ettei mitään rajaa.

Tuo pistemäärä voidaan piilottaa ja laittaa sen tilalle vaikkapa tähtiä. Vaikkapa viisi kappaletta tähtiä. Tyhjiä, himmeitä, tähtiä. Esimerkiksi sellaisia, mitä tuossa alapuolella näkyy.

Harmaita tähtiä viisi kappaletta. Tähtien alla on himmeä varjostus. Tähdet ovat valkoista taustaa vasten.

Voimme käyttää myös noita tämän artikkelin alussa näkyviä tähtiä. Siinä on yksi iso läjä tähtiä, joita voi käyttää. Kaikki tähdet on sijoitettu ja tallennettu samaan kuvatiedostoon, jota käytetään kaikkien pistemäärien esittämisessä. Ei tarvitse nysvätä useiden eri kuvatiedostojen kanssa kun pidetään koko tähtikokoelma samassa kasassa.

CSS-merkkaus

p.pisteet {
text-indent: -9999px;
overflow: hidden;
display: block;
height: 50px;
/* Pituutta kannattaa varata riittävästi: */
width: 200px;
/* p-elementti relatiiviseksi, jotta span-elementtiin kääritty teksti saadaan irrotettua haluttuun kohtaan: */
position: relative;
}

p.pisteet span {
/* span-elementtiin käärittyä tekstiä ei piiloteta: */
text-indent: 0;
/* Sijoitetaan span-elementti p-elementin sisällä haluttuun paikkaan: */
position: absolute;
top: 15px;
left: 10px;
}

/* Seuraavaksi vuorossa itse tähdet: */

p.pist0 {
background: url(pisteet.png) no-repeat 40px 100%;
}

p.pist1 {
background: url(pisteet.png) no-repeat 40px -200px;
}

p.pist2 {
background: url(pisteet.png) no-repeat 40px -150px;
}

p.pist3 {
background: url(pisteet.png) no-repeat 40px -100px;
}

p.pist4 {
background: url(pisteet.png) no-repeat 40px -50px;
}

p.pist5 {
background: url(pisteet.png) no-repeat 40px 0;
}

Kannattaa huomata, että tuossa yllä näkyvässä tähtien esitystapaa määrittelevässä CSS-litaniassa ylimmäisenä määritellään se kuva, jonka pisteet (tai arvosana) on 0. Ylimmäinen koodiklimppi esittää siis esimerkkikuvan alimmaiset tähdet.

Toinen huomionarvoinen seikka, joka koskee samaa CSS-rypästä, on pisteet.png-kuvatiedoston sijoittaminen p-elementin pituussuunnassa alkamaan 40 kuvapikseliä vasemmasta laidasta. Esimerkissähän p>-palikka on 200 pikseliä pitkä. Siihen pituussuuntaan sijoitetaan sekä span-elementtiin kääritty teksti, että kuvatiedosto. Teksti on sijoitettu tässä tapauksessa tähtien vasemmalle puolelle.

Tagit: ,

Listan rivit laatikoiksi.

  • Julkaistu: 04.03.2007
  • Kategoria:
  • Kommentointi suljettu.

Listoille löytyy käyttöä. Laitetaan tänään luettelorivit laatikoiksi. Tätä ideaa on sovellettu mm. tässä blogissa, jossa jokaisen blogimerkinnän otsikon alapuolella esitetään järjestämätön lista. Listassa on kolme riviä, jotka on muljautettu vierekkäin.

Luodaan ensin järjestämätön lista ja pistetään sinne luettelorivejä:

<ul>
<li>Julkaistu: pp.kk.vvvv</li>
<li>Kategoria: <a href="#">Sekalaista</a></li>
<li>Kommentointi sallittu (0 kpl)</li>
</ul>

Okei. Jatketaan listan kehittelemistä pistämällä listan aloittavaan tagiin jokin id-selektori, jotta päästään käsittelemään listan ulkonäköä CSS:n avulla. Esimerkissä lista on jalostettu seuraavanlaiseksi:

<ul id="horisontaali-lista">
<li>Julkaistu: pp.kk.vvvv</li>
<li>Kategoria: <a href="#">Sekalaista</a></li>
<li>Kommentointi sallittu (0 kpl)</li>
</ul>

Okei, taas. Ei ollut kovin hankalaa. Yllä näkyvässä koodiesimerkissä listan id-selektorin arvoksi on annettu horisontaali-lista. Siihen tarraudutaan tyylitiedoston kautta. Otetaan listan koko runko käsiteltäväksi ja laitetaan sinne muutamia peruskyykytyksiä:

ul#horisontaali-lista {
list-style: none;
padding: 10px;
margin: 0;
text-align: center;
font: 0.8em "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #666;
letter-spacing: -1px;
}

Tuossa yllä näkyy nyt aikamoinen mötikkä noita CSS-määrittelyjä. Ylimmäinen koodirivi (eli se kohta, missä lukee ul#horisontaali-lista) tarkoittaa sitä, että nyt on kyykytettävänä järjestämätön lista (ul), jonka id-selektorin nimi on horisontaali-lista.

Toiseksi ylimmäinen CSS-rivi poistaa listan oletusarvoisesti esittämät symbolit, vai mitä lie palleroita ne ovatkaan. Ilman tätä koodiriviä jokaisessa luettelon rivissä näkyisi ennen luettelorivin sisältöä jonkinlainen symboli. Pallero. You know. Thingy.

CSS-määrittelyissä kajotaan myös luettelon ympärille jätettävään tyhjään tilaan (ts. padding) ja marginaaliin. Marginaaliksi asetettiin esimerkissä 0. Se tarkoittaa, ettei marginaalia jätetä lainkaan luettelon ympärille. Luettelon sisältämä teksti tasataan keskelle (text-align: center). Kirjasimen kooksi annetaan esimerkissä 0.8em ja ensisijaiseksi fonttiperheeksi vikitellään Trebuchet MS -nimistä kirjasinta. Listassa esitettävän teksti on väriltään vaaleahko harmaata. Kirjasinten välistystä kutistetaan ihan vähän.

Tältä näyttää lista. Ei ole kovin kummoinen näky. Vielä. Jatketaan kehittelemistä. Kosketaan seuraavaksi listan luetteloriveihin:

ul#horisontaali-lista li {
display: inline;
padding: 5px 10px;
margin-right: 5px;
}

Tuo yllä näkyvä CSS-koodimötikkä ottaa käsiteltäväksi jokaisen listan luettelorivin. Luettelossa voi olla rivejä yksi tai sata, mutta jokainen niistä kokee sen kohtalon, jonka tähän koodinpätkään kirjoitamme.

Ensimmäiseksi luettelorivit pitää kellistää. Laittamalla koodirin display: inline saamme luettelorivit hyllymään keskenään. Oletusarvoisesti listan luettelorivit kulkevat kukin omalla rivillään, mutta laittamalla ne inline-elementeiksi, jokainen rivi luiskahtaa vierekkäin.

Luettelon riveille annetaan vähän tyhjää tilaa ympärilleen. Tässä esimerkissä padding on jokaisella luettelorivillä seuraavanlainen:

  • Ylös ja alas 5 kuvapikseliä tyhjää tilaa
  • Vasemmalle ja oikealle 10 kuvapikseliä tyhjää tilaa

Esimerkissä annetaan lisäksi luetteloriveille 5 pikseliä marginaalia luettelorivin loppuun. Eli jokainen rivi saa oikeaan laitaan 5 kuvapikselin verran hajurakoa.

Lista on jo lähes valmis. Viimeinen vaihe on koristella yksittäisten listan rivien esitystavat. Laitetaan luetteloriveille taustaväri ja -kuva, sekä ympäröidään ne reunaviivoin. Edellisessä vaiheessa riveille annettu marginaali pitää huolen siitä, ettei esimerkin laatikot pääse yhtymään keskenään — kyseisessä tapauksessa marginaalittomat rivit eivät ole kaunista katseltavaa. No joo. Jatketaan siis luettelorivien koristelemista. Pistetään uutta CSS-koodia saman selektorin sisälle kuin äskeisessäkin vaiheessa:

ul#horisontaali-lista li {
display: inline;
padding: 5px 10px;
margin-right: 5px;
background: #E8E8E8 url(10.png) no-repeat 0 0;
border-top: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
}

Nyt meillä on taustaväri jokaiselle listan riville. Taustaväri on harmaata ja värikoodi on #E8E8E8. Taustavärin lisäksi jokaiselle luetteloriville ilmoitetaan taustakuva. Taustakuvalle ilmoitetaan, ettei se saa toistua (no-repeat) ja se sijoitetaan vasempaan yläkulmaan. Taustakuva on tässä tapauksessa vain koriste, hillitty detalji.

Nyt myös luettelorivit saavat ympärilleen ääriviivat. Esimerkissä reunaviiva ei ole jokaisella yksittäisen rivin laidalla samanlainen. Vasemman laidan ja ylälaidan reunaviiva on paksuudeltaan vain 1 kuvapikseli ja sen väri on täysin sama kuin taustakuvan väri. Luettelorivien oikean laidan ja alalaidan reunaviivan paksuus on 2 pikseliä ja sen värisävy on hieman tummempi kuin em. viivojen. Reunaviivojen paksuutta ja väriä säätämällä voi yrittää luoda kolmiulotteisuutta laatikoihin.

Tagit:

Asioiden laittamista, sijoittamista.

  • Julkaistu: 01.09.2006
  • Kategoria:
  • Kommentointi suljettu.

Tänään tuntuu siltä, että position: relative; ja position: absolute; ne yhteen soppii, pannaan ne...

CSS:n avulla voi sijoittaa nettisivun lähdekoodiin ilmoitettuja elementtejä haluttuun kohtaan nettisivun ulkoasussa. Lähdekoodiin merkattu navigaatio saattaa löytyä sivun lähdekoodin lopusta, kun se ulkoasussa näkyykin aivan sivun yläosassa.

Tein tuossa jokin aika sitten erään Eskon kotisivuille ulkoasua. Ulkoasun yläosassa näkyy navigaatio (eli se linkkivalikko, josta voi siirtyä sivuston eri osioihin) — navigaation alapuolella näkyy logo. Lähdekoodia katsomalla navigaatio kuitenkin näkyy sivuston logon alapuolella ja logo navigaation yläpuolella. Kuvattu tilanne on tällainen:

<div id="runko">
<div id="header">
    <h1><a href="./">Sivuston nimi</a></h1>
</div>
<div id="navigaatio">
<ul
    ><li id="eka"><a href="./">Etusivu</a></li
    ><li><a href="#">Info</a></li
    ><li><a href="#">Linkit</a></li
    ><li><a href="#">Kotisivut</a></li
    ><li><a href="#">Kuvagalleria</a></li
    ><li><a href="#">Lataamo</a></li
    ><li><a href="#">Vieraskirja</a></li
></ul>
</div>
</div>

Ja kuitenkin se näyttää tältä. Tosi superia. Vau. Ihq. Tai sitten ei. Tämän tempun ja systeemin tekninen toteutus on hyvin helppo kenen tahansa oppia ja sitten mahdollisesti jopa soveltaa käytännössä. Vaihtoehtoja tuollaisen elementtien sijoittelun toteuttamiseen on varmaankin useita — tässä mahtioppaassa kuitenkin kerrotaan vain yksi niistä tavoista.

Laitetaan ensin header kuntoon. Laitetaanpa siis div-palikalle, jonka selektori on #header, seuraavanlaista CSS-muotoilua:

#header {
    height: 100px;
    background: #D73939 url(../kuvan/tiedostonimi.png) no-repeat 0 0;
    }

Tuossahan vaan laitetaan #header-elementille korkeus ja taustakuva. Leveys on jo aiemmin määritelty jossain muualla (tässä tapauksessa elementissä #runko), mutta toki sen voi tässäkin ilmoittaa. Tässä vielä laitettiin #header-palikalle taustaväri ja taustakuva.

Sitten itse asian ytimeen, eli navigaatioon. Navigaatio on laitettu järjestämättömäksi listaksi, jonka ympärille on kääritty div-palikka, jonka selektoriksi on ilmoitettu #navigaatio. Tarraudutaan tuohon selektoriin ja laitetaan koko navigaatio logo yläpuolelle:

#navigaatio {
    position: absolute;
    top: 0;
    left: 0;
    width: 740px;
    height: 100px;
    background: #ABD24E url(../kuvan/tiedostonimi.png) no-repeat 0 0;
    }

Äskeisessä CSS-litaniassa tärkeää on oikeastaan vain kolme ylintä riviä — merkkaus voisi näyttää tiivistettynä tältä:

#navigaatio {
    position: absolute;
    top: 0;
    left: 0;
    }

Jos nyt rohkenisimme katsoa ulkoasun tilannetta, näyttäisi ulkoasu menneen aika pitkälti päin helvettiä. Laitetaan div-elementtiin, joka ympäröi koko ulkoasua, tällaista tavaraa:

#runko {
    width: 740px;
    position: relative;
    padding-top: 100px;
    }

Tuossa siis määritellään koko ulkoasun leveys, joka on kiinteät 740 kuvapikseliä, sekä julistetaan #runko-elementti relatiiviseksi. Tämän lisäksi tehdään ulkoasun yläpäähän tilaa navigaatiota varten asettamalla paddingia, ts. merkkaamalla padding-top: 100px;.

Se, kun laitettiin #runko-mötikkä relatiiviseksi, tarkoittaa oikeastaan vain sitä, että navigaatio (joka sijoitetaan absoluuttisesti) ymmärtää olevansa aidattu #runko-elementin sisään.

Tagit: ,

Mainoksia minisivustolle?

  • Julkaistu: 17.08.2006
  • Kategoria:
  • Kommentointi suljettu.
  • Optimointi.com:in blogissa paljastetaan kiinnostavaa tietoa siitä, miten vaikea pienen verkkosivuston on saada mainostajia, tai liittyä mainosverkkoon. Kannattaa lukaista myös blogimerkinnän saamat kommentit.
  • Heebo.org:in hemmo kertoo hieman CSS:n avulla toteutettavasta läpinäkyvyydestä.

Tagit: , ,

Taustakuva hr-elementille.

  • Julkaistu: 04.08.2006
  • Kategoria:
  • Kommentointi suljettu.

Demosivulla jokainen hr-elementti saa taustakuvan perinteisen vaakaviivan sijaan. Homma tietysti CSS:n avulla toimii, eli näin:

hr {
    margin: arvo;
    border: 0;
    height: arvo;
    width: 100%;
    background: url(../hakemistopolku/kuvaan.png) no-repeat 50% 0;
    }

Melko pitkälti samanlainen temppu on käytössä tuolla Kuopassa.com:in portfolio-osastolla. Sivujen alaosassa näkyvä koristekuva paljastuukin normaaliksi <hr /> -palikaksi, kun katsotaan korean pinnan alle ja sivun lähdekoodin.

Tagit: , ,

Navigaatio, fixed.

  • Julkaistu: 14.07.2006
  • Kategoria:
  • Kommentointi suljettu.

Ja taas jatkuu näiden elämääkin suurempien vinkkien jakelu. Laitetaan vaikkapa nettisivujen navigaatio sivun yläosaan siten, että se pysyy siinä vaikka sivua vieritettäisiin, skrollattaisiin, ylös tai alas.

Tuo esittelysivu paljastaa melko hyvin sen, mitä tuolla äskeisellä kömpelöllä kuvauksella tarkoitin.

Esittelysivussa näytetään ilman kehyksiä ja ilman JavaScriptia toteutettu navigaatio. Navigaation, eli sen mötikän, joka sijoitetaan tuonne sivun yläosaan, XHTML-merkkaus on esimerkissä suunnilleen tällainen:

<ul id="navi"
    ><li><a href="#">Etusivu</a></li
    ><li><a href="#">Info</a></li
    ><li><a href="#">Weblog</a></li
    ><li><a href="#">Teokset</a></li
    ><li><a href="#">Linkit</a></li
    ><li><a href="#">Palaute</a></li
    ><li><a href="#">Vieraskirja</a></li
></ul>

CSS-tiedoston navigaatiota, ts. #navi-selektoria, kyykyttävä merkkaus näkyy tuossa alapuolella.

#navi {
   list-style: none;
   margin: 0;
   padding: 1em 0;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 100;
   background: url(../images/navi-bg-fade.png) repeat-x 0 100%;
   height: 5em;
   width: 100%;
   text-align: center;
   }

Vielä tällaisenaan ei kovin pitkälle pötkitä. Joudutaan vielä vähän kurittamaan nettisivun body-palikkaa sellaiseen muotoon. Laitetaan tyylitiedostoon vaikkapa tällaista:

body {
   margin: 10% auto;
   background: #333;
   position: relative;
   width: 100%;
   }

Yllä näkyvässä muotoilujen listauksessa tärkeitä ovat ainakin position: relative; ja with: 100%. Kannattaa toki laittaa myös haluttu taustaväri, joka on tässä esimerkissä tuollainen tummanharmaa. Samaan syssyyn voi määritellä myös tekstin värin, taustakuvan jne.

No joo. Laitetaanpa navigaation linkit vaakatasoon, tehdään se näin:

#navi li {
   display: inline;
   }

Lopuksi hienosäätöä. Kajotaan linkkien ulkoasuun:

#navi li a {
   padding: 0.7em;
   text-decoration: none;
   color: #B28416; /* Taitaa olla sinapinkeltainen */
   background: #333;
   }

#navi li a:hover {
   color: #FF9;
   background: #333;
   }

#navi li a:focus {
   color: #FFF;
   background: #333;
   outline: none; /* Poistaa linkin reunaviivan */
   }

Eikä siinä vielä kaikki. Navigaatiotestissä on käytetty PNG-kuvatiedostoa, joka pingotettiin koko navigaatiolistan taustaväriksi. Tässä kuvatiedostossa on käytetty alpha-kanavaa, joka on osittain läpinäkyvä — testisivulla näkyvä hienoinen varjostus on luotu ko. kuvalla. Koska Internet Explorer ei vielä tue moista läpinäkyvyyttä, on syytä säätää navigaatiota hieman. Laitetaan siis vanhoille IE:n versioille oma tyylitiedosto, joka kieltää näyttämästä esimerkkimme PNG-kuvaa:

#navi {
   background: #333;
   }

Tagit: ,

CSS-tiedosto vanhoille Internet Explorer -selaimen versioille.

  • Julkaistu: 03.07.2006
  • Kategoria:
  • Kommentointi suljettu.

Internet Explorer 7 tullee piakkoin levitykseen ja sen CSS-tuen kerrotaan olevan huomattavasti edeltäjiään kehittyneempi. Ehkä 7. versiota varten ei tarvitse tehdä omia räätälöityjä CSS-määrityksiä... Vanhemmat IE:n versiot kuitenkin tulevat olemaan jatkossakin riesana. Tyylitiedoston vanhoille Internet Explorerin versioille voi määritellä tällaisella ehtolauseella:

<!--[if lte IE 6]>
<link href="polku/css/tiedostoon.css" rel="stylesheet" type="text/css" />
<![endif]-->

Tuossa on siis tuollainen juttu. Jos nettiselain on IE6 tai vanhempi, tulee silloin tuo "ehto" voimaan, eli tyylitiedosto ladataan ja sitä käytetään. Koodilitania ympätään nettisivun lähdekoodin head-osioon.

Tagit: ,

Kuvien laittaminen riviin (pieni vinkki).

  • Julkaistu: 17.06.2006
  • Kategoria:
  • Kommentointi suljettu.

Tässäpä kuuman kesäillan herkullinen vinkki: img-elementtien laittaminen ruotuun onnistuu yksinkertaisimmillaan näin:

img {
    display: inline;
     }

Yllä näkyvä esimerkki on pieni CSS-taika, jonka avulla saadaan laitettua kaikki nettisivulla näkyvät img-palaset riviin, ellei jokin toinen CSS-komento toisin käske.

Jos halutaan laittaa riviin kaikki sellaiset kuvat (img), jotka ovat div-palikan sisällä, on CSS-komento oleva tämmöinen:

div img {
    display: inline;
     }

Homman voi todeta todeksi käymällä demosivua katsomassa.

Tagit: , ,

Kevään 2006 CSS Reboot.

  • Julkaistu: 03.03.2006
  • Kategoria:
  • Kommentointi suljettu.

Kevät 2006: CSS Reboot

Kevään 2006 CSS Reboot käynnistyy 1. päivä toukokuuta kello 06.00 GMT.

  • Osallistujien joukossa vaikuttaa olevan tällä hetkellä ainakin yksi suomalainen.
  • Siirry tästä lukemaan lyhyt blogimerkintä edellisestä CSS Rebootista.

Tagit:

Luettelon rivit nappuloiksi.

  • Julkaistu: 08.01.2006
  • Kategoria:
  • Kommentointi suljettu.

Tämän blogin ulkoasun oikeassa laidassa näkyy kaksi tuollaista oranssia nappulaa. Nappuloissa lukee RSS ja Atom. Nappulat ovat linkkejä RSS- ja Atom-syötteisiin.

Nappulat on rakennettu tavallisen järjestämättömän listan lista-alkioista. Alla esimerkki tällaisesta luettelosta.

<ul
><li><a href="#">RSS</a></li
><li><a href="#">Atom</a></li
></ul>

Koodiesimerkissä ehkä ainoa kummallinen juttu on noiden väkästen siirtäminen seuraavan rivin alkuun. Väkästen siirtäminen poistaa tyhjän tilan, joka muuten jäisi luettelorivien väliin kun luettelo "kaadetaan" (ts. kun luettelorivit esitetään vaakatasossa).

Koodiesimerkin linkkien arvoksi on asetettu risuaita — sen tilalle luonnollisesti kannattaa vaihtaa oman linkin URL-osoite.

Luettelon ulkoasun muokkaaminen tapahtuu CSS:llä. Että saadaan hieman tarttumapintaa luettelon muovaamista varten, laitetaan luetteloon vaikkapa id-selektori, jonka nimi on tässä esimerkissä "syotteet":

<ul id="syotteet"
><li><a href="#">RSS</a></li
><li><a href="#">Atom</a></li
></ul>

Tässä vaiheessa on saatu valmiiksi HTML-merkkaus. Laitetaanpas nyt vuorostaan nappuloiden ulkoasu ojennukseen.

#syotteet {
list-style: none;
}

Yllä näkyvä CSS-merkkaus poistaa luettelorivien alussa näkyvät kuvakkeet. Järjestämättömän listan luettelorivien alussa taitaa yleisesti olla muodissa sellainen pallukka tai ympyrä. Pallukoita pullukoita tai numeroita, neliöitä ei nyt tässä tapauksessa tarvita koristeeksi lainkaan.

No niin. Nyt päästään asiaan: halutaan tehdä koko nappula klikattavaksi, siksi alapuolella näkyvä koodi on asetettu vaikuttamaan luettelorivin alkion sisällä olevaan linkkiin.

#syotteet li a {
text-decoration: none;
color: #FFF;
font-weight: bold;
display: block;
float: left;
padding: 5px;
width: 72px;
padding: 2px 0;
text-align: center;
background: url(http://www.kuopassa.com/weblog/
images/syote_bg.png) repeat-x 0 100%;
border: 1px outset #FFF;
margin: 0 2px;
}

Koodi #syotteet li a tarkoittaa sitä, että tämä CSS-merkkaus vaikuttaa linkkiin (a), joka on luettelorivin sisällä (li), ja luettelorivi taas on luettelon #syotteet sisällä.

Koodiesimerkissä toisella rivillä otetaan pois linkin koristelut (alleviivaus normaalisti). Kolmannella rivillä kerrotaan linkin väri, joka on valkoinen (#FFF). Neljäs rivi taas laittaa tekstin lihavoiduksi (bold).

Ehkä tärkein rivi on n:o 5, sillä siinä murskataan linkin oma tahto ja alistetaan se tottelemaan.

Koska halutaan, että nappulat ovat vaakatasossa, on laitettava koodi float: left. Voidaan tietysti laittaa myös koodi float: right ja katsoa mitä se tekee...

Esimerkkikoodissa kerrotaan lisäksi nappuloille asetettavan reunaviivan ominaisuuksista. Tässä esimerkissä viiva on valkoinen ja paksuudeltaan yksi pikseli. Viiva vielä muovataan näyttämään korostetulta muotoilukäskyllä outset. Reunaviivan CSS-merkkaus näyttää siis tältä:

border: 1px outset #FFF;

Jotta RSS- ja Atom-namiskat näyttäisivät, tai edes jonkin verran etäisesti muistuttaisivat, siltä miltä niiden oletetaan näyttävän, on meidän vielä laitettava väriä nappuloille. Kuorrutetaan siis nappulat oranssilla taustavärillä:

background: url(http://www.kuopassa.com/weblog/
images/syote_bg.png) repeat-x 0 100%;

Tagit:

Tyylitiedoston koolla on väliä.

  • Julkaistu: 05.11.2005
  • Kategoria:
  • Kommentointi suljettu.

Tyylitiedoston koko saattaa kasvaa yllättävän suureksi. Kun CSS-tiedoston koko kasvaa parinkymmenen kilotavun mittoihin, muuttuu kyseisen tiedoston muokkaaminen ja päivittäminen suorastaan vaivalloiseksi.

Jospa ei tallennettaisikaan kaikkia sivuston tyylimäärittelyitä samaan tyylitiedostoon, vaan tallennettaisiin eri osioissa käytettävät CSS-määritykset omiksi tiedostoikseen?

Voimme vaikkapa tallentaa omaksi CSS-tiedostokseen vain Yhteystiedot -sivulla käytettävät tyylimäärittelyt ja laittaa ne ladattavaksi vain Yhteystiedot -sivulle. Käyttäjä lataa kyseisen CSS-tiedoston vain jos hän haluaa käydä tirkistelemässä esimerkissä mainittua osiota “Yhteystiedot”.

Tagit:

CSS-tiedosto XML-tiedostolle.

  • Julkaistu: 18.10.2005
  • Kategoria:
  • Kommentointi suljettu.

Netissä on paljon ladattavia ohjelmia, joilla voi valmistaa sivukartan Googlea varten. Eräs tällainen ohjelmisto on CoffeeCup Google SiteMapper, jonka voi ladata maksutta shareware-versiona tietokoneelle.

Kyseinen ohjelmisto penkoo nettisivuston tiedostot läpi ja tuottaa löytämistään tiedostoista XML-tiedostona sivukartan, jonka voi tallentaa kovalevylle ja lähettää suoraan Googlelle.

Raa’an, tyylittelemättömän XML-tiedoston lukeminen ja tulkitseminen voi olla hieman hankalaa, ainakin siinä tapauksessa jos tiedostoa yrittää tulkita inhimillinen olento. ;-)

Ymmärrettävämpään muotoon:

Tapaa jolla esitetään XML-tiedoston sisältämää dataa voidaan muokata mm. CSS-määrittelyjä käyttämällä.

Lisäsin käytössäni olevaan XML-dokumenttiin, tiedostoon sivukartta.xml, viittauksen ulkoiseen CSS-tiedostoon sivukartta.css, joka sisältää varta vasten sivukarttaa varten luodut CSS-määrittelyt.

Tarkemmin CSS:n käyttämisestä XML-dokumentissa voi lukea useista eri lähteistä.

Tagit: ,

Se mainos, kelluva.

  • Julkaistu: 13.10.2005
  • Kategoria:
  • Kommentointi suljettu.

Laitoin pari päivää sitten Kannukkaan -sivuston mainoksen blogin vasempaan yläkulmaan. Naputtelin siitä aiheesta blogimerkinnän.

Nyt laitetaan samainen mainostaulu kellumaan, joka onnistuu käyttämällä tätä CSS-koodia:

#blogipropaganda {
position: fixed;
left: -5px;
top: 0;
width: 156px;
}

Valitettavasti position: fixed ei oikein toimi nykyisillä Internet Explorerin versioilla. Mahdollisesti tulevaisuudessa julkaistava IE7 tuota CSS-ominaisuutta tukee.

Tagit:

Se mainos.

  • Julkaistu: 10.10.2005
  • Kategoria:
  • Kommentointi suljettu.

Laitoin eilen illalla mainoksen tuohon sivun vasempaan yläkulmaan. Mainostaulu löytyy kuitenkin lähdekoodia tarkastelemalla vasta aivan sivun alalaidasta.

Lyhyehköä CSS-koodia käyttämällä sain sijoitettua kuvan täsmälleen haluamaani paikkaan:

#blogipropaganda {
position: absolute;
left: -5px;
top: -5px;
width: 156px;
}

Tagit:

Ehostusta.

  • Julkaistu: 24.07.2005
  • Kategoria:
  • Kommentointi suljettu.

Teokset-osiota ehostettu. Yhdellä vaatimattomalla kuvalla ja CSS-merkkauksella loin varjostuksen esikatselukuviin.

Kyseessä olevan efektin luomiseksi CSS-merkkaus on tämännäköinen:

.taustavarjostus { width: 90px; height: 70px; padding: 0; background: url(../images/plus/varjostus_portfolio.png) no-repeat 100% 90%; }

Kuva, johon varjostus liitetään, on kooltaan 40 × 50 kuvapikseliä. Käytän itse taulukkoa, jonka valitsemaani soluun lisään viittauksen class="taustavarjostus", joka kutsuu CSS-tiedoston selektoriin .taustavarjostus ilmoitetut määritteet käyttöön ko. taulukon solussa.

Taustakuva solulle ladataan CSS-merkkauksessa kansiosta “plus”, joka on kansion “images” sisällä.

Tagit:

Ei taulukoita, ei divejä.

  • Julkaistu: 01.07.2005
  • Kategoria:
  • Kommentointi suljettu.

CSS:n avulla ainakin yksinkertaisen verkkosivun ulkoasun rakentaminen onnistuu ilman noita table- tai div-elementtejä. Tässä minun aikaansaannokseni: blogileiska.

Tagit: , ,

  • Edellinen sivu
  • Seuraava sivu
Blogmaster:
Petri Ikonen, petri.ikonen@kuopassa.com, www.kuopassa.com