[alex]

Ciao a tutti, ho un problemino con il menu, praticamente vorrei che l'immagine accanto alla voce sia perfettamente allineata, mentre attualmente risultano leggermente più in alto, poi quando sono in una pagina, ad esempio home, l'immagine dovrebbe avere il quadrato pieno, spero possiate darmi qualche dritta.

Grazie.

Sintassi: css [ Scarica ] [ Nascondi ]

Sintassi: css [ Scarica ] [ Mostra ]

1. #container #navigation ul {
2.     list-style-type: none;
3.     line-height: 1.8em;
4.     margin-bottom: 0;
5.     margin-left: 0;
6.     margin-right: 0;
7.     margin-top: 0;
8.     padding-bottom: 0;
9.     padding-left: 0;
10.     padding-right: 0;
11.     padding-top: 0;
12.  
13. }
14.  
15. #container #navigation ul li a:link, a:visited{
16.         background-image: url(../images/quadro.png);
17.         text-decoration:none;
18.         background-repeat: no-repeat;
19.         padding-bottom: 0;
20.         padding-left: 16px;
21.         padding-right: 0;
22.         padding-top: 0;
23.         color: #999;
24. }
25.  
26. #container #navigation ul li a:hover, a:focus {
27.         background-image: url(../images/quadropieno.png);
28.         color:#333;
29. }

[antoscarface]

Ciao alex e benvenuto!

Prova ad aggiungere un:

Sintassi: css [ Scarica ] [ Nascondi ]

Sintassi: css [ Scarica ] [ Mostra ]

1. background-position: left center;
2.  

ad entrambe le regole che impostano il background, cioè #container #navigation ul li a:link, a:visited e #container #navigation ul li a:hover, a:focus

[alex]

Ti ringrazio tanto, ma per avere il quadrato pieno che mi indichi che sono in una pagina piuttosto che in un'altra? Cioè al passaggio del mouse ho effettivamente il cambio d' immagine e del colore della voce di menù, ma lo stesso effetto dovrei averlo nella pagina che sto visitando. Quindi non riesco ad impostare (a:visited).

Ciao e grazie.

[antoscarface]

è molto semplice, ma non so tu adesso come hai impostato il sito, se tramite php (o asp) o html puro.

Il ragionamento principale è aggiungere una classe alla voce attiva, che abbia come background l'immagine del quadrato pieno.

Esempio: siamo sulla pagina home.html e abbiamo questo menu:

Sintassi: html [ Scarica ] [ Nascondi ]

Sintassi: html [ Scarica ] [ Mostra ]

1. <ul>
2. <li><a href="home.html">Home</a></li>
3. <li><a href="about.html">About</a></li>
4. <li><a href="contact.html">Contact</a></li>
5. </ul>
6.  

Aggiungi una classe 'active' alla voce 'home':

Sintassi: html [ Scarica ] [ Nascondi ]

Sintassi: html [ Scarica ] [ Mostra ]

1. <li><a href="home.html" class="active">Home</a></li>
2.  

e da css aggiungi la regola:

Sintassi: css [ Scarica ] [ Nascondi ]

Sintassi: css [ Scarica ] [ Mostra ]

1. #container #navigation ul li a:hover, a:focus, #container #navigation ul li a.active {
2.         background-image: url(../images/quadropieno.png);
3.         color:#333;
4. }
5.  

come vedi, ho solo aggiunto la regola a quella dell'hover, perchè la caratteristiche sono uguali allo stato hover.

Ovviamente, se si in html puro, basta aggiungere la classe manualmente ad ogni pagina, mentre se sviluppi con php (o asp) dovrai mettere un controllo, che verifica la pagina corrente, e aggiunge la classe hover quando si verifica che la pagina attiva sia uguale alla voce che si sta stampando (magari tramite un loop).

Spero sia chiaro.