vervolg van pijtje puur css
pijltjes zonder plaatjes (vervolg)

home | index | menu | help

Er is geen CSS ondersteuning.

		

		

Excuses. Ik had er even niet bij nagedacht dat het best wel eens lastig kon zijn om de getalletjes van de horizontale pijltjes dusdanig te veranderen dat ze verticaal op het scherm zouden komen te staan. Ik maak het goed door de "verticale pijltjes" op deze pagina nog even bij te voegen. Hieronder de css van de pijltjes:

<style type="text/css" media="screen">
	.positie{margin-left:100px}
	.pijltje{float:left}
	.pijltje a{color:#00a;background:inherit}
	.pijltje .punt-top{
		border:25px solid transparent;
		border-bottom:25px solid #00aa00;
		width:0; height:0;
		overflow:hidden}
	.pijltje .punt-bodem{
		border:25px solid transparent;
		top:-190px;
		border-top:25px solid #00aa00;
		width:0; height:0;
		overflow:hidden;
		margin:130px 0 0 0}
	.pijltje .body-top{
		line-height:15px;
		margin: 0 20px 0 15px;
		height:100px;
		width:20px;	
		background:#00aa00;
		color:#fb0;
		text-align:center}
	.pijltje .body-bodem{
		line-height:15px;
		margin: -150px 0 0 15px;
		height:100px;
		width:20px;	
		background:#00aa00;
		color:#fb0;
		text-align:center}
	.klear{clear:both}
</style>
		

En hieronder de code (voor de body) om de verticale pijl(en) "neer te zetten".

<div class="positie">
	<div class="pijltje">
		<div class="punt-top"></div>
		<div class="body-top">
			<a href="http://www.dns5.nl/css/pijltje-css-vervolg.html" rel="nofollow">
			o<br>p</a>
		</div>
	</div>
	<div class="pijltje">
		<div class="punt-bodem"></div>
		<div class="body-bodem">
			<a href="http://www.dns5.nl/css/pijltje-css-vervolg.html" rel="nofollow">
			n<br>e<br>e<br>r</a>
		</div>
	</div>
</div>		
<div class="klear"></div>
		

Klik op de link in deze alinea om terug naar de horizontale pijltjes te gaan.

cache 23-01-2011