Menu a comparsa: testo che non va a capo

[packe100]

Salve a tutti! Sono al mio primo post su questo forum...
Sto usando un menu verticale basato su CSS e javascript che ho trovato su qeusto sito.
Sto cercando di modificarlo per venire in contro alle mie esigenze (per esempio l'ho fatto generare dinamicamente da un template smarty). Questo è un esempio del menu in questione.
Il problema è di visualizzazione del testo: se una voce dell'elenco del sottomenu è troppo lunga anzichè andare a capo esce dai confini laterali del box contenitore (il div "section") oppure fa ridimensionare tale box e si pone al di sotto della freccetta.

Il markup di un sottomenu si presenta così:

<div class="section">
                <div class="box2">[img]images/arrow2.gif[/img]Immagine 1</div>
                <div class="box2">[img]images/arrow2.gif[/img]Immagine 2</div>
                <div class="box2">[img]images/arrow2.gif[/img]Immagine 3</div>
            </div>

Una voce del sottomenu è un div (di classe "box2") composto dunque da due elementi inline: un <img> che contiene la freccetta e un <a> che contiene la voce del menu. Il mio desiderio sarebbe che il testo troppo lungo andasse a capo quando incontra la fine del box contenitore,ma che non si posizionasse sotto la freccia...

Ho anche provato far diventare di tipo block i due elementi con il seguente codice css

.click-menu .box2 img{
display: block;
float: left;
}

.click-menu .box2 a{
width: 50px;
display: block;
}

...ma senza risultati (come si può notare dal primo sottomenu dell'esempio).

Qualcuno ha suggerimenti da darmi?

[Mich_]

Nell'esempio postato vedo alcuni problemi.
1. Hai usato una tabella: questo e` un grave errore semantico, che da un lato limita l'accessibilta`, dall'altro comporta una forzatura nell'uso dei CSS.
2. Hai usato attributi HTML di formattazione: questo puo` impedire il corretto funzionamento dei CSS (e la cosa e` diversa nei diversi browser).
3. Hai usato qualche evento in JS: la stessa cosa si puo` realizzare senza, con notevole guadagno in termini di accessibilta`.

Il mio consiglio e` di cercare dei menu verticali a due livelli realizzati con solo CSS: trovi qualche riferimento nei "link utili" del forum.

[packe100]

Grazie della risposta!

1. Hai usato una tabella: questo e` un grave errore semantico, che da un lato limita l'accessibilta`, dall'altro comporta una forzatura nell'uso dei CSS.

In effetti quella tabella potrei sostituirla con un div o con una ul, dal momento che non ha nemmeno molta utilità. Domanda: in che senso una tabella semanticamente mal posizionata può limitare l'accessibilità?

2. Hai usato attributi HTML di formattazione: questo puo` impedire il corretto funzionamento dei CSS (e la cosa e` diversa nei diversi browser).

Hai ragione, li correggo...ma questo è il meno..


Sinceramente avendo già perso del tempo a sistemare questo menu per il momento non mi va di cercarne un altro. Sei sicuro che un menu css puro è capace di tutti gli effetti di un menu con javascript?

[Mich_]

Secondo me fai piu` presto a cercare un menu pronto, che a sistemare il tuo.

Le tabelle inseriscono un significato ai dati: se i dati non hanno tale significato, chi non riesce a vedere la pagina non puo` apprezzarla: capisce che c'e` una tabella, e poi deve mentalmente cancellarla quando capisce che e` solo una riga o una colonna (o comunque che non c'e` relazione tra le righe e le colonne).
Stesso discorso per il JS.

Esiste in Italia una legge, la 4/04 (legge Stanca), che si applica a tutti i siti della pubblica amministrazione, ma e` caldamente consigliato applicarla a tutti i siti. Trovi i riferimenti nei "link utili".

Il menu e` semanticamente una lista (nel tuo caso con delle sottoliste annidate): va quindi realizzato tramite i tag di lista (di solito <ul> +[*]).

Hai ragione, li correggo...ma questo è il meno..

Non direi proprio: parlo per esperienza in questo forum. Poi vengono a dire "funziona in IE ma FF non ne vuole sapere": per forza alcuni browser danno precedenza ai CSS ed altri alle formattazioni HTML in linea.

[packe100]

Originariamente inviato da Mich_
Secondo me fai piu` presto a cercare un menu pronto, che a sistemare il tuo.
Il menu e` semanticamente una lista (nel tuo caso con delle sottoliste annidate): va quindi realizzato tramite i tag di lista (di solito <ul> +[*]).

In effetti si fa prima a prendere il menu già pronto, però vorrei apportare un minimo di customizzazione anche per fare in modo che queste mie isolate esperienze con in CSS non si riducano solo a del copy-and-paste ma mi servano anche a capire qualcosa in più sul linguaggio e come i browser rendono 'sti benedetti fogli. Infatti sto già modificando il menu usando le ul annidate... ma se non vedrò la luce entro breve seguirò il tuo consiglio e mi butterò nella sezione link utili!

Le tabelle inseriscono un significato ai dati: se i dati non hanno tale significato, chi non riesce a vedere la pagina non puo` apprezzarla: capisce che c'e` una tabella, e poi deve mentalmente cancellarla quando capisce che e` solo una riga o una colonna (o comunque che non c'e` relazione tra le righe e le colonne).

Capisco e condivido... ammesso che si possa avere un'opinione a tal proposito..