Layout med em-størrelser

Denne side er layout'et så godt som udelukkende med em-størrelser. Siden er ved normal skrifstørrelse næsten ikke til at skelne fra mine almindelige sider, som er lavet efter forsommeren 2006.

body font-size:100%; (plus en lillebitte smule – se teksten)

Hvis du øger eller mindsker tekststørrelsen med browserens tekststørrelsesværktøj vil du opleve, at websidens bredde øges eller mindskes. Alt indhold er nemlig omsluttet af et div#page-element, der har fået en bredde på 47 em. Derved fastholdes linielængden næstens ens, uanset hvilken skriftstørrelse, brugeren vælger.

47 em translaterer ved medium skriftstørrelse til en smule over 750 pixel.

Jeg er gået på akkord med højre og specielt venstre marginer på overskrifter. Det kan lade sig gøre at regne ud, hvor mange em'ers venstre margin til henholdsvis en h1, en h2 og en h3, der giver den samme vandrette afstand. Men jeg har altså valgt at bruge pixels til dette.

Et andet forbehold knytter sig til font-size. For at komme uden om IE's tendens til at gøre skriften meget for lille, hvis man vælger mindre skrift i browserens tekststørrelsesværktøj, er det afgørende at sætte en global størrelse på 100 procent (100%), således

body {font-size:100.01%;}

Den lidt aparte udformning med den lille brøk kan du læse om på websiden http://css-discuss.incutio.com/. Den klarer nogle problemer i visse versioner af Opera.

Senest opdateret: 11. august 2006