Leijuminen on yksi ratkaisevista CSS-konsepteista. Ilman tämän periaatteen ymmärtämistä verkkosivuja ei voida luoda CSS:n perusteella. Floattaaminen voidaan itse asiassa kääntää kauniisti virtaamiseksi, mikä tiivistää asian olennaisen. Loppujen lopuksi floattaaminen tarkoittaa yksinkertaisesti sitä, että elementti sijoittuu vasemmalle tai oikealle toisen elementin viereen. (Normaalisti elementti olisi toisen elementin alapuolella).
Ensimmäinen esimerkki havainnollistaa tätä näkökulmaa.
<p><img src="kuva.jpg" /> Tässä sarjassa on 12 omaa muotoa, joita voit käyttää esitteissäsi, taustoissa jne. Muodot jakautuvat 18, 21 ja 24 viivaan sekä eri sädeleveyksiin. Nämä esiasetukset ovat hyvä perusta kauniille tehosteille asettelussa ja kuvissa.</p>
Tässä määritellään kappale. Tässä kappaleessa on kuva ja normaali teksti.
Tulos näyttää, että kuva on tekstivirrassa.
Nyt tulee esiin float-ominaisuus.
img { float: left;}
Tässä taas katsaus tulokseen.
Joten kuva on floatattu. Teksti virtaa sitä näin ollen ympäröiden.
Arvoille left ja right voidaan antaa float-ominaisuus, jotta elementti liikkuu vasemmalle (float: left) tai oikealle (float: right) "leijailemaan". Kokeilkaa vaikka antaa kuvalle heti float: right.
Tässä tapauksessa tapahtuu kolme asiaa:
• Kuva poistetaan normaalista virrasta.
• Se siirtyy p-elementissä aivan ylös.
• Se näytetään niin kaukana oikealla kuin mahdollista.
Katsaus tähänastisiin tuloksiin antaa ymmärtää, ettei se näytä vielä kovin kauniilta. Todellisuudessa kuvan ja sen ympäröivän tekstin väliset etäisyydet puuttuvat. Muuttakaa syntaksia seuraavasti:
img {
float: left;
margin-right: 20px;
}
Kuvalle on määritetty 20 pikselin oikea marginaali. Tämä antaa seuraavan näkymän:
Kokeilkaa vaan hieman erilaisia marginaalivälejä tässä.
Leijumisen lopettaminen
<p><img src="kuva.jpg" />Tässä sarjassa on 12 omaa muotoa, joita voit käyttää esitteissäsi, taustoissa jne. Muodot jakautuvat 18, 21 ja 24 viivaan sekä eri sädeleveyksiin. Nämä esiasetukset ovat hyvä perusta kauniille tehosteille asettelussa ja kuvissa.</p> <p><img src="kuva.jpg" />Tässä sarjassa on 12 omaa muotoa, joita voit käyttää esitteissäsi, taustoissa jne. Muodot jakautuvat 18, 21 ja 24 viivaan sekä eri sädeleveyksiin. Nämä esiasetukset ovat hyvä perusta kauniille tehosteille asettelussa ja kuvissa.</p>
Tulos näyttää tältä:
Kun katsotte tulosta, huomaatte, että grafiikka todellakin ulottuu alas päin kappaleen yli. Tämä ei aina ole toivottua tällaisenaan. Tässä vaiheessa
clear-ominaisuus tulee kuvaan. Sen avulla leijuminen voidaan lopettaa. clear pakottaa seuraavan elementin todella alkamaan leijuvan elementin alapuolelta, eikä sen vierestä. clear-ominaisuus tuntee seuraavat arvot:•
left – lopettaa float: left•
right – lopettaa float: right•
both – lopettaa sekä float: right että float: leftAlla olevassa esimerkissä määritän toiselle kappaleelle clear: left, jotta leijuminen saadaan lopetettua.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<p style="background-color:#CCFF66;"><img src="kuva.jpg" />Tässä sarjassa on 12 omaa muotoa, joita voit käyttää esitteissäsi, taustoissa jne. Muodot jakautuvat 18, 21 ja 24 viivaan sekä eri sädeleveyksiin. Nämä esiasetukset ovat hyvä perusta kauniille tehosteille asettelussa ja kuvissa.</p>
<p style="clear:left;">Tässä sarjassa on 12 omaa muotoa, joita voit käyttää esitteissäsi, taustoissa jne. Muodot jakautuvat 18, 21 ja 24 viivaan sekä eri sädeleveyksiin. Nämä esiasetukset ovat hyvä perusta kauniille tehosteille asettelussa ja kuvissa.</p>
</body>
</html>
Näytettyä syntaksia käyttämällä toinen kappale näkyy nyt todellakin kuvan alapuolella.
Useimmissa tapauksissa voit muuten käyttää clear: left tai clear: right sijasta suoraan clear: both. Tämän vuoksi kannattaa luoda tyylitiedostoon yksinkertaisesti vastaava luokka, jonka voi sitten tarvittaessa kutsua.
.clearing {
clear: both;
}
Tätä luokkaa voitte käyttää aina, kun haluatte lopettaa elementin liukumisen.
<p class="clearing">Sisällöt ...</p>
Miksi liukuminen on hyödyllistä
Tietysti liukuminen ei ole tarpeen vain tekstivirran yhteydessä kuvien kanssa. Itse asiassa se muodostaa CSS-pohjaisten verkkosivustojen peruskäsitteen. Liukumisen ansiosta voidaan esimerkiksi toteuttaa monipalstaiset layoutit hyvin yksinkertaisesti. Katso seuraava esimerkki:
<!DOCTYPE html>
<html lang="fi">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
#navi {
float:left;
width:12em;
background-color:#99FFFF;
}
#inhalt {
margin-left: 14em;
background-color: #FF3333;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li>Etusivu</li>
<li>Yhteystiedot</li>
<li>Julkaisutiedot </li>
</ul>
</div>
<div id="inhalt">
Tässä on verkkosivuston sisältö.
</div>
</body>
</html>
Tässä rakennetaan kaksipalstainen layout. Erityistä siinä on: Pylväät ovat vierekkäin.
Ja juuri tämä vierekkäin olo toteutetaan liukumiskäsitteen avulla. Kattavat tiedot sivustojen rakentamisesta liukumisen perusteella seuraavat tämän sarjan myöhemmässä vaiheessa.
