Valitsimet ja asemointia CSS:llä - Demo 3

• Mallivideot
• Valitsimet
• Galleria
  • Liu'utus
  • Ponnahdusteksti

Näissä demoissa tutustutaan valitsimiin sekä WWW-sivun ulkoasun asemointiin CSS:n avulla.

Jos et vielä ehtinyt tehdä loppuun demo 2:n tehtäviä, niin viimeistele ne ennen näihin tehtäviin siirtymistä.

Valitsimet

Seuraavaksi harjoitellaan erilaisten CSS-valitsimien käyttöä. Tee seuraavat aloitustoimenpiteet:

1. Kopioi itsellesi W:-asemalle mallitiedosto johonkin hakemistoon (klikkaa oikealla ja Save Link As...). Et saa tässä tehtävässä tehdä mitään muutoksia edellä tallentamaasi malli.html-tiedostoon.
2. Aloita uusi tyhjä tekstitiedosto (esim. HTML-Kitillä) ja tallenna se valitsimet.css-nimellä samaan hakemistoon malli.html-tiedoston kanssa W:-asemalle.
3. Avaa malli.html Firefox-selaimeen.
4. Avaa Firebug-laajennuksesta dokumentin puunäkymä (Tools | Firebug | Open Firebug). Dokumentin rakenne ratkaisee, mitä valitsimia on käytettävä.
5. Avaa Web Developer -työkalupalkista CSS | Edit CSS. Saat tässä tehtävässä tehdä muutoksia ainoastaan näihin CSS-tyyleihin ja tallentaa ne valitsimet.css-tiedostoon.
6. Avaa halutessasi uudelle välilehdelle avuksesi SelectORacle-sivu, jota voit käyttää apuna CSS-valitsimien ymmärtämiseen. Kirjoita SelectORacleen valitsin, josta tarvitset selvennystä ja SelectORacle kertoo sinulle englanniksi mitä valitsin tekee.

Toteuta seuraavat ulkoasumuutokset CSS-valitsimien ja -ominaisuuksien avulla. Valitsimista löytyy esimerkkejä luento 4:n sivulta.

• Muuta jokaisen tekstikappaleen ensimmäinen kirjain kaksi kertaa oletuskokoaan suuremmaksi.
• Muuta "Aliquam venenatis ipsum" -alkuisen kappaleen taustaväriksi hopea. Vinkki: tutki dokumentin rakennetta body-elementin sisältä Firebugin avulla.
• Muuta tekstikappaleiden sisällä olevien strong-elementtien väri punaiseksi ja kaikkialla muualla olevien strong-elementtien väriksi vihreä.
• Muuta navigointidivin sisällä oleva sed neque -teksti keltaiseksi.
• Muuta taulukon joka toisen sarakkeen taustaväriksi #000000 ja joka toisen taustaväriksi #555555. Vinkki: tutki Firebugilla mitä elementtejä taulukkorivien sisältä löytyy.
  • Millä tavalla tämä olisi ollut helpompi tehdä, jos olisit saanut tehdä muutoksia myös XHTML-tiedostoon?
• Muuta taulukon otsikkorivin tekstin väri mustaksi, ensimmäisen sisältörivin tekstin väri keltaiseksi ja loppujen rivien tekstin väri valkoiseksi.
• Aseta dokumentin ensimmäisen tekstikappaleen (listaa edeltävä tekstikappale) ympärille musta raja.
• Muuta kaikkien niiden linkkien väri vihreäksi, joissa on title-attribuutin arvona sana orci.

Galleria

Tehdään Nanonanon sivustoon galleria-sivu, johon tulee modernia tietokonetaidetta esittäviä pikkukuvia myyntiin:

1. Lataa galleriakuvat.zip ja pura paketti W:\www\galleria\-hakemistoon.
2. Luo uusi XHTML-dokumentti ja tallenna se index.html-nimellä galleria-hakemistoon.
3. Lisää link-elementillä viite sivuston juurihakemistossa olevaan demo2.css-tiedostoon. Lisää myös galleriasivulle pääotsikko ja jokin lyhyt johdantotekstikappale.
4. Kopioi esim. linkit-hakemistosta lohkot <div class="navbartop">...</div> ja <div class="navbar">...</div> juuri luomasi dokumentin body-osaan.
5. Lisää body-osaan seuraavalla tavalla viisi lohkoa, joissa on galleriahakemiston kuvat ja näiden kuvatekstit:

   <div class="galleriakuva">
   <img alt="Viitatorni ja järvimaisema" src="viitatorni.jpg" />
   <p>Viitatorni</p>
   </div>

6. Tutki miltä sivu näyttää nyt selaimessa.

Liu'utus

Muotoillaan gallerian kuvalohkot tasavälisiksi ja selaimen koon mukaan vierekkäin rivittyviksi.

1. Muokkaa demo2.css-tiedostoa. Liu'uta .galleriakuva-lohkot vasempaan laitaan.
2. Käy Nanonanon kotisivujen galleria-sivulla. Tutki mikä on suurimman kuvan leveys ja korkeus. Lisää .galleriakuva-lohkolle ominaisuudet width ja height, joihin sijoitat arvot, jotka ovat hieman yli suurimman kuvan koon. Voit käyttää tässä tapauksessa px-arvoja (miksi?).
3. Keskitä kuva lohkon sisällä vaakasuunnassa. Koska kuva on tekstitason elementti, niin sen voi keskittää text-align-ominaisuudella.
4. Testaa miltä galleria näyttää nyt. Muokataan vielä kuvatekstejä. Lisää demo2.css-tiedostoon lohko, joka vaikuttaa vain galleriakuva-lohkon sisällä olevaan tekstilohkoon. Tee lohkolle seuraavat määritykset:
   • Määrää tekstilohkolle korkeus. Korkeus kannattaa määrittää suhteessa fontin kokoon, sillä se saattaa vaihdella.
   • Keskitä teksti.
   • Määrää tekstin ylivuotava osuus piiloon.
   • Poista marginaalit (margin) ja täytteet (padding).
   • Pienennä fonttikokoa hieman.
5. Rivitetään kuvat vielä oikealla olevan navigointilohkon alapuolelle. Tämä onnistuu clear-ominaisuudella. Voit laittaa lohkoille myös pienen ylämarginaalin, jotteivät ne mene ihan kiinni navigointilohkoon.
6. Tarkista miten clear-ominaisuus toimii Internet Explorerilla. Jos kuvat menevät selaimen oikeasta reunasta yli, niin tällöin kuvat täytyy laittaa vielä oman lohkon sisälle, esim. <div class="galleriakuvat">...</div>, ja siirtää clear-ominaisuus tälle lohkolle.

Ponnahdusteksti

1. Lisää pariin kuvaan kuvatekstin alle kappale, joka kertoo, että kuva on myyty:

   <p class="huomio">! Myyty</p>

2. Siirrä absoluuttisella asemoinnilla huomio-teksti galleriakuvan keskelle. Laita taustan väriksi keltainen.
3. Siirtyikö teksti keskelle kuvaa vai keskelle jotain muuta? Huomaa, että positiointi tapahtuu suhteessa lähimpään position-ominaisuudella asemoituun esivanhempielementtiin. Tällöin .galleriakuva-lohkolle on annettava ilman paikkamääreitä seuraava ominaisuus:

   position: relative;

4. Muuta ensimmäisen merkin väriksi punainen ja kasvata sen kokoa kaksinkertaiseksi. Firefoxilla et saa tätä välttämättä toimimaan, koska uusin Firefox ei näytä huomioivan huutomerkkiä merkiksi, eli first-letter-pseudoluokka valitsee Firefoxissa vain kirjaimet. IE:ssä tämä sen sijaan toimii.
5. Piilota display-ominaisuudella huomio-lohkot.
6. Tee uusi valitsin, joka viittaa huomio-lohkoon vain siinä tapauksessa, että käyttäjä osoittaa galleriakuva-lohkoa. Tarvitset :hover-pseudoluokkaa. Tee lohkosta näkyvä display-ominaisuudella. Lisää lohkolle lisäksi hieman korkeutta (esimerkiksi height: 2.5em;), jotta kaksinkertaiseksi kasvatettu huutomerkki mahtuu siihen.
7. Testaa viemällä hiiren osoitinta kuvien päälle ja pois päältä. :hover ei toimi vanhoissa Internet Explorereissa (IE 7-8:ssa toimii) muille elementeille kuin linkeille.
8. Poista XHTML-dokumentista huutomerkit Myyty-sanan edeltä ja kokeile lisätä huutomerkki automaattisesti CSS:n avulla jokaisen huomio-lohkon alkuun. Tämä ei välttämättä toimi vanhemmissa Internet Explorereissa. Internet Explorerin versiossa 8 before-pseudoluokka kuitenkin toimii, joten huutomerkin värin muuttaminen punaiseksi ja koon kasvattaminen voisi olla järkevää siirtää tähän luokkaan (jotta se toimisi myös Firefoxissa).