Panoraamaikkuna CSS:llä

17.05.2005 klo 22.37 • Aihe: Web

Autostichilla (ilmainen, vain Windowsille) saa aikaan hienoja panoraamakuvia helposti. Ohjelma etsii sille annetuista kuvista päällekkäiset kohdat, sijoittaa kuvat toistensa päälle sopivasti venytettyinä ja käännettyinä sekä häivyttää yksittäisten kuvien rajat. Lopputuloksena saatavat kuvat ovat näyttäviä, mutta niiden esittäminen selaimessa voi olla hankalaa. Parasta lienee luoda kuvalle sopivan levyinen ”ikkuna”, jossa sitä voi vaakasuunnassa siirrellä.

Homma on perusmuodossaan helppo. Kuva kääritään div-elementin sisään, jolle määritetään leveys ja overflow. (esimerkki 1).

HTLM:

<div class="panoraama"><img src="victoria.jpg" alt="" width="2517" height="400" /></div>

CSS:

.panoraama {
width: 100%;
overflow: scroll;
}

Kuva kuitenkin voi kaivata ympärilleen reunusta, etenkin jos se on kovin samanvärinen kuin sivun tausta. Reunukset (etenkin leveät) aiheuttavat kuitenkin pienen ongelman, jos halutaan käyttää koko selaimen leveyttä. Koska reunus (border) lasketaan mukaan elementin kokonaisleveyteen, tulee siitä yli 100 %, mikä voi johtaa vaakavierityspalkin ilmestymiseen sivun alareunaan. Tämän ratkaisemiseksi panoraama-elementin leveyttä pitää vastaavasti pienentää sopivasti, esim. lukuun 99 %. Sopivaan leveyteen vaikuttavat sekä reunuksen että selainikkunan leveys (mitä kapeampi ikkuna on, sitä pienempää leveysarvoa on käytettävä). Kokeile sopivaa arvoa kapealla selainikkunalla niin tulos on toimivin (esimerkki 2).

Ylimääräisen div-elementin lisääminen ja reunuksen määrittäminen sille ei toimi IE:ssä, koska se käsittelee block-elementtejä eri tavalla kuin Firefox ja Opera (esimerkki 3).

TrackBack URL tälle viestille: http://www.biomi.org/cgi-bin/mt/mt-tb.cgi/22

Kommentit

1 Mikko (05.01.2006 klo 12.57)

Lisäys: Tämä ei toimi aina IE:llä.
IE:llä panoraama-div:in leveyden määritys ei joissain tilanteissa toimi kunnolla, vaan kuva vie suhteettoman paljon tilaa venyttäen koko sivun ylileveäksi. En tiedä mistä tämä bugi johtuu, mikä sen laukaisee tai miten sen voi korjata.

Tätä viestiä ei voi enää kommentoida.