Salve, sto realizzando un menu orizzontale con questa struttura:
con i relativi stili
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
HTML:
<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
HTML:
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