Asemointi Asemointi on elementtien sijoittelua. Sisältö: height, width float - kelluva sisältö position Elina Ulpovaara 13.10.2009 1. Lohkon korkeus ja leveys Leveys - width Korkeus - height - mittayksiköt -prosentit -auto h2 {height: 50px; h2 {height: 50px; background-color: #FFFFCC; text-align: center;} p {width: 75%; text-align: left;} 1
Ylivuoto - overflow p {width: 75%; height:100px; overflow:auto} Kuvaus: Ehdottaa, mitä elementille, jolle on määritetty korkeus ja leveys, tapahtuu, jos se ei mahdu sille varattuun tilaan. - auto, vierityspalkit näkyvissä, jos ylivuoto tapahtuu - scroll, vierityspalkit näkyvissä - visible, ylivuotava osa leikkautuu pois - hidden, elementin sisältö vuotaa vieressä olevan elementin päälle (huonosti tuettu) 2. Float - kelluva sisältö float -ominaisuus Kuvaus: - Miten elementti sijoittuu jälkeen -left tulevaan elementtiin nähden. -right - Vaakasuuntaista sijoittelu. -none Esimerkki: img {float:left} img {float:right} 2
Kellutuksen lopettaminen: clear - left -right - both, kummallekaan puolelle ei tule kelluvia elementtejä -none <img.../> <p class= alku >Omenapuut lk >Omen kukkivat kki kesällä</p><p class= loppu>ja tuottavat makoisia hedelmiä syksyllä</p> img {float:left}.loppu {clear:left} Kaksi esimerkkiä: <img src="omena.gif" alt="omena"> <p class="koti">kotiviljely ilj l ja kaupallinen hedelmänviljely l on vähitellen opittu erottamaan toisistaan. Kotipuutarhuri, joka kasvattaa omenia vain perheensä tarpeeksi, voi viljellä ne haluamallaan tavalla ja valita mieleisensä lajikkeet. Tavallisesti yhdestä kolmeen puuta perheenjäsentä kohti riittää.</p> <p class="kauppa">kauppaa varten omena on asianmukaisesti lajiteltava ja mieluiten viljeltävä vakiolajikkeita.</p> img {float:left}.koti {float:left; width:200px} 3
<div class="kuvateksti"> <img src="omena.gif" alt="omena" <p>omenat ovat herkullisia </p>.kuvateksti {border:solid red 2px; text-align:center; width:170px; margin-right:20px; i float:left} 3. Asemointi Position- ominaisuus Kuvaus: - Määrää tavan, millä elementti sijoitetaan sivulle. - static - normaali - relative - suhteellinen, verrataan paikkaan, johon se on xhtml-koodissa liitetty - absolute - sijoittaa elementti määrättyyn paikkaan - fixed - kuten absolute, mutta elementti pysyy paikallaan vaikka ympäröivää sisältöä vieritetään Position-ominaisuuteen liittyy ominaisuudet left, top, right ja bottom, joiden avulla määritetään elementin tarkka paikka. Z-index-ominaisuuden avulla ilmoitetaan, mikä elementti on päällimmäinen, jos elementit menevät päällekkäin. 4
Elementin suhteellinen sijoittaminen: position: relative Elementtiä liikutetaan suhteessa siihen paikkaa, missä sen kuuluisi sijaita. Sijainnin muutos ei vaikuta muihin elementteihin. <div class="kuvateksti"> <img src="omena.gif" alt="omena > <p>omenat ovat herkullisia </p>.kuvateksti {border:solid red 2px; text-align:center; width:170px; position:relative; top:50px; margin-right:20px; float:left} Huom. Vertaa marginaaliin. Elementin absoluuttinen sijoittaminen: position: absolute Elementti irrotetaan sivusta ja sijoitetaan sille absoluuttisesti määritettyyn paikkaan. Käytä prosentteja tai em-arvoja, kun teet joustavia/mukautuvia ulkoasuja. Huom. Elementit voivat sijoittua toistensa päälle..kuvateksti {border:solid red 2px; text-align:center; width:170px; position:absolute; top:50px; right:50px;}.teksti { width:500px;} <div class="kuvateksti"> <div class= kuvateksti > <img src="omena.gif" alt="omena" <p>omenat ovat herkullisia </p> 5
Elementin kiinnittäminen selainikkunaan: position: fixed Kiinnitetty osa pysyy paikallaan, kun selainikkunaan vieritetään. Tähän tulee navigontipalkki. <div id="yla_osa"> <h1>omenapuut</h1> <p>kotisivu - lajikkeet - puiden hoito omena reseptit</p> <div id="sivu"> <div class="kuvateksti"><img src="omena.gif" alt="omena"> <p>omenat ovat herkullisia</p> <div class="teksti"> <p >Kotiviljely ja kaupallinen hedelmänviljely on vähitellen opittu erottamaan toisistaan.. #yla_osa {position:fixed; border-bottom: solid red 2px; top:0px; left:0px; width:100%; backgroundcolor:rgb(255,255,255)}, #yla_osa h1, p {margin-left:10px} #sivu {margin-top:7.5em} 6