Div als link, geeft meer divjes dan ik wil.

[Jorryt]

Hallo,

Ik ben bezig met een website en heb daarbij een stukje html/css waarbij een div als link is opgesteld. Ik heb na even googlen de volgende code daarvoor gevonden, ik heb er zelf al veel aan gesleuteld voor het uiterlijk:

<div class='pagina'><a href="leden/jorryt.php">jorryt<a/></div>


.all .midden .pagina a{
	border: #F60 5px solid;
	-webkit-border-radius: 5px;
  	-moz-border-radius: 5px;
  	border-radius: 5px;
	height: 40px;
	width: 60px;
	background-color: #FFF;
	text-align: center;
	padding-top: 20px;
	margin-left: auto;
	margin-right: auto;	
	display:block;
	cursor: pointer;
}

.all .midden .pagina a:link {
	color: #000;
	font-size: 16px;
	text-decoration: none;
}

.all .midden .pagina a:visited {
	color: #000;
	font-size: 16px;
	text-decoration: none;
}

.all .midden .pagina a:hover {
	border: #FFF 5px solid;
	background-color: #F60;
	color: #FFF;
	font-size: 16px;
	text-decoration: none;
	/*display:block;*/
}

Nou is het probleem dat hij inplaats van 1 div weergeeft, (hij geeft hem wel keurig netjes weer, met link en alle opmaak), geeft die dus 2 vakjes neer, daaronder een lege div dus.

Weet iemand waardoor dat komt?

 

[Jorryt]

Ik heb dit opgelost, het gaat namelijk fout zodra je een a en een a:link hebt, deze hebben namelijk een groot verband met elkaar. Nou krijg ik wel een volgend probleem, na de code samengevoegd te hebben geeft de volgende css code alleen een helemaal zwarte div aan:

.all .midden .pagina a:link{
	border: #F60 5px solid;
	-webkit-border-radius: 5px;
  	-moz-border-radius: 5px;
  	border-radius: 5px;
	height: 40px;
	width: 60px;
	background-color: #000;
	text-align: center;
	padding-top: 20px;
	margin-left: auto;
	margin-right: auto;	
	display:block;
	cursor: pointer;
	color: #000;
	font-size: 16px;
	text-decoration: none;
}

 

[Jorryt]

Ook dit is opgelost, ik had al op ze allemaal geklikt, waardoor ze onder visited vielen, die verkeerd was ingesteld...

Sorry voor het ongemak.