Asemointi CSS:n avulla

• Luentotaltiointi
• Asemointi
• Absoluuttinen asemointi (engl. absolute positioning)
• Kiinnitetty asemointi (engl. fixed positioning)
• Suhteellinen asemointi (engl. relative positioning)
• Asemointi z-suunnassa
• Asemointiesimerkkejä
• Asemoinnin suunnittelu
• Asemointiesimerkki

Tällä luennolla käsitellään sivun ulkoasun asemointia CSS:n avulla.

Asemointi

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 äiti-elementin paikan ja koon suhteen, jossa lohko sijaitsee.
• fixed-kiinnittää positioinnin siten, että elementtiä ei vieritetä näytöllä ja positiointi tapahtuu aina koko näytön suhteen eikä äiti-elementin suhteen

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

Absoluuttinen asemointi (engl. absolute positioning)

Absoluuttisessa (engl. absolute) asemoinnissa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla absoluuttisesti tai kiinteästi asemoidun isä-elementin sisälle välittämättä normaalista sijainnista.

Absoluuttisesti 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 asemointi (engl. fixed positioning)

Kiinnitetyssä (engl. fixed) asemoinnissa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla absoluuttisesti näyttöalueen sisällä

Asemoitu elementti EI vieri dokumentin sisällön mukana.

Kiinnitetty asemointi ei toimi Internet Explorerissa.

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

Kiinnitetty asemointi -esimerkki

• navbar.htm - lähdekoodi
• navbar.css - lähdekoodi

Suhteellinen asemointi (engl. relative positioning)

Suhteellisessa (engl. relative) asemoinnissa, elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla suhteutettuna normaaliin sijaintiinsa.

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

• relative.htm-lähdekoodi
• relative.css-lähdekoodi

Asemointi z-suunnassa

z-index ominaisuudella voidaan määritellä elementin taso ruudulla. Mitä suurempi arvo, niin sitä lähempänä elementti on käyttäjää.

• z-index.html - lähdekoodi
• z.css - lähdekoodi

Asemointiesimerkkejä

• Erilaisia asemointeja
  • asemointi.html - lähdekoodi
  • asemointi.css - css
• Sarakejako
  • columns.htm
  • columns.css
• Liukuva sarakkeiden määrä esim. kuvagalleriassa
  • galleria.html
  • kuvagalleria.css
• Lomake
  • form.htm
  • form.css
    

Asemoinnin suunnittelu

CSS2 antaa useita erilaisia mahdollisuuksia WWW-sivujen visuaaliseen muotoilemiseen. Käytetystä tavasta huolimatta kannattaa sivu suunnitella seuraavan ohjeistuksen mukaan:

• 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ä div-elementillä.
• Jos jokin lohko halutaan asemoida absoluuttisesti/kiinteästi, niin myös kaikki muut lohkot on syytä asemoida
• Jos aiot käyttää yhteen lohkoon float-ominaisuutta niin tee koko sivun pääasemointi float-ominaisuudella
• Asemoitujen/leijutettujen lohkojen sisällä voi edelleen käyttää asemointia tai float-ominaisuutta

Asemointiesimerkki

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