Indsæt galleri





Det kan ofte være relevant at placere to eller flere billeder ved siden af hinanden eller under hinanden i en samlet enhed: Et galleri.


Nedenfor er beskrevet gallerier bestående af flere kolonner og flere rækker. Beskrivelserne vil også kunne anvendes til flere billeder i en kolonne eller flere billeder i en række.


Gallerier kan opbygges på 3 måder:




Div-bokse





Display tabel


Nedenfor er vist kode til en display-tabel på 2 rækker og 2 kolonner. Den kan tilpasses med flere / færre billeder / rækker efter behov.


HTML-kode
<div id="tabel"> <!-- Tabel niveau start -->

<div class="rekke"> <!-- Række niveau-1 start -->

<div class="celle"> <!-- Start celle 1 -->
<img src="01.png" alt="01" /><br />tekst 01<br />
<a href="http://www.01" target="_blank" ><span class="seher">SE HER</span></a>
</div> <!-- Slut celle 1 -->

<div class="celle"> <!-- Start celle 2 -->
<img src="02.png" alt="02" /><br />tekst 02<br />
<a href="http://www.02" target="_blank" ><span class="seher">SE HER</span></a>
</div> <!-- Slut celle 2 -->

</div> <!-- Række niveau-1 slut -->

<div class="rekke"> <!-- Række niveau 2 start -->

<div class="celle"> <!-- Start celle 11 -->
<img src="11.png" alt="11" /><br />tekst 11<br />
<a href="http://www.11" target="_blank" ><span class="seher">SE HER</span></a>
</div> <!-- Slut celle 1 -->

<div class="celle"> <!-- Start celle 12 -->
<img src="12.png" alt="12" /><br />tekst 12<br />
<a href="http://www.12" target="_blank" ><span class="seher">SE HER</span></a>
</div> <!-- Slut celle 2 -->

</div> <!-- Række niveau 2 slut -->

</div> <!-- Tabel niveau slut -->
CSS-kode
#tabel {
width: 800px;
display: table;
border-collapse:separate;
}

.rekke {
display: table-row;
}

.celle {
display: table-cell;
width: 200px;
text-align: center;
}

.seher{
font-size: 0.7em;
}




Tabel






















x
x