Eliminare gli spazi tra le voci di una lista orizzontale
Avrete notato che Mauro Accornero, nostro lettore da tempo, è diventato anche nostro autore. Oltretutto ha aperto da poco un blog tutto suo, che a mio parere è una dispensa di perle di utilità non indifferente. Quella che vi ripropongo oggi è una cosa che succede spesso, una domanda a cui spesso mi trovo a dover rispondere sui forum e nelle mail, e Mauro molto semplicemente ce la spiega una volta per tutte:
Un menu orizzontale non è difficile da realizzare, dovendo restituire una lista di voci, categorie o sezioni si utilizza solitamente il tag <ul>.
Il codice per realizzare un menu orizzontale è molto semplice
<ul> <li>Elemento lista</li> <li>Elemento lista</li> <li>...</li> </ul>Nel css invece sarà sufficiente definire un display:inline per affiancare gli elementi della lista.
li{ margin:0px; padding:0px; display:inline; }L’effetto desiderato è subito ottenuto, ovviamente in base alla grafica desiderata bisognerà tenere conto del comportamento di internet explorer nei confronti delle proprietà degli elementi in linea, le casistiche sono molteplici e verranno affrontate in un articolo a parte.
Una problematica comune a tutti i browser è invece l’aggiunta di uno spazio tra gli elementi in linea, questo comportamento nei browser non è un baco e per risolverlo di norma è sufficiente scrivere il codice html senza spazi tra gli elementi di linea.
<ul> <li>Elemento lista</li><li>Elemento lista</li><li>...</li> <ul>Questa soluzione è immediata ed efficace, è però impossibile da realizzare in un contesto nel quale non è possibile modificare il codice html, ad esempio se abbiamo un cms che ci mette a disposizione delle funzioni per ritornare liste di elementi dovremmo modificare il codice html all’interno della funzione, cosa che non sempre risulta fattibile.
Per risolvere questa casistica con i css è possibile utilizzare un margine destro negativo per gli elementi <li>.
li{ margin:0 -3em 0 0; padding:0px; display:inline; }Nella regola ho utilizzato il valore di -0.3em in modo che il margine sia proporzionale al testo, è utile fare qualche prova per capire quale sia la misura ottimale da adottare a seconda della grafica delle voci e degli elementi contenuti.
Post correlati
Lascia un commento
Istock photo
Sponsor Liquida
Sponsor e amici
I più commentati del mese
Consulenza legale
Oggi ti segnaliamo i seguenti link
Iscriviti alla newsletter!
Registrati al sito e al forum
Who's Online
Hai bisogno di un sito?
Lauryn.it, creatrice di Italianwebdesign, offre servizio professionale di webdesign, grafica, e-commerce, webmarketing, seo e posizionamento sui motori di ricerca.
Inoltre converte i tuoi layout grafici in xhtml e css e crea template per Wordpress personalizzati secondo esigenze di community, siti aziendali, blog professionali.
- Per informazioni: Lauryn.it
- Contatto email per preventivi gratuiti: info@lauryn.it
Ottimo post, proverò subito
.. una cosa che non ho ancora capito bene,l’uso dell’elemento display.. block, inline.. qualcuno potrebbe delucidarmi un pò la cosa? Thankss
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
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…
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
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…
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.
Grazie Davide, Mauro! ora è tutto più chiaro
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.
@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!
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.
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…