Tallenna tämä html-tiedosto itsellesi ja luo samaan kansioon uusi
css-tiedosto, jonka nimi on laatikot.css. Tee siihen seuraavat tyylimäärittelyt. Palauta css-tiedosto sähköpostilla osoitteeseen www-ohjelmointi@petrit.net.
Sijoittele sinisen laatikon sisällä olevat pienemmät punaiset laatikot oikeassa reunassa olevan kuvan mallin mukaan kussakin tehtävässä annettujen ohjeiden mukaisesti.
Isojen laatikoiden leveys ja korkeus ovat 400px, pienten laatikoiden 80px.
Käytä sekä isolle että pienille laatikoille asettelua: position: relative;.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis adipiscing nisl eu mauris malesuada dictum.
Nunc mollis mi eu neque euismod vel rhoncus orci mollis. Donec sed egestas dui. Suspendisse vehicula, mi in condimentum lobortis, dolor velit feugiat elit, in eleifend augue lectus et ligula.
Donec varius odio a tortor imperdiet ultricies. Quisque ac tincidunt nisi. Morbi quis dui elit, non dictum metus. Curabitur a est vitae arcu vehicula convallis eu id quam.
Käytä isolle laatikolle asettelua position: relative; ja
pienille laatikoille asettelua position: absolute;.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis adipiscing nisl eu mauris malesuada dictum.
Nunc mollis mi eu neque euismod vel rhoncus orci mollis. Donec sed egestas dui. Suspendisse vehicula, mi in condimentum lobortis, dolor velit feugiat elit, in eleifend augue lectus et ligula.
Donec varius odio a tortor imperdiet ultricies. Quisque ac tincidunt nisi. Morbi quis dui elit, non dictum metus. Curabitur a est vitae arcu vehicula convallis eu id quam.
Asettele pienet laatikot limittäin kuvan mukaisesti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis adipiscing nisl eu mauris malesuada dictum.
Nunc mollis mi eu neque euismod vel rhoncus orci mollis. Donec sed egestas dui. Suspendisse vehicula, mi in condimentum lobortis, dolor velit feugiat elit, in eleifend augue lectus et ligula.
Donec varius odio a tortor imperdiet ultricies. Quisque ac tincidunt nisi. Morbi quis dui elit, non dictum metus. Curabitur a est vitae arcu vehicula convallis eu id quam.
Asettele pienet laatikot limittäin, kuten edellisessä tehtävässä, mutta muuta niiden päälekkäisyyden järjestystä css:llä niin, että laatikko 2 on päällimmäisenä ja laatikko 4 alimmaisena. (Älä muuta html-tiedostoa.)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis adipiscing nisl eu mauris malesuada dictum.
Nunc mollis mi eu neque euismod vel rhoncus orci mollis. Donec sed egestas dui. Suspendisse vehicula, mi in condimentum lobortis, dolor velit feugiat elit, in eleifend augue lectus et ligula.
Donec varius odio a tortor imperdiet ultricies. Quisque ac tincidunt nisi. Morbi quis dui elit, non dictum metus. Curabitur a est vitae arcu vehicula convallis eu id quam.
Asettele pienet laatikot mallikuvan mukaisesti ison sivuille
käyttämällä float-ominaisuutta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis adipiscing nisl eu mauris malesuada dictum.
Nunc mollis mi eu neque euismod vel rhoncus orci mollis. Donec sed egestas dui. Suspendisse vehicula, mi in condimentum lobortis, dolor velit feugiat elit, in eleifend augue lectus et ligula.
Donec varius odio a tortor imperdiet ultricies. Quisque ac tincidunt nisi. Morbi quis dui elit, non dictum metus. Curabitur a est vitae arcu vehicula convallis eu id quam.
Asettele pienet laatikot mallikuvan mukaisesti ison sivuille
käyttämällä float-ominaisuutta.
Käytä css:n clear-ominaisuutta, että saat aiemmat
"kelluvat" elementit piirrettyä ennen seuraavan kelluttamista.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis adipiscing nisl eu mauris malesuada dictum.
Nunc mollis mi eu neque euismod vel rhoncus orci mollis. Donec sed egestas dui. Suspendisse vehicula, mi in condimentum lobortis, dolor velit feugiat elit, in eleifend augue lectus et ligula.
Donec varius odio a tortor imperdiet ultricies. Quisque ac tincidunt nisi. Morbi quis dui elit, non dictum metus. Curabitur a est vitae arcu vehicula convallis eu id quam.
Lisää vielä css-säännöt, jotka tekevät seuraavaa:
cursor) muuttuu pointer-tyyppiseksi.