simulare una tag cloud

[essezeta]

Un saluto a tutti...

ho bisogno di un consiglio, vi spiego...

In main page ho creato la simulazione di una tag cloud,
e per "esigenze estetiche" (mah!?) ho "incassato" le linee di tags fissandone l'altezza, il che ha eliminato la troppa aria tra i vari tags...
Trattandosi di una soluzione "sporca" ottengo un risultato poco usabile: infatti ad altezza fissa accade che i tag di taglia maggiore vanno a sovrapporsi parzialmente su quelli di taglia minore, rendno difficile cliccarci sopra...

Mi rendo conto che raccontato così è un po' arduo da capire per cui ecco una demo semplificata...

Mi chiedevo:
c'è modo di ottenere un effetto come al punto_2 della demo, senza incorrere nei problemi che mostro al punto:3?
Qualcosa tipo una regola che "incassa" tra loro le parole ravvicinadole il più possibile (?? )...
oppure una regola che rende sensibile al mouse esclusivamente le bacchette dei font, ma non tutta la superficie della parola che vanno a comporre (fantascienza VVoVe: )

Vorrei sentire il parere di qualcuno un po' più esperto di me...

Grazie in anticipo a tutti...

[Mich_]

Devi sfruttare le potenzialita` dei CSS.
Oltre ai px esistono anche gli em, che sono un'unita` di misura proporzionale al carattere.

Inoltre puoi giocare con il line-height (anche questo in em o senza unita`, mai in px).

Nei tuoi esempi, se provi ad ingrandire il font (*) non ci si capisce piu` nulla, neanche nel secondo esempio. Invece se usi le dimensioni in em questo non accade.

(*) In browser diversi da IE basta control-+(tastierino numerico)

[essezeta]

grazie Mich,
sono daccordissimo sugli em...

comunque il "problema" (lo ripeto, non è un problema vero e proprio, di per sé non si porrebbe, è solo che forzo l'aspetto grafico del testo... e allora vado a scapito della sua funzionalità) non viene risolto...
il fatto è che se ho il link T_T se anche punto il mouse nello spazio sopra l'underscore e tra le "t", mi trovo in area attiva... e quindi se avessi un piccolo tag là dentro non lo potrei cliccare...
guarda questa screenshot...

il mio problema credo sia insormontabile, perché la bacchetta dell "q" e quella della "d" entrano l'una nell'area dell'altra e allora quella superiore prende il sopravvento...

grazie comunque...

[Mich_]

E` vero che in linea teorica puo` succedere quello che dici. Pero` se stai attento ed usi tutti gli attributi a disposizione in modo corretto, puoi evitare le sovrapposizioni complete.

In pratica devi fare in modo che l'area del font sia la piu` piccola possibile.
Quindi il line-height potrebbe essere 0.7 (ma fai un po' di prove, magari e` meglio 0.8 o altro).
In questo modo le righe si sovrappongono troppo; allora devi mettere un margine (inferiore?) al

(o comunque al tag che individua la riga).

Per le prove metti un background colorato nell':hover (come nell'esempio dell'immagine postata), ma non usare bordi, che vengono gestiti in modo diverso dia browser ed aggiungono pixel che modificano il comportamento.

Poi dovrai studiare l'ordine dei link in modo che una parola piccola non capito troppo vicino ad una parola grande, cosi` che venga nascosta completamente: lo so e` un po' barboso, e magari lo consideri "falso"; ma se vuoi una cosa particolare devi ingegnarti ad usare trucchetti particolari.

[essezeta]

Ciao Mich,
riapro la discussione perché credo sia giusto postare la soluzione che ho trovato...

Ho seguito i tuoi consigli:

se stai attento ed usi tutti gli attributi a disposizione in modo corretto, puoi evitare le sovrapposizioni complete.

devi ingegnarti ad usare trucchetti particolari

Va bene, ci ho provato...
Ho lavorato di line-height, margini negativi, ecc., ma non ne ho cavato niente...

Ecco però come ho proceduto:
ogni linea di tags era prima contenuta in un div classato tags...
ora ognuna ha il suo div classato tags1 tags2 tags3...
poi lavorando di z-index ho fatto in modo che la linea in cui i tag minori venivano coperti troppo dai tag maggiori venisse in un livello più alto...
naturalmente bisogna un po' giocare con le posizioni dei vari tag, ma il risultato non è male: le sovrapposizioni riguardano aree molto limitate, che comunque non compromettono la cliccabilità di ogni link...

Ecco la pagina e uno screenshot commentato...





Un saluto a tutti...


PS per il moderatore, posso modificare i percorsi dell'imagine e della pagina del messaggio precedente in modo che puntino al percorso del mio archivio e rimangano attivi?
la prima schermata qui:
http://www.essezeta.org/help/forum/1/dettagli.jpg
e la prima pagina qui:
http://www.essezeta.org/help/forum/1/index.html

poi cancella pure questo PS
grazie