naar onze homepage
 HTML
Tips

Een bijzondere border!
Als er al een border moet zijn, waarom dan geen bijzondere?
Want in plaats van een een-kleurige.gif kun je toch een kleine ani.gif van enkele pixels inzetten?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

De borders krijgen we met behulp van een 3 x 3 tabel:

Inhoud

Variatie met een meerkleurige gif die sneller blinkt.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Met kader.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Hoe doe je dat?
De bovenste en onderste cellen worden d.m.v. colspan="3" met elkaar verbonden.
Daar gebeurt de "animation".
In twee van de overige cellen plaatsen we ook de animation.gif.
Padding und Spacing moeten op "0" staan.
Om plaats te maken tussen de tekst en de border, maken we gebruik van nog een tabel.
In die tabel staat de eigenlijke inhoud.
De tabel "met kader" verduidelijkt (?) een en ander, let op de dikkere border.
In de hoeken klopt het niet helemaal, maar het is niet moeilijk te vinden waarom dat zo is :-)

Source.

<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img src="pics/tanim.gif" width="300" height="2" border="0"></td>
</tr>
<tr>
<td><img src="pics/tanim.gif" width="2" height="200" border="0"></td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td>
</tr>
</table></td>
<td align="right"><img src="pics/tanim.gif" width="2" height="200" border="0"></td>
</tr>
<tr>
<td colspan="3"><img src="pics/tanim.gif" width="300" height="2" border="0"></td>
</tr>
</table>