Bordi di menu e rolover su link

[Barman@83]

Salve a tutti ho un piccolo problemino

io ho QUESTO MENU

e dovrei trasformarlo in QUESTO MENU


Io pensavo di prendere solo il bottone grande senza scritta e metterlo come sfondo e poi do l'effetto rollover come è ora.

Ma gli allineamenti come li posso fare?

devo differenziare tra 2 classi vero? una per i bottoni grandi e una per quelli piccoli?

[Mich_]

Attenzione, che il tuo menu richiede una revisione nella marcatura.

Un menu e` una LISTA, e pertanto va realizzato tramite i tag <ul> e[*].
Nella versione nuova, le voci "piccole" sono delle sottovoci delle altre, e vanno quindi realizzate tramite sottoliste.

Tra i "link util" ci sono vari esempi di menu, da cui puoi ricavare la marcatura e l'idea di base, che poi dovrai personalizzare mediante CSS opportuni.

[Barman@83]

io ho fatto che mettere voce1



e poi tramite i CSS ho scritto

#Menu
{
    background-image: url(imm_menu/home_r1_c1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    width: 285px;
    height: 436px;
}

#Menu  a:link, #Menu a:visited
{
    background-image: url(bottoni/bottone grande.jpg);
    height: 22px;
    width: 187px;
    color: #003366;
    margin: 2px;
    padding: 3px;
    font: small-caps bold 12px Arial,sans-serif;
    text-align: right;
}
    

#Menu a:hover{
    
    color: Fuchsia;
    background-image: url(bottoni/bottone grande.jpg);
    height: 22px;
    width: 187px;
    margin: 2px;
    padding: 3px;
    font: small-caps bold 12px Arial,sans-serif;
    text-align: right;
} 

[Barman@83]

Allora so già che con Mozzilla non funziona ma con IE funziona.

Ora il mio problema è che ho creato una classe mini ho provato ad assegnarla ma non la vede
ho provato a creare un attributo mini e niente lo stesso

Non so come far capire che il menù che esce fuori appena clicco catalogo deve avere un altro effetto.


vi posto il CSS

#Menu
{
    background-image: url(imm_menu/home_r1_c1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    width: 285px;
    height: 436px;
}



#Menu  ul , li
{
    list-style: none;
    position:relative;
    left:-19px;
}

#Menu  a:link, #Menu a:visited
{
    background-image: url(bottoni/bottone grande.jpg);
    height: 22px;
    width: 187px;
    color: #003366;
    margin: 2px;
    padding: 3px;
    font: bold 12px Arial,sans-serif;
    text-align: right;
}
    

#Menu a:hover{
    
    color: Fuchsia;
    background-image: url(bottoni/bottone grande.jpg);
    height: 22px;
    width: 187px;
    margin: 2px;
    padding: 3px;
    font: small-caps bold 12px Arial,sans-serif;
    text-align: right;
}

#mini
{
    background-image: url(bottoni/bottone picolo.jpg);
    margin: 2px;
    padding: 3px;
    font:bold 11px Arial,sans-serif;
    text-align: center;
    background-repeat: no-repeat;
} 

E QUESTA E LA PAGINA DI RIFERIMENTO

[Mich_]

io ho fatto che mettere voce1

Quello lo avevo capito. Ma non e` semanticamente corretto.

Allora so già che con Mozzilla non funziona ma con IE funziona.

Cioe` hai sbagliato. Se funziona in IE e non in altri browser e` lapalissiano che c'e` un errore. Se fosse viceversa invece vorrebbe dire (con buona probabilita`) che il codice e` giusto, ma che in IE viene interpretato male.

#Menu ul , li

Questo e` probabilmente un errore. Forse volevi scrivere
#Menu ul li
(senza la virgola) oppure
#Menu ul, #Menu li

Pero` il codice HTML non e` completo (non secondo quanto volevi ottenere): mancano le sottoliste.

Poi questo CSS:

#Menu ul , li {
list-style: none;
position:relative;
left:-19px;
}

probabilmente deve diventare:

#Menu  ul {
    list-style: none;
} 
#Menu li {
    list-style: none;
    padding: 0;
    margin: 1em 0;
    width: 15em; /* o vedi tu quanto */
}
#Menu a {
    display: block;
    width: 100%; 
    height: 100%;
}

Inoltre ti mancano tutti gli stili per i riquadri piccoli, che vanno introdotti con (ad esempio):
#Menu li ul { ...}
#Menu li li
#Menu li li a
...
Dove lascerai un margine sinistro piu` ampio e definirai una larghezza diversa.

[Barman@83]

ok con IE 7 funziona ma con Firefox no

ecco il CSS

#Menu
{
    background-image: url(imm_menu/home_r1_c1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    width: 285px;
    height: 436px;
}


#Menu  ul
{
    list-style: none;
    position:relative;
    left:-38px;
}

#Menu  a:link, #Menu a:visited
{
    background-image: url(bottoni/bottone grande.jpg);
    height: 22px;
    width: 187px;
    color: #003366;
    margin: 2px;
    padding: 3px;
    font: bold 12px Arial,sans-serif;
    text-align: right;
}
    
#Menu li li   a:link , #Menu li li a:visited
{
    background-image: url(bottoni/bottone piccolo.jpg);
    color: #003366;
    height: 22px;
    width: 102px;
    margin: 2px;
    padding: 3px;
    font: bold 12px Arial,sans-serif;
    text-align: center;
    background-repeat: no-repeat;
    position: relative;
    left: 60px;
}

#Menu li li  a:hover{
    color: Fuchsia;
    background-image: url(bottoni/bottone piccolo.jpg);
    margin: 2px;
    padding: 3px;
    font: bold 12px Arial,sans-serif;
    text-align: center;
    background-repeat: no-repeat;
}


#Menu a:hover{
    
    color: Fuchsia;
    background-image: url(bottoni/bottone grande.jpg);
    height: 22px;
    width: 187px;
    margin: 2px;
    padding: 3px;
    font: small-caps bold 12px Arial,sans-serif;
    text-align: right;
} 

[Barman@83]

Ho trovato un altro errore
quando esegui il logIn sia come utente che come Admin il sotto menu su link attivo (quando diventa fucsia ) si allinea a destra anziché al centro
Se non sono loggato invece va bene.
Sapete come mai?

la pagina è identica non cambia una virgola


@ Aggiornamento :

Il problema si verifica solo in remoto mentre in locale funziona tutto benissimo (solo su IE 7 )

@ Aggiornamento 2:

Ok ora è pura fantascienza :
io ho 3 utenti di cui 2 sono admin e 1 e un utente registrato.
e bene se io mi loggo come admin 1 si spostano solo "accessori "e "barche"
se mi loggo come utente o come admin 2 si spostano tutti

se non mi loggo affatto non si sposta nulla

:berto: :berto:

[Barman@83]

Ecco i codice HTML della pagina che si sposta

Pagina dove si muovono tutti i sotto menù
(barche , accesso , gommoni)

<div id="Menu">  
            





            
            <ul>
                [*][url='index.php?....'] HOME [/url] 
                [*][url='Catalogo.php?....'] CATALOGO USATO [/url] 
                    <ul>
                        [*][url='Catalogo.php?....'] Barche[/url] 
                        [*][url='Catalogo.php?.....'] Gommoni[/url] 
                        [*][url='Catalogo.php?..... '] Accessori [/url] 
                    [/list]
                [*][url='xxx.php?............'] CATALOGO NUOVO [/url] 
                [*][url='xxx.php?............'] MODIFICA DATI [/url] 
                [*][url='xxx.php?............'] CONTATTACI [/url] 
                [*][url='xxx.php?............'] SERVIZI OFFERTI [/url] 
                [*][url='xxx.php?............'] LOGOUT [/url]
                [*][url='xxx.php?............'] CANCELLA UTENTE [/url] 
            [/list]        
        </div> 

Pagina dove non si muove nulla

<div id="Menu">  
            





            
            <ul>
                [*][url='index.php?........'] Home [/url] 
                [*][url='Catalogo.php?......'] Catalogo Usato [/url] 
                    <ul>
                        [*][url='Catalogo.php?......'] Barche[/url]
                        [*][url='Catalogo.php?......'] Gommoni[/url]
                        [*][url='Catalogo.php?......'] Accessori [/url] 
                    [/list]
                [*][url='Catalogo.php?......'] Catalogo Nuovo [/url] 
                [*][url='Registrazione.php?........'] Registrati [/url] 
                [*][url='Contatti.php?........'] Contattaci [/url] 
                [*][url='Servizi.php?.....'] Servizi Offerti [/url] 
            [/list]        
</div> 

Questa è a pagina degli admin

<div id="Menu">  
            





            
            <ul>
                [*][url='index.php?....'] HOME [/url] 
                [*][url='Catalogo.php?....'] CATALOGO USATO [/url] 
                    <ul>
                    [*][url='Catalogo.php?....'] Barche[/url] 
                    [*][url='Catalogo.php?....'] Gommoni[/url] 
                    [*][url='Catalogo.php?....'] Accessori [/url] 
                    [/list]
                [*][url='Catalogo.php?....'] CATALOGO NUOVO [/url] 
                [*][url='xxx.php?....'] INSERISCI UTENTE [/url] 
                [*][url='xxx.php?....'] INSERISCI BARCA [/url] 
                [*][url='xxx.php?....'] ANAGRAFICA CLIENTI [/url] 
                [*][url='xxx.php?....'] ELENCO BARCHE [/url] 
                [*][url='xxx.php?....'] LOGOUT [/url] 
            
            [/list]        </div> 

Dove è che sbaglio???

[Barman@83]

Ok ho risolto l'arcano mistero

E' bastato mettere anche la dimensione ache su a:hover

#Menu li li  a:hover{
    color: Fuchsia;
    background-image: url(bottoni/bottone piccolo.jpg);
    height: 22px;
    width: 102px;
    margin: 2px;
    padding: 3px;
    font: bold 12px Arial,sans-serif;
    text-align: center;
    background-repeat: no-repeat;
} 

Ora se riuscite a darmi qualche consiglio per farlo funzionare anche con Fire Fox vi sono grato.

[Mich_]

Stavo rispondendo stamattina, poi e` saltata la corrente in ufficio e si e` portata via la mia risposta (e poi sono dovuto uscire).

Intanto c'e` un errore di ordine nei CSS: il particolare va messo dopo il generale.
Nel tuo caso #Menu a:hover{ sovrascrive quanto impostato da #Menu li li a:hover{.

Poi ci sono errori di innestamento delle liste. Vedi questa correzione:

<ul>[*] HOME  [*] CATALOGO USATO  
    <ul>[*] Barche [*] Gommoni [*] Accessori  [/list][*] CATALOGO NUOVO  [*] MODIFICA DATI  
  ...
<ul>

Ma tutti gli innestamenti vanno fatti nello stesso modo.

Ti consiglio anche una passata dai validatori (HTML e CSS): trovano alcuni errori che ad occhio non sono facili da vedere.