Bildetekster med CSS

Det er sjelden jeg leser oppslagstavla mi fra nettet; jeg vet jo hva som står der, liksom. Men for en tid siden fikk jeg småsjokk. I en undermeny så jeg en side "Bildetekster" jeg ikke kjente igjen. WTF?

Siden var komplett kaos. Bilder manglet, elementer kastet hulter til bulter. Hva i huleste ... jeg tenkte meg om. Forklaringen dukket opp litt etter litt.

Opprinnelig var tavla ment til bruk for gjentatte spørsmål i en rekke webmasterfora jeg deltok i. I stedet for å svare i hver bidige tråd, skrev jeg en liten artikkel og hang den opp på tavla. Med årene døde disse nettfora ut, og tavla ble liggende brakk. Etterhvert fikk den nytt formål, men jeg har tydeligvis ikke vært nøye nok med opprenskingen.

Jeg husker jeg begynte på en sak om bildetekster, men ikke når, sannsynligvis 2011, og jeg trodde jeg hadde fullført den. Det hadde jeg tydeligvis ikke, men kommentert den vekk. Jeg må på ett eller annet tidspunkt ha lastet opp menyen uten kommentartegn  for denne uferdige siden uten å legge merke til det. Herre; dette røret må ha ligget ute i mange år ...

Min første innskytelse var å røske ned hele skiten. Men så begynte jeg å tenke: det *er* noen som fremdeles gjør ting på nett uten å bruke CMS og templates. Slike har gjerne heller ikke mulighet for bildetekst rett ut av boksen. Følgelig gjorde jeg det ferdig. Over 15 år etter at jeg startet. Velbekomme.

Og for de som absolutt må bruke javascript til alt mulig: klikk HER ...

Tradisjonell bildetekst

Bildetekster ligger tradisjonelt under bildet, med mindre skrift enn artikkelen og gjerne med byline. På et nettsted løses dette best ved å sette bildet inn i en blokk med samme bredde som bildet, og sette høyden til "auto". Deretter legges bildeteksten inn i en underblokk med samme bredde.
Dersom man gir bildet en klasse og setter img.foo {width:*px; max-width:100%; height:auto}, vil bildet og bildeteksten skalere sammen med siden.

BERTE I BLÅTT
Tegning: Bernt Bjørge
Fettstift på syrefritt papir

<div class="pict0">
<img src="foo.jpg" alt="img">
  <div class="caption0">
<p class="txt1">BERTE I BLÅTT<br>
Tegning: Bernt Bjørge<br>
Fettstift på syrefritt papir</p>
  </div>
</div>

	---

.pict0
  {
  width:300px;
  height:auto;
  position:relative;
  border:2px solid #000000;
  float:left
  }
.caption0
  {
  width:300px;
  height:auto;
  background:#ffffff;
  }
p.txt1
  {
  font-family:sans serif;
  font-size:0.7em;
  font-weight:bold;
  color:#333399

Innfelt bildetekst med transparent bakgrunn

Bildeteksten kan felles inn i selve bildet, og framheves med en bakgrunn:

BERTE I BLÅTT
Tegning: Bernt Bjørge
Fettstift på syrefritt papir

<div class="pict">
<img src="foo.jpg" alt="img">
  <div class="caption1">
<p class="txt1">BERTE I BLÅTT<br>
Tegning: Bernt Bjørge<br>
Fettstift på syrefritt papir</p>
  </div>
</div>

	---

.pict0
  {
  width:auto;
  height:auto;
  background:transparent;
  position:relative;
  border:2px solid #000;
  float:right
  }
.caption1
  {
  width:100%;
  height:auto;
  background:#ffffff;
  opacity:0.5;
  position:absolute;
  top:0;
  left:0;
  z-index:10
  }
p.txt1
  {
  font-family:sans serif;
  font-size:0.7em;
  font-weight:bold;
  color:#333399

Bildetekst i bunnen med farget bakgrunn

BLUPPE I BLÅTT
Tegning: Bernt Bjørge
Fettstift på syrefritt papir

<div class="pict">
<img src="foo.jpg" alt="croquis" />
  <div class="caption2">
<p class="txt1">BLUPPE I BLÅTT<br>
Tegning: Bernt Bjørge<br>
Fettstift på syrefritt papir</p>
  </div>
</div>

	---

.caption2
  {
  width:300px;
  height:auto;
  background:#ffff00;
  opacity:0.4;
  position:absolute;
  bottom:0;
  left:0;
  z-index:1
  }

Fadet PNG-bilde som overlay

Her er brukt et transparent "bilde" lagt mellom selve bildet og den innfelte bildeteksten. "Bildet" er 1px bredt, har samme høyde som tekstblokka og går fra sort til transparent som repeterende *bakgrunn* i blokka.

BLUPPE I BLÅTT
Tegning: Bernt Bjørge | Fettstift på syrefritt papir

<div class="pict">
<img src="foo.jpg" alt="">
  <div class="caption2atop">
  </div>
  <div class="caption2a">
<p class="txt2">BLUPPE I BLÅTT<br>
Tegning: Bernt Bjørge<br>
Fettstift på syrefritt papir</p>
  </div>
</div>

	---

.caption2a
{
width:300px;
height:auto;
background:transparent;
position:absolute;
bottom:0;
left:0;
z-index:20
}
.caption2atop
{
width:300px;
height:50px;
background:transparent
   url(foo.png)
   repeat-x;
position:absolute;
bottom:0;
left:0;
z-index:10
}
p.txt2
{
font-family:sans serif;
font-size:0.7em;
font-weight:bold;
color:#ffffff

FØR og NÅ

Dette ovenfor tilhører egentlig CSS2. CSS3 ble rullet ut i 2011 - samme år som jeg snekret disse eksemplene og altså fikk lastet det opp ved et uhell - og innførte elementene <figure> og <figcaption>, som kombinerer bilde og tekst i én operasjon. Når nettleserne etterhvert implementerte den nye versjonen fullt ut, har selvfølgelig dette blitt brukt i større og større grad.

Men hvis man vil ha bildeteksten innfelt, må man like forbasket ty til absolutt posisjonering. Da kan man faktisk like gjerne bruke gamlemetoden, og det MÅ man gjøre med et nettsted som har eldre HTML eller XHTML som reisverk, om man vil unngå møkkajobben med å kode om hele siten ...

Nåvel: her er et "moderne" eksempel MED innfelt bildetekst. Fjerner man figcaption fra (NB!)stilarket, vil hele smala dette pent og pyntelig ned under bildet, og bli som tradisjonell bildetekst.

BLUPPE I BLÅTT
Tegning: Bernt Bjørge
Fettstift på syrefritt papir

<div class="section">
<figure>
<img class="cap" src="../gfx/foo.jpg" alt="">
<figcaption><p>BLUPPE I BLÅTT<br>
Tegning: Bernt Bjørge<br>
Fettstift på syrefritt papir</p></figcaption>
</figure>

  ---

figure
  {
  float:right;
  width:auto;
  text-align:left;
  font-size:0.7em;
  font-weight:bold;
  border:2px black solid;
  margin:0;
  padding:0;
  position:relative
  }
figcaption
  {
  position:absolute;
  bottom:0;
  z-index:2
  }

BERNT BJØRGE er en tidligere skogsarbeider fra Skoger, nå pensjonert og bosatt i Nykirke, Vestfold. I sin fritid har han i årevis byttet sag med mer følsom redskap. Siden han er omtrent like glad i utstilling som flatehogst, har resultatene vært reservert indre krets - men jeg har sneket meg til et par *snapp*, det får stå til ...

Kommentar

ROFL! Å nei, du slipper ikke til her. Khawaga kommenterer aldri noen steder, og tillater heller ikke slikt selv. Men han er ikke *helt* anus: dersom du har noe meningsfylt å bidra med, send mail ved å trykke på knappen. Det er slett ikke umulig at det kommer med som tillegg.

juli 2018/feb 2025 vignettbilde