Area cliccabile tag a dentro div

**fenderum** · 24-10-2011, 22:59

Salve a tutti, ho un problema abbastanza semplice da spiegare e probabilmente banale da risolvere...
In pratica con il codice seguente l'ultimo link "invade" l'area del penultimo, e di conseguenza il penultimo link è cliccabile solo per la sua "metà superiore". Mentre se sposto il cursore nella "metà inferiore" del penultimo link è come se stessi cliccando sull'ultimo.

html

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Title</title>
	<link rel="stylesheet" href="prova.css" type="text/css">
</head>
<body>
<div class="menu">
	<div id="menu1" >abcdefgh</div> 
	<div id="menu2" >ijklmno</div>
	<div id="menu3" >pqrstu</div> 
	<div id="menu4" >vwxyz</div>
</div>
</body>
</html>

e CSS

codice:

*{
	margin: 0;
	padding: 0;	
}
a
{
	text-decoration:none;
}
.menu
{
	font-family: Arial ;
	font-size: 30px;
	text-align: right;
	float: right;
	margin-right: 50px;
}
#menu1
{
	font-size: 36px ;
	height: 30px ;
	margin-right: 4px ;
}
#menu2
{
	font-size: 38px ;
	height: 34px ;
}
#menu3
{
	font-size: 34px ;
	height: 19px ;
	margin-right: 14px ;
	margin-bottom: 0px ;
}
#menu4
{
	font-size: 52px ;
	height: 42px ;
	margin-bottom: 6px ;
}

Ho già provato a modificare "margin" e "line-height" del tag 'a' dentro al 'div' #menu4, ma non ne ho ricavato niente di utile. Il risultato finale dovrebbe essere visivamente uguale.
Come posso risolvere ?

Grazie in anticipo

**ResianTaxidrive** · 26-10-2011, 12:22

se devi modifcare i margin del tag <a> devi prima renderlo display block.
Solitamente i menu non si fanno con i div ma con le liste. Quindi ti converrebbe fare

codice:

<ul class="menu">[*] djkksjd[*] djkksjd[/list]

**fenderum** · 26-10-2011, 13:25

Ciao e grazie per la risposta.
Ho modificato il codice in questo modo come suggerito:

codice:

<ul class="menu">
	<li id="menu1" >abcdefgh 
	<li id="menu2" >ijklmno
	<li id="menu3" >pqrstu 
	<li id="menu4" >vwxyz[/list]

ed aggiungendo al CSS:

codice:

ul li{ list-style:none; }
ul li a{ display:block; }
#menu4 a{ [...] }

Tuttavia anche provando a modificare height / margin-top / line-height ( su #menu4 a ) non riesco a risolvere ...
L'area cliccabile risulta comunque la stessa anche se le dimensioni del tag <a> effettivamente cambiano ( visualizzato con FireBug in Firefox7 ).

**ResianTaxidrive** · 26-10-2011, 15:05

hai definito anche l'altezza a #menu4 a?
se non dovesse funzionare, prova inoltre a riferirti a quell'elemento con "ul li#menu4 a".

p.s. come mai usi altezze diverse per le tue voci di menu?

**fenderum** · 26-10-2011, 15:33

Originariamente inviato da ResianTaxidrive
hai definito anche l'altezza a #menu4 a?

Sì, se metto ad esempio "height:20px;" vedo su Firebug l'area evidenziata in blu dell'<a> che diminuisce ( rimane "agganciato" dall'alto ), ma l'area "cliccabile realmente" rimane sempre la stessa.

Originariamente inviato da ResianTaxidrive
p.s. come mai usi altezze diverse per le tue voci di menu?

Perché mi serve visualizzarlo esattamente in quel modo, con quelle dimensioni e quelle distanze tra le parole.
Forse intendevi perché ho usato "height" invece che "line-height" ? In effetti non lo so; ho cominciato tempo fa e quello probabilmente era il metodo più veloce per farlo ... Mi consigli di usare "line-height" ? O magari conosci alternative ?

**ResianTaxidrive** · 26-10-2011, 16:18

prova a togliere tutte le altezze dei vari menu. Alla fin fine basta il font-size a definire quanto sarà grande il blocco.

Discussione: Area cliccabile tag a dentro div

Strumenti discussione

Ricerca discussione

Visualizza

Area cliccabile tag a dentro div

Permessi di invio