Consigli su Drop-down Menù Orizzontale

[Jekill]

Salve ragazzi, sono nuovo del forum e dunque, un saluto caloroso a tutti...
Volevo chiedervi un paio di cose, cortesemente:

Studiando i menù drop-down orizzontali e verticali e visionando i relativi CSS, ho notato che, generalmente, accanto al CSS che pilota il menù ed altri elementi della pagina, in diversi siti, compare un "tooltip.css", che solitamente inizia così:

"MenuX CSS for tooltip display"

Sapreste dirmi a cosa serve, di preciso? Ho visto che la corretta visualizzazione del meù, in sua assenza, non subisce condizionamenti.

Il tooltip non sarebbe, per caso, l'etichetta che compare facendo "mouse over" su un pulsante e che mostra informazioni aggiuntive?

Seconda questione - ho voluto porvela dopo un lungo visionamemto e "prova e riprova" di diversi metodi per realizzare i menù verticali:

In merito a questo menù verticale spiegato in A List Apart, ho provato ad applicare questi stili, che prendono in parte da "A list apart", in parte da Suckerfish, per renderlo orizzontale:

ul {
padding: 0;
margin: 0;
list-style: none;
}

li {
float: left;
position: relative;
width: 10em;
}

li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;}

li:hover ul { display: block; }

Questo è il risultato:



non riesco ad aggiustare un paio di cosette:

1. il "border-bottom=0" che sembra essenziale per non raddoppiare le linee, mi cancella però, ovviamente, quella in fondo alla tendina e ai block della lista principale di selezione. Avete qualche dritta? - Molto probabilmente la mia sintassi, qui, è sbagliata, in quanto riadattata da un drop-down verticale. O no?

2. Secondo poi, come potrei correggere la sovrapposizione, ben visibile, sulla lista principale?

3. Inoltre, per centrare sull'asse orizzontale della pagina, a vostro avviso, come dovrei fare?

Grazie mille a tutti...CIAO

[erredeco]

1. prova amettere un border-bottom: 1px solid #ccc; all' <ul>, cioè al contenitore dei[*]

2. dipende sicuramente tutto da questo:

li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}

"Gioca" con questa dimensione fino a quando non trovi il valore che ti soddisfa

3. Ci sono un sacco di sistemi per centrare gli oggetti in una pagina; ti posso consigliare di dare un'occhiata qui:

http://www.cssplay.co.uk/menus/centered.html

[Jekill]

Grazie mille, Erredeco, dell'aiuto...

Per quanto riguarda la sovrapposizione, mi è bastato porre a "24px" il valore cui ti riferivi.

1. In merito al "border-bottom", applicandolo si risolve unicamente quello in fondo alla "tendina", come si vede in figura. Ho notato, poi, due ulteriori problematiche:





Nel frattempo, ci sto lavorando. Avreste suggestioni?

Ciao...

[Jekill]

Aggiornamenti:

Ho provato ad impostare, prima:

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
border-left: 0;
}

poi:

ul {
padding: 0;
margin: -1px;
list-style: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}

e sono avanzato di un passo, ma si è ripetuta la stessa storia del "bottom", ossia scompare il bordo estremo sinistro della lista principale - E' possibile disciplinare solo la lista principale?

[erredeco]

E' possibile disciplinare solo la lista principale?

Certo che è possibile: basta attribuire al tag <ul> un ID o una classe, es. <ul id="listaprincipale">

dopodiché nel CSS scriverai

ul {
/*tutto quello che deve essere comune a tutti gli <ul>*/
}

#listaprincipale {
/*tutto quello che deve essere specifico solo al tag contrassegnato da questo ID; in particolare a te serve che sia resa anche questa flottante, quindi: */

float:left;

}

[Jekill]

Ok...perfetto, devo ragionarci e provare, grazie mille - è molto interessante...

Dato che sei in linea volevo chiederti un'opinione.
Ho tentato di utilizzare il tag "position" e sono riuscito a risolvere qualcosa, certo non tutto:

ul { position: absolute; left: 420px }

Tu che ne pensi?

Devo provare anche col metodo che mi hai detto.

[Jekill]

Diciamo che cel'ho fatta, sperando sempre che la struttura regga...!

Il tag "position: absolute" sembra che abbia dato una definizione alla lista principale e che, inoltre, mi abbia permesso di trattarla separatamente dal drop-down.

Questo è il risultato:



Sono riuscito ad eliminare, anche, la sovrapposizione di cui sopra, grazie all'applicazione di "border-left: 0" nel "ul li a" e dell'utilizzo del tuo primo consiglio di dare uno spessore al border in "ul". In questo caso, ovviamente, ho immesso "border- left: 1px solid #ccc".

Questa è la sintassi che ho usato, hai qualche opinione?

body {
font: normal 11px verdana;
}

ul {
padding: 0;
margin: -1px;
list-style: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}

ul { position: absolute; left: 420px }

li {
float: left;
position: relative;
width: 10em;
}

li ul {
display: none;
position: absolute;
top: 25px;
left: 0;
}

/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
border-left: 0
}

/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { display: block; } /* The magic */

Grazie mille Erredeco...!

Ora, mi resta da aggiungere dei sottomenù ulteriori, che aprano a destra del primo livello di drop-down. Chiunque abbia suggestioni è benvenuto.

[erredeco]

Il tag "position: absolute" sembra che abbia dato una definizione alla lista principale e che, inoltre, mi abbia permesso di trattarla separatamente dal drop-down.

Da quello che hai scritto arguisco che sei alla tua prima esperienza nel magico mondo dei CSS, o quasi. Forza e coraggio

Intanto, perdonami la pignoleria, ma ti faccio notare che Position:absolute non è un tag, bensì una dichiarazione; allo stesso modo la frase "abbia dato una definizione alla lista principale" mi sembra priva di senso, non si capisce esattamente cosa tu voglia dire.

Inoltre non è vero che hai "trattato" la lista principale separatamente dalle altre: prova infatti a scrivere una cosa tipo:

ul {
padding: 0;
margin: -1px;
list-style: none;
border-bottom: 3px solid #c00;
border-left: 1px solid #ccc;
}

e te ne accorgerai subito.

Per ultimo, non so cosa desideri ottenere, ma se scrivi

ul { position: absolute; left: 420px }

stai "inchiodando" la posizione di questo tag a 420px dal bordo sinistro del tuo browser. In base a cosa hai stabilito questo valore?


Se ti serve un manuale per capire a fondo come funzionano i CSS, ti consiglio sia la guida che trovi su questo sito, che

CSS Guida Completa
di Gianluca Troiani
ed. Apogeo

che è molto chiara e completa, e ci trovi anche un esempio di costruzione di menù come vuoi farlo tu.

Detto questo, abbi pazienza per le osservazioni, e non demordere. Chiedi pure tutte le volte che ti serve aiuto

Ah, dimenticavo: per i tuoi prossimi interventi, se insieme al CSS metti a disposizione anche il codice HTML, sicuramente è più facile aiutarti

Ah, dimenticavo (2): non ho visto il tuo HTML, ma ci tengo a ricordarti che il tuo menù non funzionerà su Microsoft IE, a meno di scrivere un javascript

[Jekill]

Eh sì, devo ammetterlo, sono alle prime armi ed è un mondo che mi affascina molto...

Veniamo al dunque. Anzitutto, devo ringraziarti per le spiegazioni, le precisazioni e il libro che mi hai proposto. Proprio oggi, devo iniziare la lettura sistematica di una guida.

In merito al menù, ho affermato che la scrittura di "position: absolute" sembri che abbia dato una "definizione alla lista principale" in quanto, applicandolo, si sono verificati due eventi:

1. E' comparso il bordo inferiore anche nella lista principale. Come ricorderai, con l'istruzione che mi avevi fornito, questo si era aggiunto solamente in fondo alla tendina.

2. E' scomparsa la continuazione del bordo superiore della lista principale, alla sua destra. Problema cui mi riferivo nell'immagine coi due fumetti di commento.

In base al primo punto, ho creduto di poter applicare lo stesso procedimento al border-left che, se eliminato in "ul li a" con "border-left: 0", per togliere la sovrapposizione tra i bordi dei blocchi nella lista principale, mi scompariva, ovviamente, sulla sinistra di ogni oggetto e se correggevo, secondo il tuo procedimento, aggiungendo uno spessore in "ul", mi ricompariva solo nel menù a tendina e non alla sinistra estrema della lista principale. Dichiarando "position: absolute" ciò era stato risolto.

Ancora non so, esattamente, cosa sia avvenuto e cosa vada a condizionare, di preciso, la suddetta "dichiarazione". Ciò mi aveva spinto a "congetturare" il fatto che avessi trattato la lista principale separatamente ma, ovviamente, era un'affermazione azzardata.

In merito a:

ul { position: absolute; left: 420px }

Ho dato un valore alla distanza dal margine sinistro, per ottemperare all'intento, prima dichiarato, di centrare l'elemento nella pagina. Dunque, ho misurato la larghezza dello schermo, 1280px senza barra di scorrimento e ho calcolato la distanza che mi serviva.

Non so, in effetti, se sia un metodo giusto. Dovevo ancora dare una letta al link da te propostomi.
In particolare, sono incerto del fatto che sia appropriato "inchiodare", come dici tu, l'elemento nella pagina. In effetti, con altre risoluzioni ciò sballerebbe, perchè l'oggetto è appunto bloccato. Anzi, a ripensarci, non è proprio un'operazione giusta. Probabilmente, dovrei centrare o simili. Lo saprò dopo una letta della documentazione appropriata.

In merito al non riconoscimento di "li:hover / liver" da parte di IE: sì, ne ero a conoscenza. Grazie, in ogni caso.
Avevo appreso ciò lavorando su di un menù di Meyer, che però adoperava il "csshover.htc", al posto del Javascript, ritenendolo più leggero per Firefox in quanto, essendo riconosciuto il comando in questione e premesso che solo IE/Win è portato a scaricare il "behavior" relativo al file suddetto, Firefox non si trova costretto a scaricare un Javascript ma, con la banda larga, credo che ciò faccia poca differenza.

Comunque, a parte quel comando relativo alla distanza dal margine sinistro, a tuo avviso, il codice CSS da me adoperato risulta corretto? A prescindere dal fatto che esistano una molteplicità di modi, più o meno complessi, per realizzare menù dinamici.

Ciao...

[erredeco]

I problemi di cui ti sei lamentato ai punti 1 e 2 sono dovuti a una sola cosa: tu hai scritto (giustamente):

li {
float: left;
/*ecc.*/
}

come qualunque guida ai CSS ti può confermare, con questo sistema hai "estratto dal flusso" (ti invito a leggere una guida per una spiegazione più esaustiva di cosa significhi) questi elementi[*], e così l' <ul> che li conteneva si è ritrovato VUOTO, sicché i suoi bordi solo collassati in un unica riga!

Mettendo position: absolute all' <ul> hai evidentemente estratto dal flusso anche questo, e tutto è andato a posto.
Ripeto: per ottenere questo stesso effetto è più comune utilizzare un float:left pure sull' <ul> principale.

Ultime osservazioni (mi odierai...) sull'utilizzo di un drop-down menu:

Firefox non si trova costretto a scaricare un Javascript

Beh...puoi sempre nasconderlo a Firefox e Opera utilizzando un commento condizionale (http://www.quirksmode.org/css/condcom.html per approfondire), ma la questione è un altra: il fatto è che se uno dei visitatori della tua pagina utilizza IE e ha il javascript disabilitato (per motivi di sicurezza per esempio) il tuo menù sarà per lui inaccessibile.

Per quanto riguarda la domanda

il codice CSS da me adoperato risulta corretto?

Se ci sono "errori" veri e propri, puoi vederli con un validatore:
http://jigsaw.w3.org/css-validator/

Per il resto, il codice è "corretto" quando ti fa vedere la pagina come desideri (possibilmente su tutti i browser)