JS Link w divie nie działa

pytanie zadane 15 marca 2016 w HTML i CSS przez mattkot Nowicjusz (190 p.)

Witam.

Tworzę swoje portfolio i chciałem zrobić menu przyklejane do górnej krawędzi ekranu, które będzie wyśrodkowane i podzielone na sekcje. Cały problem polega na tym że link jest tylko w napisie w divie a nie ma go na całej powierzchni diva. Robiłem jak na filmach instruktażowych ale za nic nie chce się to zrobić. Dodatkowo mam w js napisane menu boczne które jest rozwijane po najechaniu myszką. Wstawiam kod html i css do menu, z którym mam problem, nie chcę wstawiać całości kodu strony bo ma ona już łącznie 400 linijek kodu, ale jeśli to będzie konieczne to tutaj jest całość w paczce .rar

html:

<body>
	<div class="container">
		
		<div class="header">
				<img style="width: 100%; height: 400px; " src="Wschod.jpg" />
		</div> 
		
		<div class="wrapper">
		<div class="nav">
			<div class="option"> 
				<span ><a href="#start"><i class="icon-home"></i>Start</a></span>
			</div>
			<div class="option">
				<a href="#about"><span style="font-size: 44px ;"><i class="icon-user"></i></span> O mnie </a>
			</div>
			<div class="option">
				<a href="#offer"><span style="font-size: 44px;"><i class="icon-basket"></i></span> Oferta</a>
			</div>
			<div class="option">
				<a href="#project"><span style="font-size: 44px;"><i class="icon-folder-open"></i></span> Projekty </a>
			</div>
			<div class="option">
				<a href="#contact"><span style="font-size: 44px;"><i class="icon-mail"></i></span> Kontakt</a>
			</div>
			<div class="reset"> </div>
		</div>

.wrapper
{
	
	position: relative;
	top: 400px;
	background-color: #2A3236;
}

.nav
{
	width: 100%;
	height: 60px;
	text-align: center;
	letter-spacing: 1px;
	background-color: #97743a;
}

.option
{
	
	height: 60px;
	width: 200px;	
	font-size: 30px;
	text-align: center;
	display: inline-block;
	text-decoration: none;
	
}

.option:hover
{
	background-color:  	#BC8F8F;
	height: 55px;
	border-bottom: 5px solid white;	
	transition-duration: 0.2s;
}

.reset
{
	clear: both;
}
.sticky
{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}
a.option
{
	display: block;
	height: 100%;

4 odpowiedzi

odpowiedź 15 marca 2016 przez arces Pasjonat (17,700 p.)
wybrane 16 marca 2016 przez mattkot

odpowiedź 15 marca 2016 przez saliwan22 Gaduła (3,110 p.)
edycja 16 marca 2016 przez saliwan22

odpowiedź 15 marca 2016 przez Mateusz11 Pasjonat (22,910 p.)

Cały problem polega na tym że link jest tylko w napisie w divie a nie ma go na całej powierzchni diva

No to daj tag <a> a w nim otwórz diva

komentarz 15 marca 2016 przez mattkot Nowicjusz (190 p.)
edycja 15 marca 2016 przez mattkot

Wiem że jest taka możliwość, tylko że wstawianie diva w znacznik a nie jest wskazane przy tworzeniu stron, a rozwiązanie którego chcę użyć powinno działać, a z jakiegoś powodu tak nie jest :)

edit:

Sprawdziłem mój kod w validatorze od w3c i nie zwróciło mi to żadnych błędów jak wsadziłem diva do linku, czyli chyba można tak zrobić :) dziękuję za pomoc