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ä
• CSS3
  • CSS3:n uutuudet
  • Muutamia CSS3-esimerkkejä
• Asemoinnin suunnittelu
• Asemointiesimerkkejä
• Lisätietoa

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

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

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;
  }
  

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

Asemointiesimerkkejä

• Erilaisia asemointeja
• Sarakejako
• Liukuva sarakkeiden määrä esim. kuvagalleriassa
• Lomake
• IE ja lohkojen koko
• Jatkuva tausta navigointipalkille
• Kuva ei mahdu lohkoon

CSS3

CSS3 on tekeillä oleva uusin versio CSS-suosituksesta. CSS3:ssa ominaisuudet jaetaan moduuleihin joista ohjelmat voivat valita mitä moduuleja haluavat tukea. Moduuleja on yli 30 kappaletta.

CSS3:n uutuudet

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

Muutamia CSS3-esimerkkejä

/* Merkitään aktiivinen lomake-elementti */
input[type="text"]:focus, textarea:focus { border-color: #FC0; }

/* Merkitään sisäisen linkin kohde */
body *:target { border-bottom: 1px dotted; }

/* Muotoillaan sisäiset linkit poikkeavasti. Riittääkö pelkkä alleviivaus? */
a:link[href^="#"] {
        color: black;
}

a:link[href^="mailto:"] {
        text-decoration: none;
}

print-mediassa:

a:link:after { /* linkin osoite näkyviin */
        content: " <" attr(href) "> ";
        color: silver;
        font-family: "Courier New", Courier, monospace;
        font-size: smaller;
}

a:link[href^="/"]:after { /* palvelimen sisäiset absoluuttiset linkit */
        content: " <http://appro.mit.jyu.fi" attr(href) "> ";
}

a:link[href^="#"] { /* sisäiset linkit */
        text-decoration: none;
}

a:link[href^="#"]:after { /* poistetaan ensimmäisen valitsemen vaikutus */
        content: "";
}

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

Asemointiesimerkkejä

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

Sivujen rakennetta voi vertailla seuraavien kuvien avulla:

• Uuden sivun rakenne
• Vanhan sivun rakenteesta osa
• Vanhan sivun rakenteesta osa
• Video sivun muutosprosessista

Uusittu mtv3:n sivu ja video mtv3-muutoksen aloittamisesta ja video mtv3-muutoksen viimeistelystä

vr

Lisätietoa

• How to hide CSS from buggy browsers
• Tricking browsers and hiding styles
• Position is everything
• windows explorer vs. the standards
• Printing a Book with CSS: Boom!
• Prince
• CSSToXSLFO
• CSS Selector builder
• Eledicss