Block levels

rodsethol — Fri, 15 May 2009 21:13:30 +0000

Block-levels bokses: som en paragraf
Line boxes: linje med tekst
Inline-boxes: ord inne i en linje

Same hight on all columns

rodsethol — Fri, 15 May 2009 20:40:26 +0000

Bruk bakgrunnsgrafikk!

Følgende legges i
background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;. 50% fra venstre side av browservinduet (som resulterer i sentrert bilde) og 0 pixler fra toppen.

http://www.alistapart.com/articles/fauxcolumns/

Syntax

rodsethol — Fri, 15 May 2009 20:19:20 +0000

The CSS Box Model

rodsethol — Fri, 15 May 2009 19:50:01 +0000

Total width = left margin + left border + left padding + width +
right padding + right border + right margin

Total height = top margin + top border + top padding + height +
bottom padding + bottom border + bottom margin

W3C
CSS “tegner” dokumentet som et hierarki av bokser når en side lastes på skjerm eller for print.
Disse boksene inneholder ord, linjer, paragrafer, tabeller med properties som size, color eller font.

Hver boks har et “content area”.
“Content edge” omslutter “content area”.
“Padding area” omslutter “content area”.
“Padding edge” omslutter “padding area”.
“Border area” omslutter “padding edge”.
“Border area” omslutter “padding edge”.
“Border edge” omslutter “border area”.
“Margin area” omslutter “border edge”.
“Margin edge” omslutter “margin area”.

NB: MARGIN (til forskjell fra padding & border) kan ha negativ verdi!

Mine bilder

Block levels

Same hight on all columns

Syntax

The CSS Box Model

Floating and clearing

z-index

The Viewport, the Page Box, and the Canvas

Containing block

Positioning

Accessibility Heading