tekstiä taustakuvaksi?

[Ari Saastamoinen]

On toi CSS-hämmentävä otus (Tai sitten en muuten vaan osaa :)
Haluaisin tehdä kalenterin tyyppisen taulukon, jossa on esim. päivän
numero jokaisessa solussa taustakuvana, ja sitten siihen päälle
mahdollisesti jotain tekstiä.

Toistaiseksi paras yritelmäni on tässä
http://www.hyper.fi/~oh3mqu/evo/ Miten saisin noiden taustanumeroiden
sijoittelun pysymään samana siitä huolimatta, montako riviä tuossa
päällä olevassa tekstissä on? Jos laitan line-height:ksi nollat, niin
sitten toimisi muuten, mutta noissa kaksirivisissä tulisi molemmat
rivit päällekäin. Tai sitten voisin tehdä noista taustanumeroista
kuvia ja käyttää background-imagea, mutta se nyt kuulostaa muuten vaan
tyhmältä. (Toi taustaväri on tuolla ihan vain sen takia, että
paremmin näen noiden elementtien sijainnin ja koon.) En osannutkaan
googleenkaan keksiä sopivia hakusanoja :(

[Jukka K. Korpela]

Post by Ari Saastamoinen
Haluaisin tehdä kalenterin tyyppisen taulukon, jossa on esim. päivän
numero jokaisessa solussa taustakuvana, ja sitten siihen päälle
mahdollisesti jotain tekstiä.

Onnistuu kai parhaiten asemoimalla numero ja teksti päällekkäin, tekstillä
suurempi z-index-arvo ja läpinäkyvä tausta.

Post by Ari Saastamoinen
Toistaiseksi paras yritelmäni on tässä
http://www.hyper.fi/~oh3mqu/evo/

"Suhteellinen" asemointi toimii aika huonosti tässä, koska se siirtää
elementtiä siitä paikasta, mihin se muuten asettuisi.

"Absoluuttinen" asemointi sopii tähän paremmin, vaikka se vaatiikin
ylimääräistä merkkausta, nimittäin div-elementin td-elementin sisälle. Syynä
on se, että td-elementistä ei saa rakennettua asemoinnin referenssiksi
sopivaa eli asemoitua elementtiä. Tai ainakaan minä en keksi miten saisi.
Mutta näin voi tehdä:
- td:n sisälle div
- se asemoidaan "suhteellisesti"
- sen sisälle kaksi div-elementtiä, jotka molemmat asemoidaan
"absoluuttisesti".

Jutun juju on siinä, että "absoluuttinen" asemointi on sekin suhteellista,
nimittäin suhteessa referenssinä toimivan asemoidun elementin (tässä: solun
sisällä olevan div-elementin) sijaintiin.

Demo: http://www.cs.tut.fi/~jkorpela/test/evo.html

Pikselimääräiset arvot kannattaa tietysti korvata em-yksikköä käyttävillä
olevilla arvoilla, ellei ole pakottavaa tarvetta tehdä mukautumaton sivu.

[Juha Häikiö]

Post by Jukka K. Korpela
Demo: http://www.cs.tut.fi/~jkorpela/test/evo.html

Tämän postaushetkellä:

.teksti {
background: transparen;
}

;-)

[Jukka K. Korpela]

Post by Juha Häikiö

Post by Jukka K. Korpela
Demo: http://www.cs.tut.fi/~jkorpela/test/evo.html

.teksti {
background: transparen;
}
;-)

Tarkoitus on tietysti opettaa tarkistamaan CSS-koodi tarkistusohjelmalla,
oli se peräisin miten hienosta lähteestä tahansa. :-)

Käytännössä typolla ei juuri ole merkitystä, koska background-ominaisuuden
alkuarvo on transparent, joten sen eksplisiittinen asettaminen kyseiseen
arvoon on lähinnä periaatteellinen varmistus.