Torgny > CSSuppgifter

Worrynet steg för steg

Detta exemplet visar hur man kan arbeta med progressive enhancement, dvs utgå från semantisk uppmärkning och därefter arbeta vidare enligt webbstandards.

Bygger på en text av Andy Clarke i boken Web Standards Creativity.

Färdig sida

0: Semantisk markup

All text och betydelsebärande bilder inlagda. Semantiska taggar: h1, p etc.

1: Div-struktur

Struktur med divtagar - endast dummyinnehåll.

2: 0 och 1 kombinerat

3: Default styles

Nollställande av alla marginaler och andra åtgärder för att göra webbläsarna lika. Även en del standardformat, t ex font.

4: Bakgrund och färg i body&html. Body satt till relative.

5: Div-tagen container får stil

6: Resterande div-tagar i containern får färg och bakgrund

7: Kolumnerna skapas

8: Pharks knep i kolumnhuvudena

Sibling combinator (+), Pharks knep (förskjuten text), trick med vit text. Bakgrundsbilder.

9: Flytande lista i nedre menyn

10: Foten

Flyttad länk med bild och Pharks knep. Obs substring matching attribute selector (ej IE7)

11: Menyraden

Substring selector - fler varianter, absolut positionering, bakgrundsbild med Pharks knep.

12: Loggan (Branding)

Mer Pharks

13: Smiley

Använder toppmenyn som egentligen är till för mobiltelefoner o a små skärmar.

Januari 2009

Torgny