Kyrre Baker

På etterspørsel beskriver jeg her kort hvordan jeg har implementert «panoramafunksjonen» på sidene mine. De epostene jeg har fått om saken tyder på at det er mange som tror det er vanskelig- eller krever tilleggsprogramvare, men det er ikke mye som kunne være lengre fra sannheten.

Min panoramakode

Det hele er relativt enkelt å få til. CSS fungerer etter hvert rimelig bra, og metoden jeg bruker baserer seg 100% på denne teknologien. På denne måten slipper man tillegg man ikke vet om den besøkende bruker.

Her er koden jeg har skrevet- og lagt til i stilarket mitt. Den er på hele ti linjer, men kan enkelt kortes ned eller endres etter som du garantert har andre ønsker til størrelser, farger og marger.

p.panorama {
	margin: 1em auto;
	padding: 0;
	text-align: center;
	overflow: auto;
	width: 500px;
	height: 320px;
	background-color: #444;
	border: 5px solid #444;
}

For å hindre at bildet i «panorama»- klassen skal få rammer og marginer har jeg også denne lille kodesnutten i stilarket mitt.

p.panorama img {
	border: 0;
	padding: 0;
	margin: 0;
}

For å sette inn ett bilde i denne beholderen trenger du altså bare å legge til klassenavnet «panorama» til paragrafen. Omtrent som dette.

<p class="panorama"><img src="" ... /></p>

Eksempel og forklaring

For ytterligere eksempler på hvordan det pr. dato ser ut med denne koden; her er ett søk etter panorama på mine sider. Husk at du med fordel kan endre disse få linjene til å se bedre ut i forhold til dine egne sider.

Det eneste jeg må passe på når jeg skal bruke koden er at bildene jeg laster opp har en høyde på 300px. Dette må jeg passe på etter som koden tilsier at «panoramafunksjonen» skal være på 320px. De ekstra 20px i koden er gjort så man kan slippe den vertikale rullemenyen. I tillegg må jeg sørge for at bildet er bredere enn 500px, men det er vel hele poenget med denne koden.