Galleri - Minigalleri - Rune Jensen

Dette er for at teste, hvordan galleriet ellers kan bruges.
<img src="spider.png" height="200" width="400" />

..så er billedet klart.
Det, som der skal grafik omkring.

Vi har angivet width på billedet til 400 og height til 200 (px)

Alt, hvad der nu lægger sig udenom dette IMG, vil få samme størrelse.
Højre rammekant skal have grafik først.

Det er lige meget, hvilken man tager først.

Vi lægger nu en DIV udenom billedet, giver det lige samtidig en ID, sådan:

<div id=&quot;right_border&quot;>
     <img... det fra før />
</div>

og så i CSSen, der skal bestemmes dette:

#right_border{
      padding-right: 50px;
      background: white url(grafikhøjre.gif) right top repeat-y;

}

..hvad der sker er:

padding-right: Dette skaber et mellemrum imellem DIVens højre kant og billedets venstre kant på 50 px

white - baggrundsfarven, hvis billede ikke findes
url - URL til grafikfilen, som skal repeteres i højre side
right - billedfilen skal starte i HØJRE side. Hvilket vil sige fra DIVens højre rammekant minus grafikkens bredde (50 px)
top - billedet skal starte i toppen
repeat-y - billedet skal repeteres i y-retning
Sådan kommer det til at se ud.

Grafikken til højre ramme er selvfølgelig bare noget dummy-noget, men det er nemt at finde grafik-filer til rammekanter.

De hedder noget a la border graphic i en Google søgestreng.

evt. tilføjes clip+art i søgestrengen
Her omklammer vi igen det hele (HTMLen) med en ny DIV (id: border_top):

<div id=&quot;border_top&quot;>
   <div id=&quot;right_border&quot;>
      <img... det fra før />
   </div>
</div>

Igen vil den nye DIV tage størrelse af det største indhold indeni.

CSSen er næsten den samme, men her skal ny grafikURL, og så skal der repeates i X-retning i stedet, 
og padding skal lægges i toppen af DIVen, så der bliver plads til grafikken:

#border_top{
    padding-top: 50px;
    background: white url(grafiktop.gif) top right repeat-x;
}
Sådan er resultatet efter to omklamrede DIVs af billedet.
Der skal så forstsættes med endnu to DIVs.

Her kan man også se, at denne måde at lave det på,
ikke tager højde for hjørnegrafik.
det var dér, hvor jeg førhen klmete en ekstra DIV 
ind imellem hver DIV med nogle faste bredder og højder.
I dag er der bedre metoder.. det bedste er,
hvis man kan omklamme med DIVer, 
så kender man nemlig størrelsen
(eller sort of - den tager højde/bredde af indholdet)
position: absolute test top: 0; left: -100px
At lægge border-grafik med CSS

At lægge border-grafik med CSS

Dette er for at teste, hvordan galleriet ellers kan bruges.

position: absolute test top: 0; left: -100px
At lægge border-grafik med CSS

At lægge border-grafik med CSS

Dette er for at teste, hvordan galleriet ellers kan bruges.