Ciao a tutti, vorrei giustificare n voci di menu in modo tale che (modificando lo spazio tra le lettere) occupino l'intera div.
il codice usato è il seguente (ovviamente non funziona):
http://jsfiddle.net/psyb6/1/
il risultato che vorrei ottenere è una cosa del tipo
|menuuuu1|
|m e n u 2 |
(un po grezza ma spero che renda l'idea).
Come posso fare?
Grazie
qualche anno fa, dovendo avere un allineamento forzato giustificato su un testo che doveva andare a capo in punti precisi, riuscii dopo vari tentativi a trovare una soluzione (di certo non eccelsa, tutt'altro, ma funzionante) con un'immagine spaziatrice, in pratica usando una gif trasparente, di lunghezza leggermente inferiore al div. Nel tuo caso in realtà va regolato lo spazio fra le lettere e non fra le parole ma te la passo egualmente, applicata al tuo codice modificato http://jsfiddle.net/psyb6/3/
La mia idea era quella di una giustificazione "pura", nel senso di non utilizzare lo spazio fra le parole ma fra le lettere...
non puoi averla, lo spazio fra le lettere andrebbe calcolato e ripartito in base allo spazio vuoto, i css non consentono di farlo. Dovresti impostare il tutto manualmente, in base alla lunghezza della parola, ma non otterresti probabilmente un risultato soddisfacente, comunque puoi provarci (impostando per ciascun link un letter-spacing diverso) e avendo un allineamento che in qualche maniera somigli a ciò che vorresti ottenere. Non ci sono altre soluzioni
magari però con un font monospace sarebbe più facile fare i conti (forse)
Ciao, (giusto per la cronaca) col solo css esistono alcuni metodi ma, o non sono cross-browser o sono poco versatili.
Esiste la proprietà text-justify che fa esattamente ciò che chiedi. Peccato che funzioni solo su IE.
Esiste la proprietà letter-spacing che è supportata dai vari browser ma a cui puoi solo assegnare una dimensione fissa. Questo rende l'operazione poco pratica. Inoltre l'ultima lettera viene "estesa" come le altre e, ad esempio, nei link si può notare la sottolineatura che va oltre la fine della parola.
Probabilmente si riesce a trovare una soluzione valida (o più adeguata) con l'utilizzo di javascript/jquery.codice:<!DOCTYPE HTML> <html> <head> <title>Esempio</title> <meta charset="utf-8"> <style type="text/css"> /* solo IE */ #menu{ border: 1px solid black; width: 30%; text-align: justify; text-justify: distribute; } #menu a>div:after { content: ""; display: inline-block; width: 100%; } /* cross-browser ma con larghezza fissa */ #menu2{ border: 1px solid black; width: 30%; } #menu2>a:nth-child(1){letter-spacing:1em;} #menu2>a:nth-child(2){letter-spacing:2em;} </style> </head> <body> <div id="menu"> <a href="#"><div>menuuuu1</div></a> <a href="#"><div>menu2</div></a> </div> <div id="menu2"> <a href="#"><div>menuuuu1</div></a> <a href="#"><div>menu2</div></a> </div> </body> </html>
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
ringrazio entrambi per le risposte.
@Prill, l'idea era quella di usare myriad pro, quindi dubito che si riesca a fare..
@KillerWarm in effetti un tentativo con js l'avevo fatto, con charachterJustify (http://www.heychinaski.com/blog/2009...-using-jquery/ )per la precisione ma con scarsi risultati...
Rispondi quotando
