Päivitetty: 10.03.2003.

Asemointi

HTML-kielen pahimpia puutteita on ollut elementtien tarkan sijoittamisen eli asemoinnin vaikeus. Tätä puutetta on yritetty kiertää esim. taulukoiden ja listojen 'väärinkäytöllä'. CSS1 toi mukanaan marginaalit, joilla voidaan osittain asemoida elementti näytöllä tai asetta se päällekkäin muiden elementtien kanssa (esim. margin-top: -20px).
Tämä ei kuitenkaan riitä, kun halutaan määrittää elementtien paikka pikselin tarkkuudella. Lisäksi päällekkäin menevät elementit toimivat (jos toimivat) joka selaimessa vähän erilailla. CSS2 tuo ratkaisun tähän ongelmaan. Nyt voit määrittää elementille absoluuttisen sijainnin näytöllä. Lisäksi elementtien päällekkäisyys voidaan nyt määritellä tarkemmin.


Asemointi

display

Display on yksi CSS:n voimakkaimmista muotoilu -määrittelyistä. Sillä voidaan määritellä/muuttaa (x)HTML elementin tyyppi.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: inline | block | list-item | run-in | compact | marker | none | inherit | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption
Oletusarvo: inline
Käyttö: Kaikki elementit
Periytyvä: Ei
%-arvo: Ei
Media: Kaikki
block
Kun laatikon arvo on 'block' eli lohko, se tekee rivinvaihdon ennen ja jälkeen elementin. <p> on tyypillinen block-elementti.
inline
Kun laatikko on 'inline' eli rivinsisäinen pitää sen sijaita aina lohkon sisällä. <b> on tyypillinen inline -elementti.
list-item
Kun laatikko on 'list-item' eli lista, käytetään sitä listaelementeissä. Huomaa, että lista on myös 'block' elementti, joten sen ei tarvitse sijaita toisen lohkon sisällä. <li> on tyypillinen list-item -elementti.
marker
Ominaisuus 'marker' on tarkoitettu generoidun sisällön muotoiluun. Palaan asiaan myöhemmin.
none
Jos laatikon tyyppi on 'none' sitä ei huomioida mitenkään. Huomaa, ettet pysty vaikuttamaan laatikon näkyvyyteen 'visibility' arvolla, eli näkymättömiä laatikoita ei tällä arvolla kannata määritellä.
run-in
Kun laatikon tyyppi on 'run-in', se määrittää elementin joko teksti- tai lohkolaatikoksi, riippuen siitä mikä seuraavan laatikon tyyppi on. Jos seuraavan laatikon tyyppi on 'block' (siis tavallinen lohkolaatikko) niin laatikosta tulee lohkon ensimmäinen tekstilaatikko. Muussa tapauksessa laatikosta tulee tavallinen lohkolaatikko.
compact
Kun laatikon tyyppi on 'compact' ja seuraavan laatikko on tavallinen 'block' (lohkolaatikko) niin laatikosta tulee tekstilaatikko (inline).
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell ja table-caption
Nämä ominaisuudet määrittävät taulukon (table) eri arvoja. Palaan asiaan taulukkojen yhteydessä.

dispaly esimerkki

!Background-color ja -image esimerkkejä ei tulosteta, koska ne eivät näy paperilla oikein!

<< Alkuun


position

Määrittelee kuinka elementti sijoitetaan näytölle

Yhteensopivuus: CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: static | relative | absolute | fixed | inherit
Oletusarvo: static
Käyttö: Kaikki elementit, paitsi generoidut
Periytyvä: Ei
%-arvo: Ei
Media: Visual
static
Määritys position: static on siis elementin oletusarvo, tällöin elementti asemoidaan aivan normaalisti
relative
Määritys position: relative sijoittaa elementin suhteellisesti käyttäen top-, bottom-, left-, ja right -ominaisuuksia. Suhteellinen asema lasketaan siitä kohdasta, jossa elementti olisi jos sen arvo olisi static. Elementin relatiivinen sijoitus ei vaikuta seuraavaan elementtiin.
absolute
Määritys position: absolute sijoittaa elementin absoluuttisesti eli se saa sen 'kellumaan'. Elementin paikka määritellään ylemmäntason block -elementin suhteen, käyttäen top-, bottom-, left-, right-, width-, ja height -ominaisuuksia. Yleensä absoluuttisesti asemoitu elementti sijoitetaan suoraan <body> -elementin alle, jolloin asema lasketan selaimen vasemmasta yläkulmasta (0,0). Absoluuttinen sijoittaminen ei vaikuta seuraavaan elementtiin.
fixed
Määritys position: fixed toimii muuten kuten absolute, mutta elementti pysyy siinä kohdassa johon se on määritelty kun sivua vieritetään. Elementti joka kiinnitetään tiettyyn kohtaan käyttäytyy kuten kehykset, eli se pysyy paikallaan kun muu osa vierii. Tämä ominaisuus toimii vain uusimmissa selaimissa.

position esimerkki

<< Alkuun


top

Määrittelee elementin yläpuolelle jäävän tilan

Yhteensopivuus: CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: <pituus> | <%> | auto | inherit
Oletusarvo: auto
Käyttö: Elementit joiden position arvo muu kun 'static'
Periytyvä: Ei
%-arvo: Viittaa block-elementin korkeuteen
Media: Visual

top esimerkki

Katso top esimerkki.

<< Alkuun


 

right

Määrittelee elementin oikealle puolelle jäävän tilan

Yhteensopivuus: CSS2 (IE5, NN6, Opera 5)
Sallitut arvot: <pituus> | <%> | auto | inherit
Oletusarvo: auto
Käyttö: Elementin joiden position arvo muu kun 'static'
Periytyvä: Ei
%-arvo: Viittaa block-elementin korkeuteen
Media: Visual

right esimerkki

!Yleensä asemointi määritellään käyttäen 'left'- ja 'top' -arvoja.

<< Alkuun


bottom

Määrittelee elementin alapuolelle jäävän tilan

Yhteensopivuus: CSS2 (IE5, NN6, Opera 5)
Sallitut arvot: <pituus> | <%> | auto | inherit
Oletusarvo: auto
Käyttö: Elementit joiden position arvo muu kun 'static'
Periytyvä: Ei
%-arvo: Viittaa block-elementin korkeuteen
Media: Visual

bottom esimerkki

!Yleensä asemointi määritellään käyttäen 'left'- ja 'top' -arvoja.

<< Alkuun


left

Määrittelee elementin vasemmalle jäävän tilan.

Yhteensopivuus: CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: <pituus> | <%> | auto | inherit
Oletusarvo: auto
Käyttö: Elementit joiden position arvo muu kun 'static'
Periytyvä: Ei
%-arvo: Viittaa block-elementin korkeuteen
Media: Visual

left esimerkki

<< Alkuun


float

Määrittää laatikon kierron, eli saa elementin 'kellumaan'

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4.7, Opera 3.6)
Sallitut arvot: left | right | none | inherit
Oletusarvo: none
Käyttö: Kaikki elementit
Periytyvä: Ei
%-arvo: Ei
Media: Visual
none
Laatikko sijoitetaan normaalisti
left
Laatikko asettuu vasemmalle ja seuraavaksi tulevat elementit tulevat oikealle
right
Laatikko asettuu oikealle ja seuraavaksi tulevat elementit tulevat vasemmalle

Huom!
Kun määrittelet laatikolle kierron, laatikosta tulee aina lohko eli 'block' -tyylinen. Huomaa myös, että ennekuin laatikko voi kellua (kiertää toisen elementin) CSS2 vaatii, että elementin leveys (width) on määritelty.

left esimerkki

<< Alkuun


clear

Katkaisee elementtien kierron

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4.7, Opera 3.6)
Sallitut arvot: none | left | right | both | inherit
Oletusarvo: none
Käyttö: 'block' eli lohkoelementit
Periytyvä: Ei
%-arvo: Ei
Media: Visual
none
Laatikko saa kellua vapaasti
left
Laatikon vasen reunus ei saa rajoittua toiseen kelluvaan laatikkoon, vaan kierto katkaistaan
right
Laatikon oikea reunus ei saa rajoittua toiseen kelluvaan laatikkoon, vaan kierto katkaistaan
both
Laatikon vasen tai oikea reunus ei saa rajoittua toiseen kelluvaan laatikkoon, vaan kierto katkaistaan

clear esimerkki

<< Alkuun


z-index

Määrittää päällekkäin menevin laatikoiden järjestyksen

Yhteensopivuus: CSS2 (IE4, NN4.5, Opera4)
Sallitut arvot: auto | <kokonaisluku> | inherit
Oletusarvo: auto
Käyttö: Kelluvat elementit
Periytyvä: Ei
%-arvo: Ei
Media: Visual
<kokonaisluku>
Kokonaisluku kertoo laatikon 'pinojärjestyksen'. Arvo 0 on alimmaisena ja mitä suurempi luku sitä ylempänä (lähempänä katsojaa) se on. Myös negatiiviset arvot ovat mahdollisia, kuten z-index: -1. Tätä voidaan hyödyntää esim. DHTML -koodissa.

z-index esimerkki

!Netscapessa z-index toimii täysin oikein vasta versiosta 6.0 lähtien.

<< Alkuun


direction

Määrittää elementtien kirjoitussuunnan

Yhteensopivuus: CSS2
Sallitut arvot: ltr | rtl | inherit
Oletusarvo: ltr
Käyttö: Kaikki elementit
Periytyvä: Kyllä
%-arvo: Ei
Media: Visual
ltr
Left-to-right eli vasemmalta oikealle
rtl
Right-to-left eli oikealta vasemmalle.

direction esimerkki

.rtl { direction: rtl }

 <p class="rtl">Right-To-Left</p>

<< Alkuun


unicode-bidi

Kaksisuuntaisen tekstin tuki

Yhteensopivuus: CSS2 (IE5, NN6)
Sallitut arvot: normal | embed | bidi-override | inherit
Oletusarvo: normal
Käyttö: Kaikki elementit
Periytyvä: EI
%-arvo: Ei
Media: Visual
Huom!
'Unicode-bidi' on tarkoitettu yhdessä 'direction' kanssa määrittelemään kielen kirjoitussuunnan ja -tavan. Unicode-bidi on tarkoitettu tilanteisiin, jossa esim. käytetään arabiankieltä ja englantia samalla sivulla. Määrittely toimii täysin oikein vain XML -dokumenteissä, huomaa myös että tietokoneessa täytyy olla asennettuna tuki vieraalle kielelle. Tämän takia en ole voinut testata ominaisuuden toimivuutta kunnolla.

unicode-bidi esimerkki

h6 { direction: rtl; unicode-bidi: bidi-override }

<h6>direction: rtl; unicode-bidi: bidi-override</h6>

 

<< Alkuun


 

overflow

Overflow määrittää mitä tehdään lohkotason sisällölle, jos se menee yli määriteltyjen rajojen.

Yhteensopivuus: CSS2 (IE4, NN6, Opera6)
Sallitut arvot: visible | hidden | scroll | auto | inherit
Oletusarvo: visible
Käyttö: lohko- ja korvatut elementit
Periytyvä: EI
%-arvo: Ei
Media: Visual

Overflow kuuluu CSS2:n visuaalisiin efekteihin, eikä asemointiin. Esittelen sen siis toistaiseksi hieman väärässä kohdassa. Teen näin koska overlow -ominaisuuden tunteminen on hyödyksi tasojen käsittelyyn.

visble
Elementin korkeus ja leveys määritteet ohitetaan ja sisältö näytetään kokonaisuudessaan.
hidden
Elementin yli menevää sisältöä ei näytetä.
scroll
Elementtiin luodaan vierityspalkit, joiden avulla sisältöä voidaan vierittää.
auto
Elementtiin luodaan vierityspalkki/t vain jos sisältö ei mahdu siihen kokonaan.

overflow esimerkki

<< Alkuun


taso eli layer

W3C:n määrityksen mukaan jokainen lohkotason elementti (block) voidaan asemoida absoluuttisesti tai suhteelliseksi, ja näin asettaa 'kelluvaksi'. Käytännössä yleensä käytetään <div> -elementtejä, jotka toimivat kaikilla nykyisillä selaimilla.

Nimitys 'layer' on hieman harhaanjohtava, sillä se viittaa Netscape 4.x (mutta ei NN 6.x) selaimissa toimivan <layer> -elementtiin. W3C ei kuitenkaan ole hyväksynyt kyseistä elementtiä virallisiin CSS määrittelyihin.

Jos olet käyttänyt jotain kuvankäsittely-ohjelmaa, tiedät mikä taso on. Jos et ole, niin ajattele, että taso on kuin piirtoheitinkalvo.

Eli taso on läpinäkyvä ja sen paikkaa voi muutella. Tämän lisäksi tason koko, sijainti ja pinojärjestys voidaan määritellä, lisäksi tasolle voidaan antaa taustaväri tai kuva, sekä määritellä reunukset. Luodaan seuraavaksi <div> -elementillä taso, jolla on absoluuttinen sijainti:

taso esimerkki

Katso taso esimerkki
(sivulla on neljä tasoa joista tämä on ylimpänä )

<div id="taso3" style="position:absolute; left:175px; top:700px; width:150px; height:150px; z-index:2">Taso3 </div>

id="taso3"
taso3 on siis elementin yksilöllinen tunniste. Kuten jo CSS1-opas kertoo, (x)HTML-dokumentissa ei saa olla elementtejä joilla on sama id.
position: absolute
kertoo, että elementti on 'kelluva', eli se sijoitetaan vapaasti muiden päälle.
left: 175px; top: 700px
kertovat tason sijainnin. Paikka määritetään aina selaimen (tai elementin joka sisällä taso on) vasemmasta yläreunasta (left: 0; top:0).
width: 150px; height; 150px
kertovat tason leveyden ja korkeuden.
z-index:3
määrittää elementin tasolle 3. Mitä suurempi luku sitä 'korkeammalla' eli lähempänä katsojaa taso on.

Lisäksi elementille on annettu id-tunnisteen (#taso3) avulla seuraavat muotoilusäännöt:

border: 1px #000000 dashed
Joka piirtää tason ympärille 1pikselin paksuisen mustan reunuksen
background-color: Honeydew
antaa tasolle taustavärin, joka oletuksena on siis läpinäkyvä

<< Alkuun


Sisäkkäiset tasot

Tasot voivat sijaita myös toisten sisällä. Tällöin sisimmän tason paikka lasketaan ulomman tason suhteen. Jos luomme sisäkkäisiä tasoja käyttäen <div> -elementtejä, tulee tasot asettaa seuraavasti

Katso esimerkki.

<div id="taso0">
  <div id="taso1">...</div>
  <div id="taso2">...</div>
</div>

Sisäkkäisten tasojen tulee tietenkin olla kelluvia, mutta ne voivat olla tyypiltään erilaisia. Esimerkissä käytän kahta tasoa, joista ensimmäinen on asemoitu suhteellisesti (relative), mutta sen sisällä oleva taso on absoluuttisesti asemoitu.

Vaikka tasot tuovat paljon uutta vapautta WWW-sivujen suunnitteluun, kannattaa muistaa että kaikki selaimet eivät niitä tue. Joten sivujen tulisi olla lukukelpoisia myös tapauksessa jossa tasot eivät näy oikein.

<< Alkuun



© Petteri Perälä 2000 - 2003.
E-mail: [ petepe@mbnet.fi ].

Valid CSS! Valid HTML 4.01!