regolare larghezza e opacità del testo div

asevenx

Utente Attivo
7 Nov 2009
312
0
16
Salve, sto realizzando un menu orizzontale con questa struttura:
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
 

Salvo Salvi

Utente Attivo
14 Nov 2012
230
0
0
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

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
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>
 
Discussioni simili
Autore Titolo Forum Risposte Data
JackIlPazzo Espressione regolare per effettuare match con URI PHP 1
D Select con espressione regolare PHP 4
C L'espressione regolare non funziona Javascript 0
I espressione regolare Javascript 1
J espressione regolare PHP 2
F espressione regolare per valore null PHP 8
D Espressione regolare e redirect Apache 0
S Password espressione regolare PHP 3
A Espressione Regolare per verifica stringa PHP 14
S Espressione Regolare PHP 7
A Espressione regolare per verifica password PHP 3
emanuelevt espressione regolare PHP 9
JellyBelly Espressione Regolare per controllo Orario Javascript 2
borgo italia espressione regolare con numeri PHP 2
borgo italia espressione regolare PHP 4
V Regolare il volume Flash 1
Z Espressione regolare PHP 1
M Espressione regolare con eregi PHP 1
F espressione regolare e IE 6 Javascript 4
L [HTML] Navbar a tutta larghezza CMS (Content Management System) 2
W [HTML] Colonna che si collassa o scompare ad una certa larghezza HTML e CSS 3
G [HTML] Larghezza e Altezza campo HTML e CSS 4
elpirata [PHP] Larghezza colonne Fpdf PHP 0
A [Javascript] La larghezza del video player, diminuisce nel passaggio dal primo video ai successivi Javascript 0
D [HTML] Problema con Dreamweaver; 1) tabella con larghezza 100% 2) Immagine che si adatta a Div HTML e CSS 28
F Immagini stessa altezza e larghezza HTML e CSS 1
R larghezza div rimane sempre la stessa anche aumentando i px HTML e CSS 8
N cambiare css in base alla larghezza dello schermo Javascript 10
filippino Tabella larghezza dinamica HTML e CSS 1
felino Combobox con larghezza adatta al contenuto jQuery 9
F larghezza automatica div HTML e CSS 2
F elastic textarea in larghezza Javascript 0
D Larghezza dinamica ad elementi html HTML e CSS 0
andre9004 Tag <a> che non riconosce altezza e larghezza (CSS) HTML e CSS 6
E larghezza diversa delle celle in una tabella fatta con <DIV> e <UL> HTML e CSS 0
V ridimensionare larghezza forma + aumento dimensione caratteri Flash 1
neo996sps Larghezza foto 100% Javascript 1
M Iframe dalla larghezza 100% con firefox HTML e CSS 3
N allineamento immagine e testo, padding larghezza e float HTML e CSS 2
M impostazione larghezza sito edito con expression web Webdesign e Grafica 0
K gestire la larghezza e il numero delle celle Classic ASP 1
C Larghezza in pixel HTML e CSS 2
P larghezza #container non viene interpretata da ie HTML e CSS 0
I tabella overflow visibile ma a larghezza fissa HTML e CSS 1
S Sito centrato larghezza 770px HTML e CSS 6
B Larghezza pagina web / barra scorrimento impazzita? HTML e CSS 0
metalgemini problema con larghezza celle... HTML e CSS 7
S larghezza tabelle dreamweaver HTML e CSS 1
ElfoDelBasket Controllo larghezza immagine PHP 0
C Larghezza Pagine. Discussioni Varie 4

Discussioni simili