home | index | menu | help

Er is geen CSS ondersteuning.

• klik hier voor het css-menu

Het voordeel van deze css-pijltjes is dat ze de pagina ontzettend snel houden. Als je twee graphics hiervoor had gebruikt was de pagina een stuk trager geweest (voor wat betreft het "laden"). De code stel helemaal niets voor. Hieronder staat het stukje stylesheet (voor de head van de pagina):

<style type="text/css" media="screen">
	.pijltje{
		margin-left:100px;
		height:50px;
		width:140px;
		position:relative}
	.pijltje a{color:#00a;background:inherit}
	.pijltje .punt-links{
		border:25px solid transparent;
		border-right:25px solid #00aa00;
		width:0; height:0;
		overflow:hidden;
		margin-left:-25px}
	.pijltje .punt-rechts{
		border:25px solid transparent;
		border-left:25px solid #00aa00;
		width:0; height:0;
		overflow:hidden;
		margin-left:140px}
	.pijltje .body{
		margin:-35px 0 0 25px;
		top:15px; left:25px;
		height:20px;
		background:#00aa00;
		color:#fb0;
		text-align:center}
</style>
		

En hieronder staat het stukje html-code wat je in de "body" van de pagina kan plaatsen. De "pijlen-procedure" valideert op de css en html5. Over html5 gesproken: ga deze procedure niet op een transitional pagina gebruiken. Alleen op goed gebouwde pagina's (strict of html5) werkt alles feilloos.

<div class="pijltje">
	<div class="punt-links"></div>
	<div class="body">
		<a href="http://www.dns5.nl/css/pijltje-css.html" rel="nofollow">naar links </a>
	</div>
</div>
<div class="pijltje">
	<div class="punt-rechts"></div>
	<div class="body">
		<a href="http://www.dns5.nl/css/pijltje-css.html" rel="nofollow">naar rechts </a>
	</div>
</div>
		

UPDATE
Oeps... Er zijn klachten! Ik had er niet bij nagedacht dat het veranderen van de code om de pijltjes verticaal te maken wel eens lastig zou kunnen zijn.
Achter deze link de pijltjes vervolg-code

cache 23-01-2011