[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]

Div + float

Ominaisuus float siirtää elementtejä joko vasemmalle tai oikealle - elementit ikään kuin "kelluvat" näihin suuntiin. Tällä tavoin määriteltyjen elementtien pitäisi olla samalla vaakatasolla kuin elementtien, joille ei ole määritelty ominaisuutta float. Kelluvien elementtien korkeuden ei saisi vaikuttaa emoelementin korkeuteen. Kaikkien kelluvien elementtien (mukaan luettuna normaalisti rivinsisäiselementit) tulee käyttäytyä lohkoina. Ominaisuuden float kanssa käytetään usein ominaisuutta clear. Alla mainitulla sivulla on joitakin esimerkkejä, jotka käyttävät näitä ominaisuuksia:

W3C: CSS1 Test Suite: 5.5.25 float[Pw].

Alla on esimerkki, jossa on käytetyt näitä ominaisuuksia: ([M][S][Pw]):

img.icon
{float: left; /* kuva kelluu vasemmalle - toinen arvo on right */
clear: left;} /* kuvan vasen puoli on "siivottu" muista elementeistä (vaikka tilaa olisi useille kelluville elementeille kaikki kelluvat elementit ovat nyt omilla riveillään) - muita arvoja ovato left ja all (sen paremmin oikealla kuin vasemmalla puolellakaan ei ole mitään) */

Kelluvana elementtinä on järkevä käyttää elementtiä DIV, jolloin voi luoda kehys- ja taulukkovapaan perusrakenteen. DIV-elementteihin voi tehdä kelluvat linkkilistat. Tekstin voisi kirjoittaa kelluvan elementin viereen eikä olisi mitään tarvetta käyttää kehysvapailla sivuilla dokumentin perusmuotoiluun taulukoita (tiukasti ottaen taulukoiden käyttö dokumenttien perusrakenteen luomiseen on taulukoiden väärinkäyttöä).

Taulukot vai kelluvat elementit?

Itse asiassa on mahdollista luoda dynaaminen perusrakeene jakamalla sisältö kelluviin jaksoihin. 640x480 ja 800x600 näytöillä sivuilla näkyisi vain yksi palsta, mutta 1024x768 tai suuremmilla näytöillä voisi olla kaksi tai useampi palsta (esimerkkisivu[S] - käytä niin leveää ikkunaa kuin pystyt).

Ideaa voi soveltaa navigaatiokehyksiin, joilla ei ole tarkkaa leveysarvoa. Jos ominaisuutta float käytetään elementin IFRAME kanssa, joka sisältää päänavigointilinkit.

CSS2 antaa mahdollisuuden asettaa lohkoelementtien korkeudelle ja leveydelle maksimi- ja miniarvot. Olen joskus käyttänyt kehyksiä, koska ne toteuttavat sama kuin max-width CSS-ominaisuuden. Kehyksillä on muutamia haittatekijöitä, joiden vuoksi en enää niitä käytä kuin poikkeustapauksissa.

Annan sinulle esimerkin, joka on tarkoitettu käytettäväksi sivulla, jonka BODY-elementin luokka on CssSite. Perus teksti on DIV-elementin sisällä:

body.CssSite div {max-width:500px; text-align:justify; font-family: Verdana, Arial, sans-serif; font-size: x-small; margin-left:auto; margin-right:auto; border:1px solid #660033; padding:10px;}

Sen jälkeen kuin perus layout on määritelty, sivujen tekijä määrittää kaksi sisäkkäistä lohkoa kuten alla olevassa esimerkissä ([M][S][Pw]):

body.CssSite div {max-width:500px; text-align:justify; font-family: Verdana, Arial, sans-serif; font-size: x-small; margin-left:auto; margin-right:auto; border:1px solid #660033;padding:10px;}
body.CssSite div div {border:1px solid #660033; margin:0 10px 0 0; float:left; width:70px; height:200px; clear:left;} /* tässä lohkossa, joka on edellisen lohkon sisällä on varattu paikka linkeille; seuraavat lohkot ovat yksinkertaisia kappaleiden kaltaisia lohkoja, sillä päälinkkejä ei ole mielekästä esittää kuin kerran */

Tällaiset lohkot olisivat monessa suhteessa parempia kuin taulukot, joilla on kiinteät leveysarvot. Kapeissakaan ikkunoissa ei tulisi vaakavierityksiä, mutta tekstin leveys olisi sivujen tekijän hallittavissa.

Selainkohtaisia huomautuksia:

  1. Ominaisuudet float ja clear on toteutettu huonosti Netscape 4.x -selaimissa. Jos useampi elementti on samalla riville selain pistää kaikki elementit samaan "pinoo". Käy lävitse W3C:n CSS1 test suite ominaisuuden float kohdalta.

    W3C: CSS1 Test Suite: 5.5.25 float[Pw].
  2. MS IE 4.x for Windows ei pysty panemaan suurta määrää kelluvia elementtejä usealle riville. Saattaa olla mielekkäämpää käyttä taulukoita, jos tarkoituksena ei ole luoda vapaasti skaalautuvaa tekstiä. Jos haluat joustavat leveysarvot käytä prosenttiarvoja.

  3. Jos perusrakenne perustuu kelluville elementeille jotkut selaimet laittavat satunnaisesti vaakavierityspalkin. Systeemi pelaa sangen hyvin ainakin Opera 4.x+, MS IE 5.5+ ja Mozilla Gecko Windows-selaimissa (todennäköisesti myös monissa Mac ja Linux -selaimissa).

  4. Jos normaalisti rivinsisäiselementteinä käyttäytyvät elementit määritellään kelluviksi ne tarvitsevat ainakin ominaisuuden width. Muutoin ne näyttävät totaalisen erilaisilta eri selaimissa.

  5. Kelluvien elementtien kokonaiskorkeus saattaa joissakin MS IE -selaimissa kasvattaa emoelementin korkeutta. Asia on korjattu ainakin MS IE 6.0 Windows -selaimessa.

  1. Joissakin selaimissa kelluvat elementit siirtyvät hieman alaspäin eivätkä mene suoraan joko vasemmalle tai oikealle. Kelluvat elementit eivät siten asemoidu kaikissa selaimissa aivan samalla lailla.

  2. Ominaisuus clear ei toimi oikein ainakaan MS IE 5.x Windows[S] ja Netscape 6.1 -selaimissa. MS IE 4.x Windows -selaimessa ominaisuus clear aiheuttaa ylimääräisiä rivikatkoj (myös ominaisuus float voi niitä satunnaisesti aiheuttaa).

  3. Netscape 4.x ja vanhemmat Netscape-selaimet eivät tue IFRAME elementtejä. Selaimille, jotka eivät tue IFRAME elementtiä tulisi olla vaihtoehtoiset linkit.

  4. Max-width toimii testieni mukaan vain Opera 4.x+, Mozilla Gecko, Konqueror (Linux) -selaimissa (erään kuvakaappauksen perusteella myös Safari-selaimessa (Mac) ).

  5. Koska MS IE ei tue display ominaisuutta (käsittelen sitä edempänä) XML-tasoiseti ainoa keino joustavien sivurakenteiden luomiseksi XML-dokumenteille on ominaisuuden float käyttö. On syytä muistuttaa, että DIV + float näyttää tyystin toisenlaisilta selaimissa, jotka eivät tue CSS:ää. Nopeasti lataantuvat taulukot[S] ovat tässä mielessä taaksepäin yhteensopivia, mutta ne toimivat MS IE:ssä vain (X)HTML-dokumenteille. Yleisesti ottaen toinen keino kehysten korvaamiseen on ominaisuuden position käyttö, mitä käsittelen seuraavaksi.

[Alku]