Demoer / Tests

Her er en samling af små testsider, ofte i en noget "rå" udførelse...

Edit: marts 2016
Skulle nogen falde over disse sider, skal det bemærkes at de blev lavet i 2006, og udgør nu et kuriosum...
Det meste af det virker selvfølgelig stadigvæk.

Divless!

Table- og div-frit layout...

At tale om "div-baseret layout" er lidt af en nonsense! Meningen med anvendelse af CSS sammen med HTML er netop at adskille præsentation fra dokumentstruktur. DIV-elementet er ikke blevet opfundet som erstaning for tabeller eller frames, men som en måde at lave sektioner i et dokument, således at dette kan struktureres på en meningsfuld måde, men uden forudsætninger for hvordan det bliver præsenteret. Det er CSS som skal tildele de forkellige HTML-elementer en visuel (eller auditiv, eller taktil,...) "udformning" som kan understøtte denne struktur, og ikke omvendt!
Man opnår således også at dokumentet bliver platform-uafhængig og kan udover PC'en tilpasses forskellige medier: mobiltelefon, PDA, skærmlæser, brailleudstyr…).
Mange er blevet fodret med denne tro, at de skal plastre deres HTML med en masse div'er for at opnå et visuelt layout… når man i de fleste tilfælde kan nøges med at style de øvrige elementer som danner dokumentet og som jo alligevel er til stede!
Et klassisk eksempel: <div id="menu"><ul>...</ul></div> bruges flittigt, når det oftest ville være tilstrækkelig at skrive <ul id="menu">...</ul>.
Anvendelsen af præsentationelle div'er (og span) gi'r ikke bedre men bare anderledes kode end tabeller elle frames.
HTML bliver på sigt erstattet af XML og det er vigtigt at opfatte det som en måde at strukturere information på, frem for en smart metode til at lave on-line brochurer!

Lider du også af divitis? Denne lille DIVless demo gi'r bare et bud på nogle muligheder...

DivMania!

Det stik modsatte af ovenstående! En side som er bygget op udelukkende v.h.a ikke-semantiske <div> og <span> elementer...
Opbygningen er inspireret af min XHTML 2.0 testside længere nede, men hvor der er fx. brugt <div class="section"> i stedet for <section> og <span class="line"> i stedet for <l> for at eksperimentere med strukturen. En slags microformat...

Valid XHTML 4.01!

Ugyldig syntaks som validerer... (<br /> og <img /> i HTML 4.01)

Beskæring af billeder

Forsøg med clip: , overflow: og padding: egenskaber. 

  ren XML...

Style switcher (PHP)

Skift stylesheet i alle browsere...

PHP style switcher, efter artiklen på http://www.sitepoint.com/article/css-simple-style-switcher.
Når det er muligt, bliver brugerens preference gemt i en cookie.

Kodefarvning

Når præsentationsopmærkning gi'r mening…
Nogle forsøg med gengivelse af kodefarvning (syntax highlighting) i HTML dokumenter, med og uden CSS.

Top