[HTML][CSS] Problema con div in primo piano con immagine di sfondo png trasparente

[Morf3us]

Ciao a tutti, ho deciso di scrivere in questo forum perchè non riesco a trovare una soluzione a un problema. Devo realizzare una menu bar orizzontale con una particolarità. In alto a destra di questa barra ci deve essere un bagliore che la copre. Sono riuscito a realizzare questo tranquillamente a livello di layout solo che i link sottostanti non funzionano perchè sono coperti da div in primo piano.

Allego un' immagine e anche del codice html+css per chiarezza.

CSS

#bagliore{
	width:561px;
	float:right;
	height:464px;
	position: relative;
	background: url(../images/effetti.png) no-repeat top;
	margin:0px auto -464px 0px;
	top:110px;
	z-index:10;	
}

#nav a, a:link, a:visited{
	text-decoration:none;
	color:#000;
}

#nav a:hover{
	text-decoration:none;
	color: #FFF;
}
	


#nav1 {
	width:112px;
	height:49px;
	float:left;
	padding:0 0 0 0;
	margin:0 1px 0 20px;
	line-height:45px;
}

#nav2 {
	width:111px;
	height:49px;
	float:left;
	padding:0 0 0 0;
	margin:0 1px 0 0;
	line-height: 45px;	
}

#nav3 {
	width:111px;
	height:49px;
	float:left;
	padding:0 0 0 0;
	margin:0 1px 0 0;
	line-height: 45px;
}

#nav4 {
	width:111px;
	height:49px;
	float:left;
	padding:0 0 0 0;
	margin:0 1px 0 0;
	line-height: 45px;
}

#nav5 {
	width:111px;
	height:49px;
	float:left;
	padding:0 0 0 0;
	margin:0 1px 0 0;
	line-height: 45px;
}

HTML

<div id="bagliore"></div>

<div id="nav">
<a href="#"><div id="nav1">Qualit&agrave;</div></a>
<a href="#"><div id="nav2">Rotori</div></a>
<a href="#"><div id="nav3">Ingranaggi</div></a>
<a href="#"><div id="nav4">Tecnologie</div></a>
<a href="#"><div id="nav5">Azienda</div></a>
</div>

Dall' immagine si può vedere come il bagliore sta messo bene. Il problema è che poi non mi rende cliccabili le ultime due barre del menu.

Se riuscite a darmi una mano ve ne sarò molto grato. grazie e buona giornata.

[karl94]

Il problema è che finché è sopra i collegamenti, essi non potranno essere cliccati. Una soluzione molto semplice sarebbe applicare la proprietà pointer-events su null, ma questa fa parte delle specifiche SVG, e per l'HTML funziona solo su Firefox. Potresti provare tramite gli pseudo elementi after o before a creare un'area rettangolare trasparente cliccabile in corrispondenza del corrispettivo collegamento e metterla davanti al div#bagliore.
Se non sai come strutturare il codice, metti la pagina online e scrivi il link, così posso scriverti il codice esatto.

una soluzione potrebbe essere aggiungere il bagliore alle immagini con gimp io penso siauna cosa fattibili in quanto il tuo layout nn è fluido

[Morf3us]

Karl...si usando le specifiche SVG va bene su firefox...ma purtroppo il sito deve essere visto bene anche in internet explorer. Con gli pseudo elementi come dovrei fare?

[karl94]

Il codice è questo:

<style type="text/css">
	#nav>a:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 11/*dovrebbe funzionare anche con 10, poiché vengono dopo nel documento*/;
	}

	#nav>a{
		position: relative;
	}
</style>

Ti consiglio di sostituire il selettore #nav a con #nav>a, che è più efficiente. La differenza sta nel fatto che il primo identifica tutti gli elementi di nome a discendenti dell'elemento di id nav, mentre il secondo prende solo i fligli.
Non ho incluso la spiegazione, se ti serve chiedi pure.