Bjørn Enki professional website design offers custom website design services internationally, with a focus on Los Angeles website design.

Please note: This page is a norwegian translation of the World Wide Web Consortium's page on "CSS tips & triks: figures & captions" (Cascading Style Sheets). This translation was written by Bjorn Enki, and may contain translation errors. For the original english version, please visit http://www.w3.org/Style/Examples/007/figures.

Vennligst bemerk: Dette er en norsk oversettelse av "CSS tips & triks: bilder & bildetekst" siden av the Word Wide Web Consortium. Denne oversettelsen er skrevet av Bjorn Enki, og inneholder muligens feiloversettinger. For den originale og oppdaterte versjonen (på engelsk), vennligst se http://www.w3.org/Style/Examples/007/figures.

Web Stilark
CSS tips & triks

(Denne siden bruker CSS stilark)

Tilleggelse av bildetekst

Skalering av bildet

Bildeteksten ovenfor

XHTML

Bilder & bildetekst

Eiffel tower

Skalert modell av Eiffeltårnet i Parc Mini-France

HTML har ingen element som tillater at man tillegger bildetekst. Det var foreslått en gang (se HTML3), men ble aldri en del av HTML4. Her er en måte å simulere slik en element:

<div class="bildet">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">
  <p>Skalert modell av Eiffeltårnet i Parc Mini-France
</div>

Så i stilarken bruker du klassen "bildet" til å formatere figuren som du vil. For eksempel, for å "float" (flyte) elementet til høyre, i et område som er 25% av bredden til omringede avsnitt, kan man bruke disse reglene:

div.bildet {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

Bare de første to deklarasjonene ("float" (flyt) og "width" (bredde)) er nødvendige, resten er bare til pynt.

Skalering av bildet

Det er et problem her, og det er at bildet kan bli for bredt. I dette tilfellet er bildet alltid 136 px bredt og DIV elementet er 25% av bredden til omringede tekst. Dersom du vil gjøre vinduet smalere kan det hende at bildet henger utenfor DIV elementet (prøv for deg selv!).

Dersom du vet bredden av alle bildene i dokumentet kan du tillegge "minimum-width" (minimum bredde) til DIV elementet slik:

DIV.bildet {
  min-width: 150px;
}

Enda en måte er å skalere selve bildet. Det er dette som vi gjort med bildet til høyre her. Som du kanskje kan se om du gjør vinduet veldig bredt, så skalerer ikke JPEG bilder særlig bra. Men om bildet er i et diagram eller i SVG format, fungerer faktisk skalering utmerket. Her er koden som vi brukte:

<div class="bildet">
  <p><img class="scaled" src="st-tropez.jpg"
    alt="St. Tropez">
  <p>Saint Tropez og fortet i aften solen

</div>

St. Tropez

Saint Tropez og fortet i aften solen

Og dette er stilarken:

div.bildet {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.bildet p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

Det eneste som har blitt tillegget her er den siste deklarasjonen: den gjør slik at bildet er så bredt som innsiden av DIV elementet (området inni grensen).

Bildeteksten ovenfor bildet

Cap Ferrat

Middelhavet i nærheten av Cap Ferrat

Du kan til og med ha bildeteksten ovenfor bildet bare med å fortelle nettleseren at figuren skal formateres som en "table" (tabell). Bare legg disse reglene til stilarken fra forrige avsnitt:

div.figure p {
  display: table-cell;
  width: 100%;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

'+' tegnet gjør det slik at regelen samsvarer et P element som følger et annet P element. I dette tilfellet betyr det at regelen samsvarer det andre P elementet til bildet, den som inneholder bildeteksten.

(Denne teknikken kan avsløre bugs i visse gamle nettlesere, spesielt når kombinert med skalering av bildet, slik som er gjort her.)

Bilder i XHTML

Det nåværende (Januar 2003) forslaget for XHTML2 har et CAPTION element, som kan brukes sammen med OBJECT. Dersom dette forslaget blir godtatt kommer man ikke lenger til å måtte bruke DIV og CLASS element, men, i XHTML2 kan man skrive:

<object data="eiffel.jpg">
  <caption>Skalert modell av 
  Eiffeltårnet i Parc 
  Mini-France</caption>
</object>

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 17 Jan 2001;
last updated $Date: 2009/04/04 16:23:10 $ GMT