Alineje ali vsebine v celicah tabele lahko poravnate po svojih željah s pomočjo naslednjih lastnosti. Te lastnosti se lahko uporabljajo tudi na vseh drugih elementih, katerim je dodeljena določena ali izračunana višina ali širina.
Zamik prve vrstice
Začnimo s lastnostjo text-indent. S tem določite, kako naj bo zamaknjena prva vrstica odstavka. Možen je tudi "izpik". Za to je treba uporabiti negativno vrednost text-indent. (Podrobne informacije o tem, kdaj je "izpik" smiseln, bodo navedene). Pričakovana je številčna vrednost.
Primer:
.odstavek { text-indent: 2em; }
V brskalniku izgleda tako:
Če uporabite negativno vrednost, se besedilo izmakne v prvi vrstici besedila.
.odstavek {
text-indent: -2em;
}
In seveda tudi tukaj pogled na rezultat v brskalniku:
Možno je tudi takšno oblikovanje. Pri določanju izpikov pa pazite, da so vsebine še vedno berljive, ko je to želeno. Dejansko pa se lahko lastnost text-indent uporabi tudi v povezavi s optimizacijo za iskalnike. Včasih je bolje prikazati slike namesto besedila.
Vendar, če želite, da je besedilo še vedno dostopno za iskalnike, se znajdete v dilemi. To dilemo je mogoče rešiti z uporabo lastnosti text-indent. Ker vam ta lastnost omogoča, da premikate besedila. Tako lahko besedila popolnoma izginejo iz vidnega polja obiskovalcev.
Prednost različice text-indent: Besedilo, ki naj bo zamenjano s sliko, ostaja nespremenjeno v izvorni kodi.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
S to sintakso se h1 elementu presodi ozadje. (Lastnost background je bila v tej seriji že predstavljena). Z text-indent: -99999px se besedilo naslova premakne za 99999 slikovnih pik v levo. Besedila torej ni več vidno. Prikazano je samo slika.
Ko onemogočite slogovni zapis, je besedilo spet vidno.
Nastavitev višine vrstice
O višini vrstice sem že nekoč omenil v povezavi z splošno lastnostjo font. Tokrat gre nekoliko bolj podrobno za to temo. Zanimivo je določanje višine vrstice v povezavi s velikostjo pisave (font-size).
Višino vrstice lahko določite prek lastnosti line-height. Dovoljene so številčne vrednosti. Možni so tudi odstotkovni vrednosti. Te se nanašajo na velikost pisave elementa, za katerega je določena višina vrstice. Pred določitvijo višine vrstice bodite pozorni na naslednje: Lahko se zgodi, da brskalnik/naprava dodeli prednost višini vrstice pred drugimi lastnostmi in elemente prikaže odrezane, če so višje. To je lahko nadležno predvsem pri grafikah. Zato preizkusite rezultate, preden objavite stran.
Sledi primer, kako uporabiti line-height.
<p style="line-height:1.4em; font-size:1em;">Včasih ustvarite odlično postavitev, vendar še manjkajo fotografije, in če uporabljate samo prazne okvirje, bo postavitev precej prazna. Obstaja boljši način:<br /> V tem videu vas bom naučil najboljše spletne naslove, kje najti hitro brezplačne ujemajoče se prostora za slike. Genialen seznam najdete na primer <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">tukaj</a>.</p> <p style="line-height:2em; font-size:1em;">Včasih ustvarite odlično postavitev, vendar še manjkajo fotografije, in če uporabljate samo prazne okvirje, bo postavitev precej prazna. Obstaja boljši način:<br /> V tem videu vas bom naučil najboljše spletne naslove, kje najti hitro brezplačne ujemajoče se prostora za slike. Genialen seznam najdete na primer <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">tukaj</a>.</p> <p style="line-height:1em; font-size:1em;">Včasih ustvarite odlično postavitev, vendar še manjkajo fotografije, in če uporabljate samo prazne okvirje, bo postavitev precej prazna. Obstaja boljši način:<br /> V tem videu vas bom naučil najboljše spletne naslove, kje najti hitro brezplačne ujemajoče se prostora za slike. Genialen seznam najdete na primer <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">tukaj</a>.</p>
Tukaj so definirani trije odstavki besedila, ki imajo vsak dodeljeno drugo višino vrstice.
Kot vidite, lahko z višino vrstice močno vplivate na berljivost tekočega besedila. Zato ravnajte previdno s line-height.
Končno seveda ostaja vprašanje, kakšno višino vrstice bi bilo treba izbrati. Običajno se izhaja iz višin vrstic med 130 in 150 odstotki.
p {
line-height: 150%;
}
V končni fazi pa dobra berljivost pretežno zavisi od širine pisave. Velja torej: Višina vrstice naj bo tem večja, daljše so besedilne vrstice. Zato nujno preizkusite stran in preverite, ali je berljivost res zagotovljena.
Vodoravna poravnava besedila
Z lastnostjo text-align se določi vodoravna poravnava odstavkov besedila in drugih vsebovanih tekočih besedil ali inline-elementov v bločnih elementih. Za text-align se lahko določijo naslednje vrednosti:
• left – poravnava levo
• right – poravnava desno
• center – sredinsko
• justify – poravnava ob robovih
Tu je še en primer:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<h2>PSD-Tutorials.de</h2>
<h3>PSD-Tutorials.de</h3>
</body>
</html>In takšen je rezultat v brskalniku:
Opazite, da se text-align nanaša ne le na tekstualne vsebine. Dejansko velja za vse inline elemente. Če je torej vstavljena slika, velja tudi za ta element definicija text-align.
Še en namig: text-align se po uradni CSS specifikaciji ne sme nanašati na bločne elemente. (Čeprav obstajajo brskalniki, ki ga uporabljajo tudi za bločne elemente). Če želite poravnati bločne elemente, v teh primerih uporabite že predstavljene lastnosti margin.
