Du kan justere avsnitt eller innhold i tabellceller i henhold til dine ønsker ved hjelp av følgende egenskaper. Disse egenskapene kan også brukes på alle andre elementer som har en definert eller beregnet høyde eller bredde.
Innrykk første linje
Først ut er egenskapen text-indent. Her kan du angi hvordan den første linjen i et avsnitt skal rykkes inn. Det er også mulig å "rykke ut" til venstre. For å oppnå dette, må en negativ verdi av text-indent brukes. (Detaljert informasjon om når en ekstrem utrykk kan være hensiktsmessig, følger etterpå). Det forventes en numerisk angivelse.
Et eksempel:
.avsnitt { text-indent: 2em; }
I nettleseren ser det slik ut:
Hvis du bruker en negativ verdi, vil det være en tekst utrykk i den første tekstlinjen.
.avsnitt {
text-indent: -2em;
}
Og her er selvfølgelig et blikk på resultatet i nettleseren:
Slik noe er også mulig. Vær imidlertid oppmerksom på når du definerer utrykk at innholdet fortsatt er leselig når det er hensiktsmessig. Faktisk kan text-indent også være interessant i forbindelse med søkemotoroptimalisering. Av og til vil man for eksempel heller vise grafikk i stedet for tekst.
Hvis teksten likevel skal være tilgjengelig for søkemotorer, står man overfor et dilemma. Dette dilemmaet kan løses ved å bruke text-indent. Fordi denne egenskapen gjør det mulig å flytte tekster kjent for deg. Dermed kan du altså skjule tekster fra synsfeltet til besøkende.
Fordelen med text-indent-alternativet: Teksten som skal erstattes med et bilde, er uendret til stede i kildekoden.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Ved denne syntaksen blir en bakgrunnsgrafikk tilordnet til h1-elementet. (Egenskapen background har allerede blitt presentert i denne serien). Med text-indent: -99999px blir teksten i overskriften flyttet 99999 piksler til venstre. Teksten er derfor ikke synlig lenger. Nå vises faktisk bare bildet.
Hvis du deaktiverer stylesheetet, vil teksten imidlertid være synlig igjen.
Definere linjehøyde
Jeg har allerede nevnt linjehøyden i sammenheng med den generelle egenskapen font. På dette tidspunktet vil jeg utdype dette temaet litt. Det er interessant å definere linjehøyden i forbindelse med skriftstørrelsen (font-size).
Du kan angi linjehøyden ved hjelp av egenskapen line-height. Numeriske verdier er tillatt. Prosentverdier er også mulig. Disse refererer da til skriftstørrelsen til elementet der linjehøyden ble angitt. Før du definerer linjehøyden, bør du også merke deg følgende: Det kan hende at en nettleser/enhet gir prioritet til angivelsen av linjehøyden og viser elementer avkortet hvis de er høyere. Dette kan være irriterende, spesielt med bilder. Test resultatene før du publiserer siden.
Følgende eksempel viser hvordan line-height kan brukes.
<p style="line-height:1.4em; font-size:1em;">Noen ganger har du opprettet en flott layout, men bildene mangler fortsatt, og hvis du bare bruker tomme rammer, ser layouten ganske naken ut. Det er bedre å gjøre det på denne måten:<br /> I denne videoopplæringen viser jeg dere de beste nettadressene for å raskt få gratis passende bildelinker. En genial liste finner du f.eks. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">her</a>.</p> <p style="line-height:2em;font-size:1em;">Noen ganger har du opprettet en flott layout, men bildene mangler fortsatt, og hvis du bare bruker tomme rammer, ser layouten ganske naken ut. Det er bedre å gjøre det på denne måten:<br /> I denne videoopplæringen viser jeg dere de beste nettadressene for å raskt få gratis passende bildelinker. En genial liste finner du f.eks. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">her</a>.</p> <p style="line-height:1em; font-size:1em;">Noen ganger har du opprettet en flott layout, men bildene mangler fortsatt, og hvis du bare bruker tomme rammer, ser layouten ganske naken ut. Det er bedre å gjøre det på denne måten:<br /> I denne videoopplæringen viser jeg dere de beste nettadressene for å raskt få gratis passende bildelinker. En genial liste finner du f.eks. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">her</a>.</p>
Her ble det definert tre tekstavsnitt med forskjellige linjehøyder tildelt hver av dem.
Som dere ser, kan lesbarheten av flytende tekst påvirkes sterkt av linjehøyden. Vær derfor forsiktig med line-height.
Til slutt melder spørsmålet seg selvfølgelig om hvilken linjehøyde man egentlig bør velge. Vanligvis regner man med linjehøyder mellom 130 og 150 prosent.
p {
line-height: 150%;
}
Til syvende og sist avhenger god lesbarhet imidlertid fremfor alt av ekskursen av skriften. Her gjelder: Linjehøyden bør være desto større jo lengre tekstlinjene går. Sjekk derfor absolutt siden slik at lesbarheten faktisk bevares.
Horisontal tekstjustering
Gjennom egenskapen text-align blir den horisontale justeringen av tekstavsnitt og annen flytende tekst eller inline-elementer som er inneholdt i blokk-elementer fastsatt. Følgende verdier kan settes for text-align:
• left – venstrejustering
• right – høyrejustering
• center – sentrert
• justify – justeret
Også her er et eksempel:
<!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>Og slik ser resultatet ut i nettleseren:
Merk at text-align gjelder ikke bare for tekstinnhold. Egenskapen gjelder faktisk for alle inline-elementer. Så hvis det blir plassert inn et bilde, gjelder text-align-definisjonen også for dette elementet.
En liten påminnelse: text-align skal ifølge den offisielle CSS-spesifikasjonen ikke påvirke blokk-elementer. (Selv om det faktisk er nettlesere som også bruker det på blokk-elementer). Hvis du vil justere blokk-elementer, bruk de allerede presenterte margin-egenskapene i slike tilfeller.
