regolare larghezza e opacità del testo div

[asevenx]

Salve, sto realizzando un menu orizzontale con questa struttura:

	<div class="sf_menu_foto">
        <div id="menu">
            <a href="chisiamo.php" class="sezione"><div id="box_sezione">Chi siamo</div></a>
            <a href="finalita.php" class="sezione"><div id="box_sezione">Finalità</div></a>
            <a href="obiettivi.php" class="sezione"><div id="box_sezione">Obiettivi</div></a>
            <a href="filosofia.php" class="sezione"><div id="box_sezione">Filosofia</div></a>
            <a href="progetto_uomo.php" class="sezione"><div id="box_sezione">Progetto uomo</div></a>
            <a href="metodologia_terapeutica.php" class="sezione"><div id="box_sezione">Metodologia terapeutica</div></a>
            <a href="dove_siamo.php" class="sezione"><div id="box_sezione">Dove siamo</div></a>
            <a href="galleria.php" class="sezione"><div id="box_sezione">Galleria</div></a>
            <a href="contatti.php" class="sezione"><div id="box_sezione">Contatti</div></a>                                 
        </div>
   	</div>

con i relativi stili

div#menu
{
	background-image:url(a/a1.png);
	height:68px;
	width:948px;
	display:table;
	padding:0 15px 0 15px;
}	

div#box_sezione, div#box_sezione:hover
{
	height:53px;
	padding-top:15px;
}

div#box_sezione:hover
{
	-order-radius: 10px; 
  	-moz-border-radius: 10px; /* firefox */
  	-webkit-border-radius: 10px; /* safari, chrome */	
	
  	-moz-box-shadow: 3px 3px 5px #000; /* firefox */
	-webkit-box-shadow: 3px 3px 5px #000; /* opera */
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=135, Strength=5); /* IE */
	box-shadow: 3px 3px 5px #666;  /* safari, chrome */	
	
	opacity:0.5;
}

a.sezione, a.sezione:link, a.sezione:visited
{
	display:table-cell;
	font-family:Verdana, Geneva, sans-serif;
	text-decoration:none;
	font-size:15px;
	font-weight:bold;
	color:#4a4a4a;
}

a.sezione:hover, a.sezione:visited:hover
{
	color:#FFF;
	
	-order-radius: 10px; 
  	-moz-border-radius: 10px; /* firefox */
  	-webkit-border-radius: 10px; /* safari, chrome */	
	
	background: #b8b8b8; /* non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb517', endColorstr='#f4944c'); /* IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ffb517), to(#f4944c)); /* Safari, Opera, Chrome,.. */
	background: -moz-linear-gradient(top,  #ffb517,  #f4944c); /* firefox 3.6+ */	
}

In questo modo la lunghezza del div varia con il testo, tuttavia lo spazio che c'è dall'ultima lettera e la fine del div varia da sezione a sezione. Come faccio ad impostare un spazio uguale per tutte le sezioni (una sorta di padding fisso)?

Inoltre con il passaggio del mouse il testo diventa bianco, ma subisce l'opacità, come faccio ad evitarlo?

Grazie a tutti

 

[Salvo Salvi]

1 per i menu ti consiglio di usare i tagl <ul> </ul> <li> </li>

2 prova così per il padding div#menu .sezione {
width: auto;
padding: 0px 15px 0px 15px;
}


3 ti viene l'opacità perchè hai impostato l'opacità.

 

[Jonn]

In ognicaso non puoi inserire un elemento blocco (DIV) dentro un elemento inline (A).
Quindi se non usi le liste per il menu, inverti DIV con A:
<div><a href="#">Link</a></div>