Forsiden » CSS »

Formtekst

Formtekst kalder man i den typografiske verden tekst, der ikke har lige, lodrette marginer, men føjer sig efter en illustration, eller måske simpelthen er formet for at opnå en effekt. Denne artikel beskriver, hvorledes du laver formtekst på en webside.

I princippet skulle det sagetns kunne lade sig gøre at lave den skrå venstre kant på denne tekst ved hjælp af en serie tomme div'er, der floates left og gives forskellige bredder. Princippet er illustreret i den lille figur til højre.

Desværre holder det ikke. I hvert fald Internet Explore viser en ujævn kant.

Derfor genopliver vi den usynlige pixel, der ellers er sat på pension efter at have arbejdet hårdt i mange år på at holde tabelceller til mål.

Den skrå kan laves nu ved at stable et par snese img-markører oven på hinanden efter følgende opskrift:

<img src="[sti]fyld.gif" alt="" 
width=""25" height="7" class="skraa" />

Grafikken fyld.gif er et gif-billede på 1 x 1 pixel, der er gjort transparent. Den plads, et sådant billede optager på websiden, er bestemt af den bredde og højde (width og height) vi giver img-markøren. På den måde kan vi nedtrappe bredden af billederne ved simpelthen at give hvert billede end lidt mindre bredde end det foregående.

Stablingen opnås ved hjælp af stylesheet'et for den class, vi har givet alle billederne:

img.skraa {
float: left; clear: left; margin: 0 1em 0 0; border: none;
}

Eksmeplet her på siden er lidt banalt i forhold til de noget mere fantasifulde kreationer, du kan se på nettet, bl.a. på Eric Meyers hjemmeside, eller i hans seneste bog: "Eric Meyer on CSS". Det vigtige er her at forstå teknikken.

Opdateret 17. december 2003.

CSS eksempler:

Herkomst

Denne artikel er baseret på nogle eksperimenter, Eric Meyer beskriver på sin hjemmeside.

Søg på websiderne

Indtast søgeord

Abonner på mit nyhedsbrev

Indtast din e-mail adresse

Anbefal siden til en ven

Indtast e-mail adresse

Valid XHTML 1.0!

Eksempelfigur