Sivun asemointi CSS:llä - Demo 5

• Mallivideot
• Absoluuttinen asemointi
• Kiinnitetty asemointi
• Asemointi float-ominaisuuden avulla
• 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.
• Tallenna W:-asemalle cs_pohja.html-tiedosto ja ala rakentaa 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ä testaamiseen Mozillaa.
• Sivu on jaettu jo sopiviin lohkoihin joita voit tarkastella lukemalla suoraan xhtml-lähdekoodia tai käyttämällä Mozillan DOM inspectoria. Aloitetaan sivun ulkoasun muokkaaminen asemoimalla yksi lohko kerrallaan oikeaan paikkaan.
• Ensimmäiseksi huomataan että 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: 80%; /* 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: 0%;
  	top: 0%;
  }

  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: 80%; /* 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: 50px;
  
  }

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

  h1 {
  	font-size: 1.2em;
  }

• 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:

  .navbartop {
  	background: #002d5f url(http://www.cs.jyu.fi/kuvat/laitosvari_3.jpg);
    background-repeat: repeat-y;
  	position: absolute;
  	top: 46px;
  	width: 100%;
    height: 24px; /* Sama kuin kuvan 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 */
  }

• 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-indexin arvoa:

  .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:

  .leftbar {
  	position: absolute;
  	top: 70px; /* soihdun korkeus */
  	width: 246px; /* Käytetyn kuvan leveys */
  	background: #002d5f none;
    color: white;
  	font-family: Helvetica, Arial, Sans-Serif;
    font-size: smaller; /* alkuperäisellä sivulla on käytetty 
                           kiinteitä kirjasinkokoja. Ei sorruta 
                           samaan virheeseen */
  	height: 100%;
  	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. Kuvien sovittaminen samalla tavalla kuin alkuperäisessä versiossa ja skaalautuvuus yhtäaikaa tuottavat kuitenkin pieniä ongelmia. Tyydytään tässä vaiheessa seuraavaan ratkaisuun:

  .images {
  	background: transparent url(http://www.cs.jyu.fi/kuvat/ylapalkki.jpg);
  	background-repeat: repeat-x; 
  	width: 100%; /* ei toimi vaan valuu yli jos käytetty pikseleinä ilmoitettua marginaalia */
  	height: 75px; /* käytettyjen kuvien korkeus */
    margin-left: 246px; /* vasemman palkin leveys jos halutaan kuvien alkavan juuri oikeasta 
                           kohdasta */
    margin-left: 0; /* pakko käyttää edellisen sijaan jos halutaan estää valuminen
                       sivupalkkiin
                       kuvien alkuosa jää vasemman palkin alle  */
    position: absolute;
  	top: 70px;
    z-index: 0;
  }

• Lopuksi vielä vasen navigointipalkki ja varsinainen leipäteksti:

  .rightbar {
  	position: absolute;
  	right: 0;
  	top: 145px; /* soihdun + kuvien korkeus yhteensä */
  	height: 100%;
  	width: 20%;
  	background: #E5D8E5 none;
  }
  
  .text {
  	background: #F2ECF2 none;
    position: absolute;
  	top: 145px; /* soihdun + kuvien korkeus yhteensä */
  	left: 246px; /* vasemman palkin leveys */
  	height: 100%;
  	width: 50%; /* mikä tähän voidaan laittaa leveydeksi? Emme voi tietää paljonko
                   vasen palkki vie prosentteina sivulta tilaa... */
  	
  }

• Prosenttien ja pikselien sekoittaminen keskenään asemoitaessa aiheuttaa jossain vaiheessa vääjäämättä ongelmia. Vaihtoehtoina on joko luopua pikselien käytöstä lohkojen kokomäärityksissä tai luopua sivun skaalautuvuudesta. Sivun käyttäjää ei kuitenkaan pidä kiusata joten luovumme pikselien käytöstä mikä taas aiheuttaa sivun ulkoasun laatijalle enemmän vaatimuksia jotta hän osaa laatia joka suhteessa skaalautuvan ulkoasun. Tällä kertaa joudumme hieman muuttamaan alkuperäisen sivun ulkoasua jotta tulokseksi saadaan skaalautuva sivu. Korjaa CSS-määrityksistä ja sivun XHTML-lähdekoodista seuraavat asiat:
  • Poista vasemman palkin yläosassa oleva kuva XHTML-koodista ja määritä se taustakuvaksi CSS:n avulla
  • Määritä vasemman palkin leveys prosentteina. Ei haittaa vaikka taustakuva ei aina näykään kokonaan
  • Määritä vastaavasti prosentteina leipätekstialue ja oikea palkki
  • Korjaa myös kuvapalkki toimimaan alkuperäisen sivun tapaan mutta toistumaan jos sivu on leveämpi kuin mitä kuvia on
  • Siisti sivu näyttämään enemmän alkuperäiseltä muotoilemalla viimeistenkin lohkojen linkkien väritys ja mahdollisesti muita värejä, marginaaleja ja paddingejä

Kiinnitetty asemointi

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

Asemointi float-ominaisuuden avulla

Mallivideo float -asemointiin

Absoluuttista asemointi 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
• Asemointi olisi helpompaa jos soihtu sijaitsisi lähdekoodissa ennen "Jyväskylän yliopisto"-kuvaa. Muuta niiden järjestys xhtml-lähdekoodista ja leijuta sekä kuva että soihtu molemmat oikeaan laitaan.
• Navigointipalkkia tulee hieman liian ylös eikä osu oikeaan kohtaan soihdun kanssa. Tämä voidaan korjata pienellä pääotsikon korkeuden määrityksellä säädöllä:

  h1 {
   height: 47px; /* Ylänavigointi väistää h1-elementtiä ja asettuu oikeaan kohtaan 
                    soihtuun nähden */
    margin: 0; /* marginaalit ja padding kannattaa nollata 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!

Matematiikan ja tilastotieteen laitoksen sivu

maths -mallivideo

Matematiikan ja tilastotieteen laitoksen kotisivu 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.