Asemointi ja CSS3 - luento 6

• Luentotaltiointi
• Visuaalinen muotoilu ja asemointi
  • Asemointiin liittyviä ominaisuuksia
  • Muutamia float- ja clear- ominaisuuteen liittyviä esimerkkejä
  • Esimerkki
• CSS Mobile profile
• CSS3
• Hyödyllisiä linkkejä CSS-kikkoihin

Tällä luennolla käsitellään sivun ulkoasun asemointia CSS:n avulla. Lisäksi käydään lyhyesti läpi CSS Mobile profile ja CSS3.

Visuaalinen muotoilu ja asemointi

CSS2 antaa erilaisia mahdollisuuksia WWW-sivujen visuaaliseen muotoilemiseen. Seuraavaan on koottu lyhyeksi listaksi erilaisia asioita, joita kannattaa miettiä jo sivun suunnitteluvaiheessa, jotta vältyttäisiin ylimääräisiltä ongelmilta sivun toteutusvaiheessa.

• Mieti erilaisten sivun elementtien (navigointi, koristeet, sisältö) paikat tarkkaan.
• Jaa sivun rakenne loogisiin lohkoihin. Lohkorakenne voi olla esimerkiksi seuraava:
  • Yläreunassa on lohko perusnavigoinnille ja ylätunnistetiedoille.
  • Sivun alaosa muodostuu kahdesta lohkosta.
    • Vasemmassa reunassa on tarkempi linkkilista asiakirjan sisältöön.
    • Oikeassa reunassa on sivun varsinainen sisältö.
• Jokainen edellisistä lohkoista kannattaa merkitä omaksi lohkokseen div-elementillä. Tällöin lohkon käsittely on helpompaa.
• Jos jokin lohko halutaan asemoida absoluuttisesti, niin myös kaikki muut lohkot kannattaa yleensä asemoida.

Sivun sisällön asetteluun voidaan käyttää seuraavia ominaisuuksia.

• float- ja clear-ominaisuudet, joilla voidaan liu'uttaa sivun osia oletuksesta poikkeavasti.
• position, top, bottom, right, left ja z-index-ominaisuudet.

Asemointiin liittyviä ominaisuuksia

position-ominaisuudella voidaan määritellä kuinka elementti sijoittuu näytölle. Erilaisia arvoja ovat seuraavat:

• static-määrittää sijoittumisen normaaliksi elementin normaaliin paikkaan nähden.
• relative-määrittää sijoittumisen suhteelliseksi elementin normaaliin paikkaan nähden.
• absolute-määrittää sijoittumisen absoluuttisesti sivulle. Sijoittuminen lasketaan sen asemoidun lohkon paikan suhteen, jossa lohko sijaitsee.
• fixed-kiinnittää positioinnin siten, että elementtiä ei vieritetä näytöllä. Muutoin sijoittuminen on sama kuin absolute määrityksellä. fixed-kiinnitetty elementti voi toimia esimerkiksi tulostettavien sivujen ylä- tai alatunnistetietoina.
• inherit-määrittää elementin sijoittumisen periytyväksi.

Positioinnin yhteydessä määritellään usein myös seuraavat ominaisuudet:

• top-ominaisuudella voidaan määritellä elementin etäisyys yläreunasta.
• bottom-ominaisuudella voidaan määritellä elementin etäisyys alareunasta.
• left-ominaisuudella voidaan määritellä elementin etäisyys vasemmasta reunasta.
• right-ominaisuudella voidaan määritellä elementin etäisyys oikeasta reunasta.
• z-index-ominaisuudella voidaan määritellä elementin taso ruudulla. Mitä suurempi arvo, niin sitä lähempänä elementti on käyttäjää.

Seuraavassa muutamia esimerkkejä asemoinnista

• Erilaisia asemointeja
  • asemointi.html - lähdekoodi
  • asemointi.css - lähdekoodi
• Suhteellinen (engl. relative) asemointi, jossa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla suhteutettuna normaaliin sijaintiinsa.

  .up {
  	position: relative;
  	top: -1em;
    }
    

  • relative.htm-lähdekoodi
  • relative.css-lähdekoodi
• Absoluuttinen (engl. absolute) asemointi, jossa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla absoluuttisesti isä-elementin sisälle välittämättä normaalista sijainnista.
  Asemoitu elementti vierii dokumentin sisällön mukana.

  .vasenylanurkka {
  	position: absolute;
  	top: 10%;
  	left: 10%;
  	width: 30%;
  	height: 10%;
    }
  

  Vierivä kehyksien korvike

  • abs.htm - lähdekoodi
  • abs.css - lähdekoodi
• Kiinnitetty (engl. fixed) asemointi, jossa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla absoluuttisesti isä-elementin sisälle välittämättä normaalista sijainnista.
  Asemoitu elementti EI vieri dokumentin sisällön mukana.

  .vasenylanurkka {
  	position: fixed;
  	top: 10%;
  	left: 10%;
  	width: 30%;
  	height: 10%;
    }
  	

  Kiinteä kehyksien korvike

  • navbar.htm - lähdekoodi
  • navbar.css - lähdekoodi
• z-index ominaisuudella voidaan määritellä elementin taso ruudulla. Mitä suurempi arvo, niin sitä lähempänä elementti on käyttäjää.
  • z-level.htm - lähdekoodi
  • z.css - lähdekoodi
• Kikkailua asemoinnilla, z-indexillä ja hoverilla. (Toimii oikein Mozilla 1.1:ssä)
  • palikat.html - lähdekoodi
  • palikat.css - lähdekoodi

Muutamia float- ja clear- ominaisuuteen liittyviä esimerkkejä

• Elementtejä rinnakkain
  • float.htm
  • float.css
• Rinnakkaisuuden esto
  • float2.htm
  • float.css
• Sarakejako
  • columns.htm
  • columns.css
• Liukuva sarakkeiden määrä esim. kuvagalleriassa
  • galleria.html
  • kuvagalleria.css
• Lomake
  • form.htm
  • form.css
    

Esimerkki

Muokataan yliopiston kotisivu siistiin xhtml-muotoon ja määritellään uusitun version ulkoasu css:n avulla. Lähdekoodi:

• index.html
• jyu.css

Sivujen rakennetta voi vertailla seuraavien kuvien avulla:

• Uuden sivun rakenne
• Vanhan sivun rakenteesta osa
• Vanhan sivun rakenteesta osa

CSS Mobile profile

CSS Mobile profile on CSS2:en osajoukko, joka on tarkoitettu erityisesti mobiililaitteisiin. Kännykkävalmistajat voivat ilmoittaa kännykkänsä tukevan CSS Mobile profilea eikä suoraan koko CSS2:sta. Tärkeimmät ominaisuudet mitä CSS Mobile profilesta puuttuvat ovat:

• E:hover
• E + F
• E[foo]
• border-collapse
• border-spacing
• empty-cells
• line-height
• max-height
• max-width
• min-height
• min-width
• overflow
• position
• z-index

CSS3

CSS3 on tekeillä oleva uusin versio CSS-suosituksesta. CSS3:ssa ominaisuudet jaetaan moduuleihin joista ohjelmat voivat valita mitä moduuleja haluavat tukea. Tärkeimmät uutuudet mitä CSS3 tulee ehkä tuomaan mukanaan ovat:

• Ominaisuuksien jakaminen moduuleihin
• Pyöreät kulmat, varjostus ja kuvista muodostetut rajat
• Esitystasot joilla voi määrätä näytetäänkö enemmän vai vähemmän tietoja riippuen halutusta esitystasosta (Tavallinen WWW-sivu vs. kalvo)
• SVG yhdistyy tiukemmin CSS:ään
• Matemaattisten merkintöjen muotoilu
• Uusia valitsimia mm. mahdollisuus valita elementti sen sisältämän tekstin perusteella
• Lisäominaisuuksia tekstin muotoilemiseen
• Tapahtumankäsittely
• Nimiavaruuslaajennukset
• Sarakelayout
• Lisää ominaisuuksia kirjasinten ulkoasun muotoiluun
• Ääniefektit
• Speech-mediatyyppi

Hyödyllisiä linkkejä CSS-kikkoihin

• CSS/edge
• CSS Layout Techniques: for Fun and Profit
• The Layout Reservoir