Sisu
Esemete paigutamine veebilehele on selle üldise kujunduse jaoks oluline. Kuigi paigutuse mõjutamiseks on ka teisi viise, näiteks tabelite kasutamine (mida me ei soovita), on parim kasutada CSS-i.
Allpool vaatleme, kuidas kasutada CSS-i stiili lihtsat reaomadust piltide, tabelite, lõikude ja muu joondamiseks.
Neid samu meetodeid saab kasutada ka välistel stiililehtedel, kuid kuna need kehtivad üksikute üksuste kohta ja peavad tõenäoliselt selliseks jääma, on kõige parem kasutada joonisel põhinevat stiili, nagu allpool mainitud.
Joondage teksti lõigud
Lõike silt on esimene koht, kus oma veebilehe kujundamisel alustada. Siltide avamine ja sulgemine näeb välja selline:
Lõikes sisalduva teksti vaikeväärtus on lehe vasakpoolsel joondamisel, kuid saate joondada oma lõigud ka paremale ja keskele.
Ujuki omaduse abil saate joondada paragrahve paremale või vasakule põhielemendist. Kõik muud selle elemendi sees olevad elemendid voolavad ümber hõljuva elemendi.
Paragrahviga parima efekti saavutamiseks on parem seada paragrahvi laius väiksemaks kui konteineri (vanem) element.
Joondage tekst lõikude sees
Vaieldamatult on lõigu teksti kõige huvitavam joondamine "õigustada", mis käsib brauseril kuvada teksti sisuliselt nii akna paremale kui ka vasakule küljele joondatuna.
Lõikes oleva teksti õigustamiseks kasutaksite teksti joondamise omadust.
Samuti saate joondada kogu lõigu teksti paremale või vasakule (vaikimisi), kasutades teksti joondamise atribuuti.
Teksti joondamise omadus joondab teksti elemendi sees. Tehniliselt ei peaks see joondama lõigus sisalduvaid pilte või muid elemente, kuid enamus brausereid käsitlevad pilte selle atribuudina rivis.
Piltide joondamine
Pildisildil hõljuva omaduse abil saate määratleda piltide paigutuse lehel ja selle, kuidas tekst nende ümber kerib.
Nii nagu ülaltoodud lõigud, positsioneerib pildimärgendis sisalduv ujukstiili omadus teie pildi lehel ja õpetab brauserile, kuidas teksti ja muid elemente pildi ümber voolata.
Ülaltoodud pildimärgendile järgnev tekst voolab pildi ümber paremal, kui pilt kuvatakse ekraanist vasakul.
Kui soovin, et tekst ei lõpeks pildi ümber mähkimisega, kasutan selget omadust:
Enam kui lõigete joondamine
Mis aga juhtuks, kui soovite joondada enamat kui lihtsalt lõiku või pilti? Saate lihtsalt lisada stiiliomadused igasse lõiku, kuid seal on teie kasutatav silt, mis on tõhusam:
Ümbritsege lihtsalt tekst ja pildid (sh HTML-sildid) sildi ja stiili atribuudiga (hõljumine või teksti järgi joondamine) ja kõik selles jaotuses olevad joondatakse vastavalt teie soovile.
Pidage meeles, et lõigudele või jagunemise piltidele lisatud joondused austatakse, kui sildil on tähtsust.
