Paigutusvõimalused CSS abil

Autor: Margo Munner | Kuupäev: 12.10.2007 | Kommentaarid (1)

Antud juhend tutvustab mitmeid erinevaid võimalusi www-lehe paigutuse ehk küljenduse loomiseks CSS abil.

See juhend on rohkem näidiskoodide kogum. See ei kajasta kindlasti mitte kõiki võimalikke CSS abil lehe ülesehitamise võimalusi, kuid loodetavasti võimaldab leida ideid väga erinevate XHTML dokumentide koostamisel. Nii mõnedki näited on suuresti kopeeritud, sellistel juhtudel on juures ka link allikale.

Näidiste kasutamiseks tuleb esmalt viibida näidise lehel ning seejärel vaadata lehe XHTML koodi. Mozilla Firefox võrgulehitseja puhul klahvikombinatsioon CTRL+U, Internet Exploreri puhul menüüvalik View -> Source, Opera puhul klahvikombinatsioon CTRL+F3.

Kaks või kolm tulpa ühtse taustavärviga

Tihtipeale on vaja efekti, kus kahe või kolme tulbaga www-lehel ulatuks tulpade taustavärv ühtlaselt kuni dokumendi lõpuni välja.

Näide kahe tulbaga

Näide kolme tulbaga

Allikas

Mitu tulpa, kuid ei ole vaja neid eristada

Meetodi põhiline idee seisneb selles, et teeme ühe "konteinerploki", mille sees on üksteise järel reas just niipalju tulpasid, kui vaja on.

Näide kolme tulbaga

Mitu tulpa, eristame vahejoonega

Kasutama peaaegu sama trikki, kuid eristame tulbad, kasutades konteineri taustapilti. Miks nii? Sest kui kasutame border seeria CSS atribuute, ei joonistu äärejooned ebaühtlase sisuga tulpadel kuni lehe lõpuni.

Näide kolme tulbaga

Kommentaarid, arvamused, küsimused

Postitaja nimi:

Kommentaari pealkiri:

Kommentaari sisu:

Kontrollküsimus (loe selgitust kõrvalt)!

Vasta küsimusele: Mis värvi on taevas siis, kui seal ühtegi pilve ei ole?

Teadmiseks kommenteerijale!

Edukaks postitamiseks tuleb täita kõik väljad. Maksimaalne sisuosa pikkus on 10'000 tähemärki, teistel väljadel 200 tähemärki!

Kommentaari sisuosas saab kasutada HTML koodi, kuid seda mitte tekstitöötluseks, vaid näitliku materjali sisestamiseks. Kõik, mis asub <nende märkide vahel> kuvatakse kommentaarilehel nähtava tekstina ning märgid ise tõlgitakse erimärkideks!

Kontrollküsimus on mõeldud kuritahtlike robotite takistamiseks. Palun vasta esitatud küsimusele eesti keeles läbivalt väikeste tähtedega, nimetavas käändes ning võimalikult konkreetselt!

NB! RSS-lugemistarkvara abil kommentaare postitada ei saa!

© Margo Munner | Sisukaart