CSS-opas

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2008!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

CSS:n laatikkomalli ja asemointi

Elemementin sijainnin hallinta - ominaisuudet position ja float

Elementin asemointia dokumentissa hallitaan ominaisuuksien position ja float avulla.

Ominaisuuden position avulla määritellään elementin asettelumalli. Mahdolliset arvot ominaisuudelle position ovat:

absolute: Absoluuttinen asettelumalli. Elementille määritetään kiinteä, absoluuttinen sijainti dokumentissa.
relative: Relatiivinen asettelumalli. Elementin asemointi määrittyy suhteessa elementin normaaliin sijaintiin.
fixed: Kiinteää asettelumalli. Elementille määritetään kiinteä, absoluuttinen sijainti suhteessa nk. viewport-tilaan (vastaa selaimen ikkunaa). Elementti "kelluu" vieritettäessä.
static: Normaali asettelumalli. Elementin asemointi määrittyy muiden elementtien asemoinnin perusteella.

Elementin sijainti määritetään ominaisuuksilla top, left, right ja bottom lukuunottamatta normaalia asettelumallia (joissa ko. ominaisuuksia ei oteta huomioon. Ominaisuuden z-index avulla määritellään nk. syvyystaso. Sen avulla elementtejä voidaan sijoittaa mm. limittäin ja/tai päällekkäin kuten (läpinäkyviä) lasilevyjä.

Esimerkki. Dokumentin yläosassa on paikallaan kelluva div (id:yla), jonka korkeus on 80px. Sen alapuolelle sijoitaan sisältö (id:sisalto) - sijainti määritetään absoluuttisesti kohtaan dokumentin yläreuna + 80px eli aivan kelluvaan yläosaan kiinni. Dokumentissa olevat hyperlinkit esitetään normaalista rivikorkeudesta poikkeavasti (3px ylempänä) . Jotta yläosa ei jäisi sisällön alle, on sille määritelty z-index arvoksi erittäin korkea luku.

...
<title>CSS esimerkki</title>
<style type="text/css" media="screen">
div#yla {
	background-color:#CCFF99; 
	position:fixed;
	height:80px;
	top:0px;
	z-index:9999;
	width:100%;
}
div#sisalto {
	background-color:#CCCCFF;
	position:absolute; 
	top:80px; 
	width:100%;
}
a {
	position:relative; 
	bottom:3px;
}

</style>
</head>

<body>
<div id="yla">...</div> 
<div id="sisalto"> 
  <p><a href="#">Lorem ipsum</a> dolor sit
  <p>Nullam dui. Fusce felis lorem....</p>
  <p>Donec porta. Proin non ....</p>
</div>
</body>
...

Ominaisuuden float-avulla määritellään elementille vierityspiste ja otetaan käyttöön nk. kelluva asemointi. Ominaisuus float kertoo kummalle puolelle (oikea, vasen) sisältävää elementtiä valitsimen määrittämän elementin tulisi sijoittua. Float-ominaisuutta käytettäessä valitsimen kohteena olevaa elementtiä ympäröivät elementit pyrkivät kiinnittymään kelluvan elementin ympärille. Jos tämä piirre halutaan välttää, tulee hyödyntää ominaisuutta clear.

Float-prosessi

Ominaisuus float on käytettävissä vain jos valittu elementti noudattaa normaalia, staattista asettelumallia.

Esimerkki. Dokumentissa oleva kappaleteksti rivittyy vasempaan reunaan sijoittuvan kuvan ympärille tiiviisti.

...
<title>CSS esimerkki</title>
<style type="text/css" media="screen">
...
p.kuva {float:left;margin-right:20px;}
...
</style>
</head>

<body>
<div id="sisalto">
  <p>Lorem ipsum dolor sit amet....</p>
  <p class="kuva"><img src="kuva.gif" width="200" height="200" alt="lorem ipsum"/></p>
  <p>Nullam dui. Fusce felis lorem....</p>
  <p>Donec porta. Proin non ....</p>
</div>
</body>
...

Tutustu artikkelin muihin osiin:
»»» CSS »»»CSS:n laatikkomalli
»»» CSS »»»Elementin asemointi CSS:n avulla - ominaisuudet display, width ja height
»»» CSS »»»Elementin asemointi CSS:n avulla - ominaisuudet position ja float

CSS-opas

CSS:n laatikkomalli ja asemointi

Elemementin sijainnin hallinta - ominaisuudet position ja float

Tallenna tämä sivu kirjanmerkkeihin!