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, og jeg trodde jeg hadde fullført den. Det hadde jeg tydeligvis ikke. 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 10 å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 breddesom bildet, og sette høyden til "auto". Deretter legges bildeteksten inn i en underblokk med samme bredde.
BERTE I BLÅTT
Tegning: Bernt Bjørge
Fettstift på syrefritt papir
<div class="pict0">
<img src="croquis1.jpg" alt="croquis" />
<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:1px 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
BERTE I BLÅTT
Tegning: Bernt Bjørge
Fettstift på syrefritt papir
<div class="pict">
<img src="croquis1.jpg" alt="croquis" />
<div class="caption1">
<p class="txt1">BERTE I BLÅTT<br>
Tegning: Bernt Bjørge<br>
Fettstift på syrefritt papir</p>
</div>
</div>
.pict
{
width:300px;
height:400px;
position:relative;
float:left
}
.caption1
{
width:100%;
height:auto;
background:#ffffff;
padding:0.5em 0 0 0.1em;
opacity:0.5;
position:absolute;
top:0;
left:0;
z-index:1
}
p.txt1
{
font-family:sans serif;
font-size:0.7em;
font-weight:bold;
color:#333399
Opacity medfører at skrift ofte blir utydelig, i og med at to lag "smelter sammen". Dette kan - om nødvendig, for det kompliserer koden betydelig - motvirkes ved å legge et tredje lag øverst
BERTE I BLÅTT
Tegning: Bernt Bjørge
Fettstift på syrefritt papir
BERTE I BLÅTT
Tegning: Bernt Bjørge
Fettstift på syrefritt papir
<div class="pict">
<img src="croquis1.jpg" alt="croquis" />
<div class="caption1">
<p class="txt1">BERTE I BLÅTT<br>
Tegning: Bernt Bjørge<br>
Fettstift på syrefritt papir</p>
</div>
<div class="caption1a">
<p class="txt1">BERTE I BLÅTT<br>
Tegning: Bernt Bjørge<br>
Fettstift på syrefritt papir</p>
</div>
</div>
.caption1a
{
width:300px;
height:auto;
background:transparent;
position:absolute;
top:0;
left:0;
z-index:2
}
Her følger et eksempel med bildetekst plassert i bunnen, og med annen bakgrunnsfarge enn hvit.
BLUPPE I BLÅTT
Tegning: Bernt Bjørge
Fettstift på syrefritt papir
<div class="pict">
<img src="croquis2.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
}
Her er et eksempel med fadet PNG-bilde som overlay, i tillegg til tradisjonell bildetekst
BLUPPE I BLÅTT
Tegning: Bernt Bjørge
Fettstift på syrefritt papir
<div class="pict">
<img src="croquis2.jpg" alt="croquis" />
<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:#000000;
padding:12px 0 10px 0;
margin-top:-4px
}
.caption2atop
{
width:300px;
height:50px;
background:transparent url(fade.png)
repeat-x;
position:absolute;
bottom:0;
left:0;
z-index:1
}
p.txt1
{
font-family:sans serif;
font-size:0.7em;
font-weight:bold;
color:#ffffff
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.
