Kode for å sette opp bilder i rutenett

Løsning for å få bilder pent plassert i rutenett

Siden det er snakk om kode her, må jeg nesten legge med ei lenke til to flotte sider. Først av alt, Crafted Software, som lister opp ei rekke gode skrifter å velge til kodevisning; fremst av disse er Pragmato (og jeg må si meg enig med ham – den er suverent flott å se på sammenlignet med andre, som Courier). Den andre sida jeg synes er verdt å nevne, er Codecademy (sīc), som har interaktiv opplæring i blant annet CSS; sida fortjener også skryt for å velge lys tekst på mørk bakgrunn.

Med HTML5 har man fått en del nye verktøy som alle som skriver nettsider, blogger o.l. burde lære seg. Et av disse er figure med tilhørende figcaption. Den første brukes som ramme rundt et bilde, mens sistnevnte brukes for å tilføye bildetekst. Jeg lastet opp bildene fra 17. mai i fjor i dag. Først prøvde jeg å bruke margin: auto på dem, men det fungerer kun på elementer som er blokk-elementer, mens et bilde er definert som inline-block. Med andre ord, dersom man ønsker å vise et sett med bilder midt på skjermen på rekke nedover, gjør følgende:

<div>
<img style="display:block; margin-auto" src="bilde1" alt="alttxt1">
<img style="display:block; margin-auto" src="bilde2" alt="alttxt2">
<img style="display:block; margin-auto" src="bilde3" alt="alttxt3">
</div>

Som regel er det derimot ikke det man er ute etter, men å sette opp bildene i et rutenett. Da trenger man å gjøre noen få grep:

1. Først, slå på display: table i en div som omfavner alle bildene.
2. Deretter, definer størrelsen på rammen bildene skal være i til en prosentdel i henhold til hvor mange bilder du ønsker på hver linje, og hvor stort mellomrom du ønsker. Dersom du ikke har noen rammer eller slikt definert i under img i stilarket ditt (CSS-fila), er dette en smal sak. Skal du har to bilder i bredda, er maks størrelse 50 %, skal du ha tre bilder i bredda, er maks størrelse 33,33 % osv. Definer dette i figure
3. Til slutt, særlig hvis du skal ha med tekst, toppjustér bildene ved å ta med vertical-align: text-top

Her følger et eksempel:

<div style="display:table">

<figure style="width:44%; display:inline-block; vertical-align:text-top">
<img border="0" src="Jadida.jpg" style="width: 96%" />
<figcaption>Tekst som står under bildet.</figcaption>
</figure>

<figure style="width:44%; display:inline-block; vertical-align:text-top">
<img border="0" src="Jadida.jpg" style="width: 96%" />
<figcaption>Tekst som står under bildet.</figcaption>
</figure>

</div>

Med denne koden får man to bilder som står ved siden av hverandre, med 12% av bredda gjenstående til luft. Husk at hvis du har definert bilderammer, må du ta høyde for dette i hvor mange prosent bredda til bildet kan være. For øvrig anbefaler jeg på det sterkeste å bruke flytende design, da det forsikrer at du får de samme forholdene på sida uansett hvor stor eller liten skjerm leseren har. Dersom du ønsker å sikre deg mot at ting skal bli trykt alt for smått, kan du alltids definere min-width i body