CSS/Raamide imitatsioonid
Raamide head ja vead
muudaVäga paljudel veebilehtedel on kasutuses raamid (ing. k. frames), mis kujutavad endast konteinereid, mille sees asub teine, pea täiesti iseseisev lehekülg. Raamidele saab anda nimed ning linkidele on võimalik määrata atribuudiga 'target' millises raamis viidatud lehekülg avatakse. Sellisel kombel on üsna lihtne konstrueerida lehekülgi, mis koosnevad muutumatust osast (logo, menüü jms) ning muutuvast osast, milleks on raam. Veebilooja elu muutub seeläbi lihtsamaks, sest ta peab looma vaid ühe faili, mis sisaldab menüüd, logo ja raami, ning siis võib ta teha lugematu hulga faile, mis on mõeldud avamiseks raami sees. Seeläbi pääseb lehe looja kas siis a) tüütust korduva koodi kopeerimisest või b) keerukast dünaamilise lehekülje programmeerimisest. Seepärast on raamide kasutamine väga populaarne.
Kuid raamid tekitavad ka üksjagu probleeme. Esiteks pole raamid toetatud kõigi brauserite poolt, õieti on nad praktiliselt kõigis tänapäeval kasutuses olevates brauserites toetatud, ent paljudel juhtudel muudavad raamid lehekülje raskesti kasutatavaks, et mitte öelda kasutamiskõlbmatuks. Näiteks raamidega lehe avamisel võib selline brauser küsida, kas soovid näha raami "sisu" või raami "menüü"? Halvemal juhul pakutakse valida raamide "parem" ja "vasak" või veel halvemal juhul "foo" ja "bar" vahel. Kui kasutaja valib "sisu", siis näeb ta lehel olevat teksti, aga ei tea midagi sellest, et kusagil teises raamis peaks olema hulk linke. Kui aga valitakse menüü, siis nähakse linkide loetelu, aga nägemata jääb esileht, kus võivad olla näiteks firma puhul päeva parimad pakkumised.
Teiseks ei armasta raamisid ka need kasutajad, kes vaatavad veebi läbi raamidega ilma probleemideta toime tulevate brauserite. Nende jaoks on ebamugav, et nad ei saa harjunud kombel kasutada brauseri kerimisriba vaid peavad kasutama raami(de) kerimisriba(sid). Paljuski on see juba maitse küsimus aga suuresti tingitud ka sellest, et raame kasutatakse tihtipeale seal, kuhu nad ei sobi.
Raamid CSS-ga, kas paremad raamid?
muudaCSS annab meile võimaluse luua väljanägemiselt raamide sarnase funktsionaalsusega objekte. Näiteks määratakse lehekülje sisuosale kindel kõrgus ning juhul kui tekst ületab määratud kõrguse tekitatakse servale kerimisriba:
div#sisu {
height: 400px;
overflow: auto;
}
Välimuselt saavutatakse sama efekt, mis raamide kasutamisel, aga lehekülg jääb kasutatavaks ka siis, kui brauser CSS-i ei toeta, sest siis kuvatakse lihtsalt kogu tekst tema täies pikkuses. Seega ei teki ühegi brauseriga lehekülje kasutamisel selliseid probleeme nagu raamide puhul.
Millal kasutada?
muudaPeamiselt tekib vajadus selliste "raamide" järele siis, kui meil on tarvis, et tekst jääks teatud kindlatesse raamidesse (loogiline, kas pole). Näiteks kui meie veebileht esitab koodinäiteid, mille puhul reeglina reamurdmist ei kasutata, siis soovime end ehk relvastada olukorra vastu, kus mõni üksik pikk koodirida venitab meie lehe inetult kümme korda laiemaks. Selleks puhuks pole vaja muud, kui määrata näiteks elemendile 'pre' maksimaalne laius ning sellest üleminekul nõuda horisontaalse kerimisriba tekkimist.
Ülevoolamine: overflow
muudaVäärtus: visible | hidden | scroll | auto | inherit
Parameeter overflow määrab, mis juhtub kasti sisuga, kui see on suurem kui kasti fikseeritud mõõtmed. Kasti sisu all peame reeglina silmas teksti, aga see võib olla ka näiteks pilt või mõni muu objekt. Kasti suuruse saame fikseerida parameetritega 'width' ja 'height'. Väärtustel on järgmine tähendus:
visible - tekst voolab üle kasti piirjoonte. See väärtus on kasutusel vaikimisi. NB! MS Internet Explorer tõlgendab seda väärtust valesti ning hoopis suurendab kasti proportsioone, et mahutada kogu sisu. Õnneks määrame harilikult fikseeritud suurusega kastidel overflow-le mõne muu väärtuse.
hidden - tekst, mis peaks üle servade voolama, peidetakse.
scroll - kastile lisatakse horisontaalne ja vertikaalne kerimisriba. Kui sisu ei mahu kasti ära, siis saab seda nähtavale tuua üles-alla/paremale-vasakule kerides.
auto - nagu 'scroll', aga horisontaalne ja/või vertikaalne kerimisriba paigutatakse vastavalt vajadusele.
