gå til toppen
gå til index
staple_l.gif
 
staple_r.gif

Bildetekster med CSS

vignettbilde

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.


croquis

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

croquis

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

croquis

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.

croquis

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

croquis

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
		
Revidert juli 2018  vignettbilde
staple_r.gif
staple_l.gif