CSS

• Mallivideot
• Ulkoasun määrittäminen
• Vakionavigointi ylälaitaan
• Navigoinnin ulkoasu
• Linkkien muotoilu
• Absoluuttinen asemointi
• Kiinnitetty asemointi
• Asemointi float-ominaisuuden avulla

Näissä demoissa tutustutaan CSS:n perusteisiin ja sivun ulkoasun asemointiin

Ulkoasun määrittäminen

Aukaise tehtävien avuksi luento2-sivu ja css1-dokumentaatio.

1. Tallenna pohja.css Nanonanon sivuston juurikansioon.
2. Muuta jokainen tekemäsi XHTML-dokumentti käyttämään pohja.css-tiedostoa:

   <link href="pohja.css" rel="StyleSheet" type="text/css" />

   Korjaa suhteellinen viittaus CSS-tiedostoon oikeaksi riippuen XHTML-dokumentin sijainnista.
3. Tutki selaimella miten sivusi ulkoasu muuttui.
4. Valitse Firefoxin Web Developer Toolbarista CSS | Edit CSS. Laajenna sivupalkkia hieman niin että näet paremmin tekstit.
5. Napauta Stick-painiketta Edit CSS-palkin ylälaidasta. Painike jää pystyasentoon . Tämä on olennaista sillä jos menet muulle sivulle selaimessa eikä stick ole päällä niin muutokset katoavat!
6. Vaihda sivulla käytetty kirjasin seuraavasti:
   • Kirjoita ominaisuuden font-family arvoksi (kaksoispisteen jälkeen):

     Verdana, Arial, "Trebuchet MS", sans-serif;

   • Verdana, Arial ja "Trebuchet MS" ovat käytettävien kirjasimien nimiä. Listasta ensimmäisenä löytyvää kirjasinta käytetään sivulla. WWW-sivun tekijä ei voi tietää mitä kirjasimia on asennettuna kunkin selaajan koneelle joten on pakko antaa useita vaihtoehtoja.
   • sans-serif tarkoittaa päätteetöntä kirjasinperhettä josta poimitaan käyttöön jokin kirjasin jos mitään muuta kirjasinta ei ole käytettävissä.
7. Ulkonäkömuutoksien pitäisi näkyä heti dokumentissa vaikka tyylitiedostoa ei olekaan tallennettu vielä. Voit vaihdella kirjasimien järjestystä ja kokeilla miten sivun ulkoasu muuttuu.
8. Määritellään seuraavaksi sivun marginaali. Lisää body-elementille määrittelyt:

   margin-left: 5%;
   margin-right: 5%;
   margin-top: 1%;
   margin-bottom: 1%;

   Määritellään siis koko sivun vasemmaksi ja oikeaksi marginaaliksi 5% sivun koosta. Ylä- ja alamarginaaliksi määritellään 1% sivun koosta.

9. Lisää body-elementtiin myös rivivälistysmääritys:

   line-height: 150%

   Isompi riviväli parantaa luettavuutta.

10. Määritellään lisää marginaaleja. Nyt h1-, h2-, ja p-elementeille. Lisää näille kaikille määritykset seuraavaan tapaan:

    h1 {
    margin-left: 1em;
    margin-right: 1em;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    }

    em-yksikkö suhteuttaa koon määrityksen selaimen oletusfontin kokoon.

11. Tallenna tyylitiedosto napauttamalla Edit CSS-palkista -painiketta. Tallenna muokkaamasi tyylit pohja.css-tiedoston päälle.

Vakionavigointi ylälaitaan

Luodaan ylläolevan kaltainen navigointipalkki kaikille sivuille. Palkin on oltava samanlainen kaikilla sivuilla, paitsi linkkiä samaan sivuun ei ole.

1. Tallenna pieni kuva Nanonanosta V-asemalle samaan hakemistoon etusivun kanssa.
2. Täydennä demo 1:sessa tehdyn pääsivun, opiskelusivun ja linkit-sivun yläosan listaa siten, että kussakin listassa on neljä samanlaista listakohtaa. Galleriasivun voi jättää toteuttamatta, mutta laita kuitenkin linkki hakemistoon.
3. Anna listan (ul) class-ominaisuuteen arvo navtop.
4. Tee teksteistä linkkejä toisiin dokumentteihin. Esimerkiksi opiskelu-hakemistossa koodi näyttäisi seuraavalta

   <ul class="navtop">
     <li><a href="../"><img alt="Nanonano" src="../nanonano.png" /> Nanonano</a></li>
     <li>Opiskelu</li>
     <li><a href="../linkit/">Linkit</a></li>
     <li><a href="../galleria/">Galleria</a></li>
   </ul>
   

Navigoinnin ulkoasu

1. Määritä navigointipalkille taustaväri. Katso CSS-selektoreista miten tiettyyn elementtiin viitataan. Taustaväriä (background) määriteltäessä pitää muistaa määritellä myös tekstin väri (color). Väriarvot voi poimia mallikuvasta esim. Colorzilla-työkalua apuna käyttäen:
   • Colorzillan asentamisen jälkeen firefox pitää käynnistää uudelleen.
   • Vasemmalla hiiren napilla voi valita värin ruudulta
   • Napauttamalla oikealla alakulmassa olevaa pipetti-ikonia saat vaihtoehtoja, joilla saat väriarvon leikepöydälle
   • Värien määritteleminen RGB-koodeina on selitetty esim. RGB Color Values-dokumentissa.
2. Muutetaan listakohdat rivittymään tekstin tapaan yhdelle riville. Lisää navigointilistassa olevalle listakohdalle määritys

   display: inline;

3. Lisätään linkkien väliin pieni pystysuora viiva. Määritetään navtop:ssa olevien listakohtien rajoja seuraavilla lisäyksillä:

   border-left: 1px solid black;
   margin-left: 0.5em;
   padding-left: 0.5em;

   Tallenna muutokset CSS-tiedostoon.

4. Poista kuitenkin ensimmäiseltä lista-alkiolta reunaviiva. Tähän tarvit CSS:n pseudoluokkia.
5. Lisää hieman välistystä (padding) listapalkin ylä- ja alaosaan. Poista samalla vasemman laidan oletus-padding kokonaan.
6. Pienennä palkin kokoa puoleen (width). Keskitä palkissa olevat tekstit (text-align). Lisää palkille reunus (border) katkoviivalla (dashed).
7. Tallenna CSS-tyylisi pohja.css-tiedostoon.
8. Validoi CSS-tiedostosi W3C CSS Validatorilla valitsemalla Web Developer Toolbarista Tools | Validate CSS. Korjaa mahdolliset virheet ja varoitukset.

Linkkien muotoilu

1. WWW-sivun linkeille on mahdollista määrittää ns. pseudoluokkia joiden ominaisuudet tulevat voimaan riippuen siitä onko linkki aktiivinen, onko hiiri linkin päällä tai onko linkin viittaamassa osoitteessa jo käyty.
   • a määrittää linkeille yhteiset ominaisuudet
   • a:link määrittää käymättömille linkeille yhteiset ominaisuudet
   • a:visited määrittää käytyjen linkkien ulkoasun
   • a:hover määrittää linkin ulkoasun hiiren ollessa linkin päällä
   • a:active määrittää aktiivisen linkin ulkoasun
2. Määritä navigointipalkissa oleville linkeille seuraavat ominaisuudet:
   • Tavallisen linkin väriksi sininen.
   • Käydyn linkin väriksi purppura.
   • Linkkiä osoitettaessa väriksi punainen.
3. Poista navigointipalkkien sisällä olevista linkeistä alleviivaus (text-decoration).
4. Lisää alleviivaus hover-efektiin.

Absoluuttinen asemointi

Absoluuttinen asemointi -mallivideo

• Otetaan käsittelyn kohteeksi tietojenkäsittelytieteiden laitoksen vanha kotisivu ja uusitaan sivun ulkoasu täysin CSS-pohjaiseksi. Korjataan samalla sivulta pieniä ongelmia kuten skaalautuminen selaimen koon mukaan.
• Tee V:-asemalle kurssin työhakemistoosi alihakemisto cs. Tallenna luotuun hakemistoon laitoksen vanha etusivu XHTML-muodossa nimellä index.html, tyylitiedosto cs.css-tiedosto sekä kuvat soihdusta ja yliopistosta. Ala rakentamaan sivun ulkoasua tämän pohjan päälle lisäämällä css-sääntöjä cs.css-tiedostoon. Älä muuta XHTML-tiedostoa ellei niin erikseen käsketä! Käytä sivun ulkoasun testaamiseen Firefoxia tai Mozillaa .
• Sivu on jaettu jo sopiviin lohkoihin. Tarkastele dokumentin rakennetta tutkimalla sivun lähdekoodia. Vertaa kuinka paljon sotkuisempi ja epäselvempi on alkuperäisen sivun lähdekoodi verrattuna XHTML-versioon.
• Aloitetaan sivun ulkoasun muokkaaminen asemoimalla yksi lohko kerrallaan oikeaan paikkaan. Alkuperäisen sivun sisältö on keskitetty vaakasuunnassa. Tätä varten on valmiiseen pohjaan luotu main-lohko, joka sisältää kaiken sivun varsinaisen sisällön. Keskittäminen onnistuu määräämällä sivumarginaalit automaattisiksi. Lisää seuraava css-sääntö

  .main {
    margin-left: auto;
    margin-right: auto;
    width: ??%; /* määrää haluamasi leveys sisältöalueelle */
  }

  Tallenna muutokset cs.css-tiedostoon:
• Lisää myös body-elementtiä varten css-säännöt joissa nollaat body-elementin marginaalin ja paddingin sekä varmistat että sivun taustaväri on valkoinen.
• Jatketaan asemoimalla soihtu sivun oikeaan ylänurkkaan:

  .torch {
    position: absolute;
    right: ?%;
    top: ?%;
  }

• Soihtu asemoituu koko näytön oikeaan ylälaitaan eikä main-lohkon ylälaitaan. Tämä korjaantuu lisäämällä main-lohkoon myös asemointi, koska absoluuttisesti asemoidut elementit asemoituvat joko koko näytön alueella tai muiden asemoitujen elementtien sisällä:

  .main {
    margin-left: auto;
    margin-right: auto;
    width: ??%; /* määrää haluamasi leveys sisältöalueelle */
    position: relative;
    /* tämä pitää elementin alkuperäisellä paikallaan jos
       mitään koordinaatteja (top, left jne.) ei anneta */
  }

• Asemoidaan "Jyväskylän yliopisto"-kuva soihdun viereen. Tämän onnistumiseksi pitää selvittää kuinka leveä soihtu-kuva on. Firefoxissa tämä onnistuu helpoiten napauttamalla hiiren oikeaa näppäintä kuvan päälle ja valitsemalla valikosta Properties. Kuvan leveydeksi paljastuu 40 pikseliä joten asemoidaan seuraava kuva hieman yli 40 pikselin päähän oikeasta laidasta:

  .jyu {
    position: absolute;
    top: 0%;
    right: ??px;
  }

• Sivun pääotsikko eli Tietojenkäsittelytieteiden laitos -teksti ei vielä vastaa ulkoasultaan mallia joten pienennetään hieman tekstin kokoa:

  h1 {
    font-size: ??em;
  }

• Seuraavaksi muotoillaan yläosan linkkipalkki. Palkissa on käytössä taustakuva, joka näkyy aivan palkin vasemmassa laidassa. Lisäksi palkki pitää asemoida pystysuunnassa oikeaan kohtaan jotta saadaan soihtu sopimaan mukaan.
  • Käy kopioimassa alkuperäiseltä sivulta yläpalkin taustakuvan osoite. Onnistuu Firefoxilla helposti kontekstivalikon avulla (paina hiiren oikeaa painiketta kuvan päällä ja valitse Copy Image Location). Selvitä myös kuinka korkea taustakuva on.
  • Lisää kuva .navbartop-tyylin taustakuvaksi. Selvitä kuinka korkea on -kuva ja asemoi .navbartop kuvan korkeuden päähän sivun ylälaidasta.

  .navbartop {
    background-image: url(tähän kuvan osoite);
    position: absolute;
    top: ??px;
    /* Tähän Jyväskylän yliopisto -kuvan korkeus jolloin palkki
       asemoituu sopivasti kuvan alle */
    width: 100%;
    height: ??px;
    /* Sama kuin taustakuvan korkeus. Skaalautuvampi ratkaisu olisi
       määrittää korkeus esim. em-yksiköillä ja sallia taustakuvan
       toistaminen pystysuunnassa. Käytössä oleva taustakuva on
       kuitenkin suunniteltu hieman huonosti eikä sitä pysty
       toistamaan pystysuunnassa. Ts. kuvaan on jätetty mustat reunat.
    */
    background-repeat: repeat-y;
    /* Toistetaan pystysuunnassa vaikka kuva ei siihen oikein sovikaan. */
  }

• Seuraavaksi pitää selvittää mikä on navigointipalkissa käytetty taustaväri. Tämä onnistuu helposti ColorZilla-työkalun avulla.
  • Klikkaa Colorzillan ikonia hiiren vasemmalla painikkeella, jonka jälkeen voit valita näytöltä haluamastasi kohdasta värin.
  • Valitun värin voit kopioida leikepöydälle ColorZillan kontekstivalikon kautta.
  • Lisää väri .navbartop-tyylin taustaväriksi

  .navbartop {
    background-color: #värikoodi;
  }

• Koska navigointipalkki on xhtml-lähdekoodissa torch-lohkon perässä niin se peittää soihdun siltä osin kuin alueet menevät päällekkäin. Tämä voidaan korjata korottamalla torch-lohkon z-index-ominaisuutta. Suuremman z-index-ominaisuuden arvon omaava elementti sijoitetaan sivulla päällimmäiseksi.

  .torch {
    position: absolute;
    right: 0%;
    top: 0%;
    z-index: 10;
  }

• Siisti ylänavigointiin kuuluva lista samaan tapaan kuin Nanonanon sivuille teit navigoinnin:
  • Nollaa listan (ul) marginaali ja padding
  • Nollaa myös lista-alkion (li) marginaalit ja paddingit
  • Esitä lista-alkio tekstinä (display: inline)
  • Määritä lista-alkioiden väliin sopivat rajat ja padding
  • Määritä sopivat värit linkeille ja poista niistä alleviivaus
  • Keskitä linkit vaakasuunnassa
• Seuraavana on vuorossa vasemman laidan osoitepalkki, joka vie jostain hölmöstä syystä suhteettoman paljon tilaa sivulta. Osoitetiedot olisi parempi laittaa omalla sivulleen mutta noudatetaan tässä tapauksessa esikuvaa.
  • Asemoi .leftbar soihdun korkeuden päähän sivun ylälaidasta.
  • Määritä lohkon leveydeksi esim. 18%
  • Määritä lohkolle oikea taustaväri
  • Keskitä teksti
  • Määritä sopiva kirjasin
  • Määritä sopiva määrä paddingia lohkon sivuille
  • Määritä palkissa käytetty kuva taustakuvaksi. Alkuperäisessä versiossa kuva määräsi tämän lohkon koon mutta nyt tehdään skaalautuva ratkaisu joten kuvasta saa näkyä aina sen verran kuin 18% leveyteen mahtuu.

  .leftbar {
    background-image: url(http://www.cs.jyu.fi/kuvat/kesa_agora_1.jpg);
    background-repeat: no-repeat;
    background-color: #taustaväri;
    padding-top: ???px; /* Agora-taustakuvan korkeus */
    width: 18%;
    padding-left: ?%;
    padding-right: ?%;
    position: absolute;
    top: ??px; /* soihdun korkeus */
    left: 0px;
    color: white;
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: smaller;
    /* alkuperäisellä sivulla on käytetty kiinteitä kirjasinkokoja.
       Ei sorruta samaan virheeseen */
    text-align: center;
  }

• Määritä sivupalkin linkeille sopivat värit
• Leipätekstin ja oikean laidan navigoinnin yläpuolelle tulevat kuvat on hyvä asettaa seuraavaksi paikoilleen. Kuvat kannattaa laittaa näkyviin taustakuvana jolloin niitä voidaan helposti toistaa uudelleen ja uudelleen sivun leveydestä tai kapeudesta huolimatta. Asemoi sopivasti.

  .images {
    background: transparent url(http://www.cs.jyu.fi/kuvat/ylapalkki.jpg);
    background-repeat: repeat-x;
    width: ??%; /* 100% - vasemman palkin leveys - vasemman palkin paddingit */
    height: ??px; /* käytettyjen kuvien korkeus */
    position: absolute;
    left: ??%; /* vasemman palkin leveys + vasemman palkin paddingit */
    top: ??px; /* soihdun korkeus */
    z-index: 0;
  }

• Lopuksi vielä oikea navigointipalkki ja varsinainen leipäteksti. Kopioi tarvittavat värit alkuperäiseltä sivulta.

  .rightbar {
    position: absolute;
    right: 0;
    top: ??px; /* soihdun + kuvien korkeus yhteensä */
    width: 18%;
    background: #taustaväri none;
    padding-left: ?%;
    padding-right: ?%;
  }
  
  .text {
    background: #taustaväri none;
    position: absolute;
    top: ??px; /* soihdun + kuvien korkeus yhteensä */
    left: ??%; /* vasemman palkin leveys */
    width: ??%; /* = 100% - vasenpalkki - oikeapalkki
                          - sivupalkkien padding - oma padding */
    padding-left: ?%;
    padding-right: ?%;
  }

• Halutessassasi voit siistiä sivun näyttämään enemmän alkuperäiseltä muotoilemalla viimeistenkin lohkojen linkkien väritys ja mahdollisesti muita värejä, marginaaleja ja paddingeja

Kiinnitetty asemointi

Kokeile mitä tarkoittaa kiinnitetty asemointi. Muuta joidenkin lohkojen position: absolute; -määritys muotoon position: fixed;. Kokeile miten sivun käyttäminen muuttui Firefoxilla tai Operalla. Pienennä sivu niin pieneksi että joudut rullaamaan sen sisältöä.

Asemointi float-ominaisuuden avulla

Mallivideo float -asemointiin

Absoluuttista asemointia ei ole mikään pakko käyttää vaan hyvin usein tismalleen samanlainen ulkoasu saadaan aikaan sopivalla float-ominaisuuden käytöllä.

• Tee kopio edellä muokkaamastasi xhtml-dokumentista nimelle float.html ja CSS-dokumentista nimelle float.css. Muuta float.html käyttämään float.css-tyylitiedostoa.
• Poista kaikista lohkoista position-ominaisuudet
• Aloitetaan taas ulkoasun muotoilu sivun ylälaidasta. Leijutetaan sivun pääotsikko sivun vasempaan laitaan ja sen vierelle "Jyväskylän yliopisto"-kuva ja oikeaan laitaan soihtu:

  .torch {
    float: right;
  }
  
  .jyu {
    float: left;
  }
  
  h1 {
    float: left;
  }

• Lisää .navbartop-tyyliin kielto clear: left; niin tämä lohko ei yritä sivun pääotsikon viereen
• Leijuta sekä että molemmat oikeaan laitaan.
• Navigointipalkki tulee hieman liian ylös eikä osu oikeaan kohtaan soihdun kanssa. Tämä voidaan korjata pienellä pääotsikon korkeuden määrityksellä:

  h1 {
    height: 47px;
    /* Ylänavigointi väistää h1-elementtiä ja asettuu
       oikeaan kohtaan soihtuun nähden */
    margin: 0;
    /* marginaalit ja padding kannattaa aina itse määritellä
       koska ne voivat sotkea korkeutta eri tavoin eri selaimissa */
    padding: 0;
  }

• Liu'uta seuraavaksi vasen lohko (.leftbar) vasempaan laitaan
• Liu'uta myös tekstiosa vasempaan laitaan
• Samaan tapaan liu-utetaan oikea lohko oikeaan laitaan
• Sivun ulkoasun pitäisi nyt vastata jo hyvin pitkälle edellistä absoluuttisella asemoinnilla tehtyä versiota!