Et stort kort på en lille plads

Afstanden mellem mærkerne på målestokken er ca. 100 kilometer.

 

Jeg blev inspireret til denne øvelse ved at skimme en ældre artikel om, hvordan jeg kunne gøre det her med frames. Det må kunne lade sig gøre med CSS, tænkte jeg. Og som sagt så gjort.

På den anden side: Kortet her fylder i sin helhed 1463 x 792 bytes. Gemt som en JPG-fil med en kompressionsgrad på 50 procent – hvad det godt kan bære – er jeg nede på ca. 315 kilobyte for billede. Ikke helt uoverkommeligt, hvis det er nyttigt nok for læseren.

Men teknikken er eminent egnet til præsentation af store datamængder i tabeller, som du f.eks. ser det i et regneark.

Hele baduljen er lavet via stylesheet'et. "Hemmeligheden" l igger i brugen af clip-egenskaben, der kan bestemme, hvor meget af det store billede, der skal vises, samt i overflow-egenskaben, der bestemmer hvordan skjult indhold skal repræsenteres.

clip-egenskaben har jeg skrevet om tidligere (Clip-egenskaben), men overflow har jeg ikke skrevet noget om. Derfor får du nøgne facts her:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam bibendum tempor nulla. Sed commodo. Aliquam feugiat lorem nec sem. Nullam consequat tristique libero. Suspendisse id erat.

overflow-egenskaben bestemmer, hvad der skal ske med indholdet i et element, dersom dette indhold ikke kan rummes inden for elementets areal. Arealets størrelse er bestemt ved width og height, eller af clip-egenskabens værdier.
Egenskaben kan have følgende værdier:
visible, hidden, scroll, auto og inherit
Værdien visible, som er standardværdien, gør det overskydende indhold synligt. Internet Explorer udvider CSS-boksens størrelse, jf. testboksen her til højre, mens en standardkompatibel browser fastholder boksens mål, og viser det overskydende indhold oven på de efterfølgende elementer.
Værdien hidden skjuler det overskydende indhold.
Værien scroll laver rulleskakt på begge ledder. Værdien auto laver en rulleskakt på den led, hvor der er for meget indhold. Tekstlinier indretter sig jo normalt efter elementets bredde, og overskydende indhold viser sig derfor som ekstra linier, hvis de er synlige. Derfor vil værdien auto som regel kun lave en lodret rulleskakt.
Værdien inherit betyder at elementet arver det overordnede elements overflow-egenskab.

Denne side er senest opdateret: 26. December, 2006