Sivun asemointi CSS:llä - Demo 4

• Mallivideot
• Absoluuttinen asemointi
• Kiinnitetty asemointi
• Asemointi float-ominaisuuden avulla
• Lisätehtävät
  • Sovellusharjoitus: Matematiikan ja tilastotieteen laitoksen sivu

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

Absoluuttinen asemointi

Absoluuttinen asemointi -mallivideo

• Otetaan käsittelyn kohteeksi tietojenkäsittelytieteiden laitoksen kotisivu ja uusitaan sivun ulkoasu täysin CSS-pohjaiseksi. Korjataan samalla sivulta pieniä ongelmia kuten skaalautuminen selaimen koon mukaan.
• Tee V:-asemalle www-hakemistoon alihakemisto demo4. Tallenna luotoon hakemistoon cs_pohja.html-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. Avaa pohjasivu Xetoriin ja tarkastele dokumentin rakennetta lukemalla XHTML-lähdekoodia. Rakenteen ymmärtämisessä auttaa myös Xetorin elementtipuu. Vaihtoehtoisesti voit käyttää Mozillan DOM inspectoria.
• Tutki 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.
• Ensimmäiseksi huomataan, että alkuperäisen sivun sisältö on keskitetty vaakasuunnassa. Tätä varten on 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ö cs.css-tiedostoon:

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

• 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: ?%;
  }

  Käy testaamassa sivuasi osoitteesta:

  http://www.ad.jyu.fi/users/t/tunnus/www/demo4/cs_pohja.html

• 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 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. Mozillassa 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 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 Mozillalla 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.
  • Yleensä laajennuksen asentaminen toimii linkkiä klikkaamalla, mutta Colorzillassa on jokin tallennusongelma. Mene siis Colorzilla:n kotisivuille ja napauta linkkiä Install Colorzilla 0.6.5 oikealla ja valitse Save Link as.... Tallenna paketti C:\Mytemp-hakemistoon.
  • Käynnistä Firefox-selain, ellei se ole jo auki, valinnalla Start | All Programs | Mozilla Firefox | Mozilla Firefox.
  • Valitse File | Open file..., josta avaat Mytemp-hakemistoon tallennetun laajennuksen.
  • Hyväksy asennus ja käynnistä tämän jälkeen Firefox uudelleen
  • Selaimen vasempaan alalaitaan ilmestyy ColorZillan ikoni. Klikkaa ikonia hiiren vasemmalla painikkeella, jonka jälkeen voit valita näytöltä haluamastasi kohdasta värin.
  • Valitun värin voit kopioida leikepöydällä ColorZillan kontekstivalikon kautta.
  • Lisää väri .navbartop-tyylin taustaväriksi

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

• Koska navigointipalkki on xhtml-lähdekoodissa torch-lohkon perään 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:
  • Minimoi listan ja lista-alkion marginaalit ja paddingit
  • Esitä lista-alkio tekstinä (display: inline)
  • Määritä lista-alkioiden väliin sopivat rajat
  • Määritä sopivat värit linkeille ja poista niistä alleviivaus
  • Keskitä linkit pystysuunnassa
• 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: ?%;
  }

• Siisti sivu 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 Mozillalla, 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!

Lisätehtävät

Tee vielä seuraava tehtävä mikäli aikaa riittää.

Sovellusharjoitus: Matematiikan ja tilastotieteen laitoksen sivu

maths -mallivideo

Sovella asemoinnista oppimiasi taitoja ja siivoa Matematiikan ja tilastotieteen laitoksen kotisivu. Sivu on yläosaltaan samanlainen kuin edellä tehty sivu. Käytä apunasi mallipohjaa ja tee CSS:n avulla mallipohjasta ulkoasultaan samankaltainen kuin alkuperäinen sivu. Tee alkuperäisestä poiketen omasta versiostasi skaalautuva.