[css] menu su due livelli

[chef]

Salve to all,
ho un menu sviluppato con i css.
Il menu è su due livelli, mi piacerebbe trovare il modo di, al momento del passaggio del mouse sopra ogni link, che questo sia in primo piano...
Per esempio se vedete qui:

link

vorrei che il tasto "Dove siamo" quando ci si clicca sopra "viene" sopra agli altri e non resta sotto come adesso...

grazie!

[Mich_]

Anzitutto se vuoi usare bene i CSS, devi cambiare modo di affrontare il codice HTML.

Le tabelle inseriscono una loro propria semantica ai dati, e vengono trattate come tabelle, per cui hanno una formattazione default che non e` facile togliere.
Per la formattazine vanno usate altre strutture (ad esempio i <div>). Per i menu si usano le liste (nel tuo caso le liste non ordinate - <ul>).

Inoltre se usi formattazione con attributi HTML, questi contrastano coni CSS, ed i browser risolono i contrasti a modo loro (ognuno il suo). Quindi devi eliminare tutti gli attributi di formatazine HTML (esempio: align="center" border="0" cellpadding="0" cellspacing="1") e sostituirli con i corrispondenti attributi CSS.

Comunque per realizzare dei menu, ti conviene partire da menu gia` fatti e formattati, che trovi in varie raccolte (puoi trovarne alcune nei "link utili" di questo forum).


I CSS (nella versione corrente - 2) non possono reagire al click, ma solo all'hover.
Quello che chiedi si puo` fare - ci potrebbero pero` essere problemi di compatibilita` con i browser IE.

[chef]

grazie, hai ragione per quanto riguarda l'uso di tabelle...
ma lo avevo fatto per mettere in due righe tutti i pulsanti e la prima cosa che mi e' venuta in mente di fare era quella...
:berto:

Mi piaceva quell'effetto... cmq male che vada, anzi, per rendere meglio il menu agli occhi dei vari browser faroo' un menu senza troppi fronzoli...

Very grazie per l'info.

[chef]

AIUTO!

facendo un po di prove sono arrivato a questo menu, però ho dei problemi di visualizzazione. Con FIREFOX vedo questo:



mentre con Internet Explorer vedo quest'altro:



Per IE mi va anche bene... per Mozilla avrei almeno bisogno che i pulsanti non si toccassero.

COme posso fare?????????????????

Ecco il codice completo:

<style type="text/css">
/*
Abbiamo racchiuso tutti i link con classe MENU in un div con id MENU.
Vediamo adesso il codice CSS, iniziando da una generica formattazione per il contenuto dei div:
*/
div
{
font-size: 11px;
font-family: Arial, Verdana, Tahoma;
width: 500px;
}
/*
Passiamo adesso al div contenitore del menu:
*/
div#MENU
{
text-align: left;
padding: 3px;
background-color: #ffffff;
border: Solid 1px #000000;
}
/*
Ed eccoci alla fase saliente del menu: la realizzazione dell'effetto rollover sul testo dei link. Ecco il codice:
*/
a.MENU
{
background-color: #aaa;
color: #000;
font-weight: Bold;
text-decoration: None;
width: 95px;
padding: 2px;
border: Solid 1px #000;
}
a:hover.MENU
{
background-color: #778899;
color: #eee;
font-weight: Bold;
text-decoration: None;
width: 95px;
padding: 2px;
border: Solid 1px #000;
}
</style>
<div id="MENU">
Home
Chi siamo
Dove siamo
La struttura
Eventi
Addestramento
Fitness
Allevamento
Gli amici
Photogallery
Contatti
Area riservata
</div>

[Mich_]

Anzitutto hai usato lo stesso nome per due oggetti DIVERSI: un id ed una classe: questo manda in confusione anche i brwoser seri (non solo gli umani).

a:hover.MENU
Questo non e` corretto, forse intendevi:
a.MENU:hover
che e` la situazione :hover di un tag <a class="MENU">

Nel tuo caso puoi eliminare tutte le classi agli <a>, e scrivere:
#MENU a
per individuare i tag <a> all'interno del menu.

text-decoration: None
questo valore (None) non esiste: prova ad usare none al suo posto

border: Solid 1px #000;
Solid: stesso discorso; inoltre e` sbagliato l'ordine: si scrive
border: 1px solid #000;

Ti lascio un riferimento ad un reference manual: se hai dei dubbi consultalo. http://www.w3schools.com/css/css_reference.asp

Inoltre quello che presenti (ho guardato il link) non e` una pagina HTML corretta: mancano diversi tag, di inizializzazione/inquadramento, per cui i browser interpretano come vogliono.
Inizia con un bel <!DOCTYPE...>, poi prosegui con <html>, <head>, ecc.

[chef]

Ciao MICH_ grazie.
Seguiro0 alla lettera le tue indicazioni.

ps per i tag mancanti... è un codice che includo in una pagina di per se completa... ecco perchè non vedi quei tag.

Mille grazie!

[Mich_]

Originariamente inviato da chef
ps per i tag mancanti... è un codice che includo in una pagina di per se completa... ecco perchè non vedi quei tag.

Si`, ma non li vede neppure il browser, e se non sa che lingua parli, interpreta come vuole.

In quel blocco (mi riferisco sempre al link del primo post), oltre ai tag essenziali che caratterizzano una pagina Web, mancano varie proprieta` CSS: e` molto difficile che funzioni.

Inoltre il font impostato e` molto piu` piccolo del font usato poi dai browser, quindi stai facendo prove senza senso.

[chef]

Ciao MICH_
si, era un codice trovato online, io ho cambiato i link e ne ho aggiunto qualcuno.
Cme sarà meglio che mi metta li a studiarmi bene bene la questione...