Commenti a: Eliminare gli spazi tra le voci di una lista orizzontale

Di: luigi

luigi — Tue, 21 Apr 2009 09:41:32 +0000

buongiorno a tutti, la mia osservazione era solo in relazione alla necessità di produrre un sito in linea con la legge, ma è chiaro che se non c’è questa obbligatorietà tutto è rimandato alla decisione del designer, io ormai preso dall’abitudine metto sempre la distanza…

Di: Mauro Accornero

Mauro Accornero — Mon, 20 Apr 2009 22:02:32 +0000

L’esempio è puramente tecnico ma l’osservazione di luigi è comunque giusta, la soluzione proposta influenza solo il margine destro dell’elemento della lista, per lasciare uno spazio (come dice la legge stanca) si può intervenire sul padding ed ottenere la spaziatura necessaria al cambio del cursore.

Di: Lauryn

Lauryn — Mon, 20 Apr 2009 17:59:32 +0000

@luigi: ma certo, qui non si parla di spazi “ergonomici” che sono da rispettare, parliamo solo di quando hai definito graficamente e tecnicamente un design e te lo ritrovi spostato di 3px, e Mauro spiegava appunto perchè ciò succede.

Hai fatto bene però a ricordarlo per chi non conosce i requisiti di accessibilità, grazie!

Di: luigi

luigi — Mon, 20 Apr 2009 17:36:30 +0000

se volete rispettare la stanca ricordate che tra una voce e l’altra di menù (sia in verticale che in orizzontale)ci deve essere una distanza minima di 0.5em, insomma per permettere al puntatore di diventare cursore e viceversa.

Di: Andrea

Andrea — Mon, 20 Apr 2009 09:26:42 +0000

Grazie Davide, Mauro! ora è tutto più chiaro

Di: Mauro Accornero

Mauro Accornero — Mon, 20 Apr 2009 09:00:05 +0000

Ho letto il link, l’articolo è bello ma le immagini non sono elemnti in linea, sono elementi rimpiazzati come input o select in quanto hanno dimensioni derivate dall’oggetto e senza gestione da css mantengono le dimensioni originali.

Di: Mauro Accornero

Mauro Accornero — Mon, 20 Apr 2009 08:56:26 +0000

Il margine destro negativo è corretto, ho scritto “sinistro” invece di “destro” nell’articolo. Correggo subito, scrivendo alla sera perdo il senso dell’orientamento dalla stanchezza…

Di: Logi

Logi — Mon, 20 Apr 2009 08:45:46 +0000

ciao.. volevo solo segnalare nell’ultimo esempio il margine negativo è assegnato al destro…

..su block e inline ci sarebbero un po di cose da dire ma in questo caso ti basta sapere che gli elementi inline sono fatti per posizionarsi un di fianco all’ altro mentre quelli block, per ottenere lo stesso risultato, necessitano della prorietà float.
In questo caso infatti si poteva anche dare un float:left ai al posto di display:inline…
Ti consiglio questa lettura
http://css.flepstudio.org/css-tips/block-inline.html

Di: Mauro Accornero

Mauro Accornero — Mon, 20 Apr 2009 08:45:02 +0000

Serve per cambiare la natura di un elemento html, gli elementi di norma possono essere in linea (span,strong,em ecc…) oppure di blocco (div, p ecc) gli elementi in linea si affiancano mentre quelli di blocco si espandono in larghezza fino a dove è possibile e si posizionano uno sotto l’altro. L’utilizzo di dispay inline nelle liste permette di affiancare gli elementi senza utilizzare il float che altrimenti dovrebbe essere gestito con ulteriori regole. Magari nei prossimi giorni ci scrivo un articolo perchè è un argomento che varrebbe la pena approfondire…

Di: Davide

Davide — Mon, 20 Apr 2009 08:44:49 +0000

Display indica il tipo di elemento. I div, ad esempio, sono di tipo ‘block’; infatti se metti i div in fila, e non specifichi alcun float, appariranno uno sotto l’altro, come blocchi appunto. Span, invece, è di tipo inilne (così come a, ad esempio): ne puoi mettere molti in fila, e non andranno a capo fino alla fine della riga.
Col CSS puoi decidere di cambiare il tipo predefinito di un elemento; così un elemento che sarebbe block, diventa inline ecc

Il discorso è spiegato meglio qui:
http://css.html.it/guide/lezione/39/tre-proprieta-speciali-display-float-clear/

Davide