Jørgen Farum Jensens

Webdesign sandkasse

Sandkassen er den del af mit websted, hvor jeg laver eksperimenter af mange forskellige slags, uden at eksperimenterne i sig selv nødvendigvis skal føre til noget.

Det er også her, der ligger løsninger på nogle af de problemer, jeg bliver stillet overfor af mine "kunder", det vil sige de mange mennesker, der læser mine bøger og/eller mine nyhedsbreve, eller som bruger mit websted.

Denne side er et resumé af de omstændigheder, der har ført til eksperimenterne. Links til de enkelte eksempelsider i menuen til højre. De seneste eksperimenter er stort set dem, der er nævnt først.

True grid CSS layout

Et “True Grid” er et sidelayout, hvor indholdet er ordnet i tabelform, det vil sige med rækker af kasser, hvis højde er ens uanset hvilken en af kasserne i rækken der har det meste indhold.

Det er ganske let at lave med HTML tabeller. Men også i dette tilfælde er det en fejlagtig anvendelse af table-markøren.

Men dette layout er ganske let at lave med CSS table layout formregler, se mit eksempel: True grid CSS layout. (April 2010)

Baggrund til hele siden

I Usenet nyhedsgrupperne om webdesign og HTML/CSS er der af og til nogen der spø'r om man ikke kan lave et baggrundsbillede, der fylder hele browservinduet.

Det korte svar er, at det kan man ikke.

Men som denne side illustrerer er det forholdsvis nemt at få et billede, der er indsat i HTML-koden, til at fylde hele baggrunden. (Juni 2009).

Annonce- og billedrotatorer

Nogle læsere har forespurgt på dette emne, det vil sige vise en serie forskellige billeder som et banner eller simpelthen autovisning af en serie billeder. Jeg har skrevet om det tidligere i mine artikler om JavaScript rollovers, om JavaScript slideshows og om moderne JavaScript gallerier. Her er imidlertid nogle meget simple eksempler:
Banner rotator
Visning af et tilfældigt billede. (September 2008).

Image Replacement

En teknik, der gør det muligt at have de flotteste grafiske sidehoveder uden at sætte tilgængeligheden overstyr.
Image Replacement (Juni 2006)

Ændre på stakkeorden

Du har en stak på fire spillekort, og ønsker at trække et vilkårligt kort ud og placere dette kort i toppen af stakken.

Det er en typisk dynamisk HTML opgave. Jeg lavede eksemplet efter en forespørgsel i Usenet nyhedsgruppen om clientside scripting:
Ændre på stakkeorden

Rollover opdatering

Mit yndlingsscript til grafiske rollovers virker ikke ordentligt i Firefox, så jeg har opdateret det:
Grafisk rollover med ringe båndbredde.
Jeg har også lavet en ny version, der muliggør clipping på et vilkårligt område af en grafik:
Highlighting af hotspots.
Endelig har jeg lavet en version af den egentlige rollover udelukkende med CSS:
Grafisk rollover kun med CSS.

Runde hjørner uden grafik

En teknik til at lave runde hjørner uden brug af grafiske elementer. I stedet bruges noget JavaScript.
Runde hjørner uden grafik (Maj 2005).

Float marginer i IE

Jeg har fundet en ny og mere elegant løsning på problemet med, at IE/Win fordobler venstre margin på venstre-float'ede elementer og højre margin på højre-float'ede elementer.
Float margin.

Opacitetsfilter

En læser har været så venlig at gøre mig opmærksom på, at Firefox browseren tolker CSS3-egenskaben opacity. Så nu kan vi oprette gennemskinnelige objekter, der faktisk er gennemskinnelige i begge de to browsere, der nu dominerer markedet, Internet Explorer og Firefox. Jeg fortæller om det i min sandkasse:
CSS-egenskaben opacity.

Sidenummermenu

Et antal websider, der tilsammen udgør en længere artikel, hvis sider skal læses sekventielt – det vil sige først side 1, så side 2, dernæst side 3 osv. – forsynes ofte med en sidenummermenu.
Sidenummermenu

position:fixed fix

Vis en menu, er er fikseret i browservinduet til folk med ordentlige browsere og en absolut positioneret menu til dem, der kan nøjes med Internet Explorer:
position:fixed fix.

Fleksible billedstørrelser

Det har luret i baghovedet et stykke tid, men i dag fik jeg lyst til at prøve, om man kan lave elastiske billeder. Det er implicit i W3C's standarder, og jeg har også en gang set det beskrevet på W3C's hjemmeside. Men det er jo langt fra sikkert, at man kan gøre det praksis. Denne lille demoside viser hvordan:
Fleksible billedstørrelser.

Stort billede på lille areal

En ældre artikel på vej i papirkurven inspirerede mig til at lave med CSS det samme som artiklen fortalte, at man skulle lave med frames. Ideen er at vise et lille udsnit af et kort, og give brugeren mulighed for at bevæge sig rundt på kortet ved hjælp af rulleskakter. Her er resultatet af en times indsats.
Stort billede på lille areal.

Obs! at billedets tyngde er over 300 kilobyte, så det ta'r noget tid at overføre det. Skulle jeg bruge det for alvor, ville jeg nok lave en cover page med en load statusbjælke.

Grafiske rollovers med CSS

Jeg har kredset om emnet i nogen tid, men fik for nylig anledning til at demonstrere, hvordan jeg mener, det skal gøres. To eksempelsider,

  1. en lidt klodset vandret menu og
  2. et lidt mindre klodset lodret menupanel

CSS logo

Denne lille øvelse blev jeg inspireret til en dag, jeg nød en chokokolademælk. Den lille etiketfigur på den brune Mathilde chokolademælk fik mig til at tænke på min datters website, som ikke har et logo. Så lavede jeg denne figur, da jeg kom hjem: Logo-eksperiment.

Idéen er ikke taget i brug. Jeg ikke tilfreds med kerningen af bogstaverne, der ikke alene ikke er god nok, men også er forskellig mellem de forskellige størrelser.

Idéen kan afpudses ved at sysle lidt med letter-spacing på de enkelte bogstaver.

Denne side er senest opdateret: 2. September, 2006