Asemointi. 1. Lohkon korkeus ja leveys

Transkriptio

1 Asemointi Asemointi on elementtien sijoittelua. Sisältö: 1. Lohko korkeus ja leveys height, width min-height, max-height, min-width, max-width overflow, overflow-x, overflow-y 2. Float - kelluva sisältö float clear 3. Asemointi position left, top, right, bottom z-index clip Elina Ulpovaara 1. Lohkon korkeus ja leveys Leveys - width Korkeus - height -auto (oletus) - mittayksiköt -prosentit - inherit <p > Jukolan talo, eteläisessä Hämeessä, seisoo erään mäen pohjoisella rinteellä, </p> </article> h2 {height:50px; text-align:center;} article {background-color:rgb(153,255,255); width:400px;} 1

2 min-height max-height min-width max-widtn - none (oletus) - mittayksiköt -prosentit - inherit Esimerkki minimikorkeudesta: article {width:400px; min-height:300px} Articlen korkeus on vähintään 300px. Jos sisältö ei mahdu 300px:n, niin lohkon korkeus kasvaa. Esimerkki maksimikorkeudesta: article {width:400px; max-height:300px} 300px Articlen korkeus on sisällön vaatima korkeus kuitenkin enintään 300px. Tässä osa sisällöstä ei mahdu sille varattuun tilaan -> tapahtuu ylivuoto. 2

3 Ylivuoto - overflow Kuvaus: Ehdottaa, mitä elementille, jolle on määritetty korkeus ja leveys, tapahtuu, jos se ei mahdu sille varattuun tilaan. - visible, ylivuotava osa jää näkyviin (oletus) - auto, vierityspalkit näkyvissä, jos ylivuoto tapahtuu - scroll, vierityspalkit näkyvissä - hidden, elementin sisältö leikkautuu ylivuotavalta osalta pois article {background-color:rgb(153,255,255); width:300px; height:300px; overflow:auto;} overflow-x overflow-y Kaikki selaimet, IE9+ Kuvaus: Ehdottaa, mitä elementille, jolle on määritetty korkeus ja leveys, tapahtuu vaaka- tai pystysuuntaan, jos se ei mahdu sille varattuun tilaan. - visible, ylivuotava osa jää näkyviin (oletus) - auto, vierityspalkit näkyvissä, jos ylivuoto tapahtuu - scroll, vierityspalkit näkyvissä - hidden, piilottaa valitun vierityspalkin (x tai y) ja toinen palkki näkyy, jos tarvitaan -no-display -no-content article {background-color:rgb(153,255,255); width:300px; height:300px; overflow-y:hidden;} <img src="talo.png" alt="jukolan talo" width="400px" height="225"> Sisältö on leveämpi ja korkeampi kuin sille varattu tila. 3

4 2. Float - kelluva sisältö float ominaisuus Kuvaus: - Miten elementti sijoittuu jälkeen tulevaan elementtiin nähden. - Vaakasuuntaista sijoittelu. -left -right - none (oletus) - inherit Kellutuksen lopettaminen: clear -left -right - both, kummallekaan puolelle ei tule kelluvia elementtejä -none Kertaus: kuvat materiaalista Kuva tekstin viereen float-ominaisuudella <img src="talo.png" alt="jukolan talo" width="173px" height="100px" > <p>jukolan talo, eteläisessä Hämeessä, seisoo erään mäen pohjoisella rinteellä,. </p> img {float:left; margin-right:10px;} img {float:right: margin-left:10px;} 4

5 <img src="talo.png" alt="jukolan talo" width="173px" height="100px" > <p>jukolan talo, eteläisessä Hämeessä, seisoo erään mäen pohjoisella rinteellä,. </p> img {float:left;} p {margin-left:200px;} <p id= kappale_1 >Jukola talo.</p> <img src= talo.png alt= Jukolan talo > <h3 id= veljekset >Veljekset</h3> <p>veljesten nimet.</p> #kappale_1 {width:300px: float:left} #veljekset {clear:left} INF2LS016 5

6 3. Asemointi Position- ominaisuus Kuvaus: - Määrää tavan, miten elementti sijoitetaan sivulle. - static - normaali - relative - suhteellinen, verrataan paikkaan, johon se on html-koodissa liitetty - absolute - elementti irrotetaan sivusta ja muu sisältö latautuu aivan kuin elementtiä ei olisi ollenkaan olemassa - 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. Elementin suhteellinen sijoittaminen: position: relative Elementtiä liikutetaan suhteessa siihen paikkaan, missä sen kuuluisi sijaita. Sijainnin muutos ei vaikuta muihin elementteihin. <img src="talo_2.png" alt="jukolan talo"> <p> Jukolan talo, eteläisessä Hämeessä, seisoo erään mäen pohjoisella Huom. Vertaa marginaaliin. img {float:left; position:relative; top:70px;} p {margin-left:200px} 6

7 <img src="talo_2.png" alt="jukolan talo"> <p> article {width:500px; Jukolan talo, eteläisessä Hämeessä, seisoo margin:auto; erään mäen pohjoisella border:solid 2px rgb(204,204,204)} img {float:left; position:relative; top:70px; left:50px;} Alkuperäinen paikka Kuvan siirtyminen left:50px top:50px Elementin absoluuttinen sijoittaminen: position: absolute Elementti irrotetaan sivusta ja sijoitetaan sille absoluuttisesti määritettyyn paikkaan top-, right-, bottom- ja left-arvojen avulla. Käytä prosentteja tai em-arvoja, kun teet joustavia/mukautuvia ulkoasuja. Huom. Elementit voivat sijoittua toistensa päälle. <img src="talo_2.png" alt="jukolan talo"> <p> Jukolan talo, eteläisessä Hämeessä, seisoo erään mäen pohjoisella article {width:500px; margin:auto; border:solid 2px gray} img {float:left; position:absolute; top:70px; right:50px; top:70px right:50px 7

8 article {width:500px; margin:auto; border:solid 2px gray} Position:absoluten kanssa: Arvot top, right, bottom ja left mitataan selainikkunan reunoista. Arvot margin-left ja margin-top mitataan elementin alkuperäisestä paikasta. img {position:absolute; z-index:0; top:20px; margin-left:20px;} h2 {width:250px; background-color: white; border:solid 2px red); margin-bottom:80px; margin-left:100px; position:relative; z-index:1} Z-index kertoo päällekäin menevien elementtien järjestyksen: suurin arvo päälimmäiseksi. Jotta h2:selle voi antaa z-index-arvon, on position-ominaisuus pakollinen. Position arvoon absolute liittyy ominaisuus clip clip leikkaa sisältöä, jos se on liian suuri sille tarkoitettuun paikkaan -auto (oletus) - inherit - rect (top, right, bottom, left) top:50px bottom:200px left:85px right:330px img {position:absolute; clip:rect(50px 330px 200px 85px);} <header> <img src="talo.png" alt="jukolan talo" height="225px" width="400px"> </header> 8

9 Elementin kiinnittäminen selainikkunaan: position: fixed Kiinnitetty osa pysyy paikallaan, kun selainikkunaan vieritetään. header {position:fixed; background-color:white} p { margin-top:150px} article {width:500px; margin:auto; border:solid 2px gray} img {position:absolute; z-index:0; top:20px; margin-left:20px;} h2 {width:250px; background-color: white; border:solid 2px red; margin-bottom:80px; margin-left:100px; position:relative; z-index:1} <header> <img src="talo_2.png" alt="jukolan talo"> </header> <p > Jukolan talo, eteläisessä Hämeessä, seisoo erään mäen pohjoisella rinteellä, liki Toukolan kylää. Sen läheisin ympäristö on kivinen tanner, mutta alempana alkaa pellot, joissa, ennenkuin talo oli 9