Sviluppo » Internet » Grafica & Design » CSS

Creare un pipe separatore tramite CSS

martedì 9 settembre, 2008

Capita spesso di vedere una serie di link distribuiti orizzontalmente separati dal carattere pipe “|”, il simbolo grafico dell’asticella verticale. Inoltre, se è presente una buona stesura HTML, ci si accorge che questa serie di link – apparentmente orizzontali – altro non sono che liste puntate UL o OL. Ne deriva che invece di scrivere:

1
2
3
<p>
    <a href="#1">Link 1</a> | <a href="#2">Link 2</a> | <a href="#n">Link n</a>
</p>

Sarebbe meglio usare:

1
2
3
4
5
<ul>
    <li><a href="#1">Link 1</a></li>
    <li><a href="#2">Link 2</a></li>
    <li><a href="#n">Link n</a></li>
</ul>

Tuttavia aggiungere il pipe come carattere sporcherebbe un codice così pulito. Possiamo usare in alternativa un bordo, tramite il codice:

1
2
3
4
5
6
ul li {
list-style:none;
float:left;
padding:0 12px 0 12px;
border-right:1px solid #666;
}

Ottenendo:

Possiamo notare due problemi: il primo link ha il padding sulla sinistra e l’ultimo link ha il pipe alla sua destra, cosa non bella da vedere! Ecco quindi che possono essere utilizzare le pseudo-classi :first-child e :last-child del CSS2, per formattare graficamente la nostra lista. Usando il seguente foglio di stile sul codice HTML mostrato prima:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ul li {
list-style:none;
float:left;
padding:0 12px 0 12px;
border:1px solid #666;
}
/* rimuove il padding dal "primo figlio", dal primo LI */
ul li:first-child {
padding:0 12px 0 0;
}

/* rimuove il bordo "dall'ultimo figlio", LI */
ul li:last-child {
padding:0 0 0 12px;
border:none;
}

Ottenendo in questo modo un miglior risultato:

Ovviamente, come spesso accade, attenzione alla compatibilità con i vari browser, soprattutto Internet Explorer.

Variante al float

Ancora meglio, se volete evitare il float, usate questo codice:

1
2
3
4
5
6
7
8
9
10
11
12
13
ul li{
list-style:none;
display:inline;
padding:0 12px 0 12px;
border-right:1px solid #666;
}
ul li:first-child {
padding:0 12px 0 0;
}
ul li:last-child {
padding:0 0 0 12px;
border:none;
}

Risultato identico, almeno su FireFox :)

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , , , , ,

4 commenti a: “Creare un pipe separatore tramite CSS”

  1. 09 set, 2008 Giulio:

    Perchè, secondo il tuo punto di vista, la sintassi

    <a href="#1" .....

    è peggiore di 

     <a href=" .... ?

    In termini di codifica, non vedo alcun vantaggio evidente, o meglio, ne vedo, ma di relativamente trascurabili ed integrabili comunque. Mi sta sfuggendo qualcosa ?

    Rispondi Quota
  2. 09 set, 2008 Giovambattista Fazioli:

    @Giulio: per qualità di codice si tende a scrivere l’HTML non curandosi dell’aspetto grafico finale. Ne segue che una “lista” di link, essendo appunto una lista, dovrebbe essere elencata come UL LI. Poi, visualizzarla orizzontale o verticale, dovrebbe essere – appunto – compito del foglio di stile CSS. Tuttavia non c’è nulla di male a scrivere una sequenza di Link come serie di TAG A. La questione è che eliminando i fogli di stile come risulta la pagina? Usando una sequenza di TAG A, separati da pipe, questi saranno così visibili anche in assenza del foglio di stile. Usando invece una lista UL LI la pagina avrà comunque un aspetto gradevole e leggibile anche senza foglio di stile.

    Rispondi Quota
  3. 12 giu, 2009 sXe:

    Interessante trick. Tuttavia provando l’ultima soluzione (sostituire il float con display:inline), il layout del menu cambia leggermente. Ovvero il padding non risulta uguale a destra e sinistra, come avviene invece con il float.

    S.

    Rispondi Quota
  4. 15 giu, 2009 Giovambattista Fazioli:

    @sXe: ovviamente il comportamento float non è identico al display:inline; anche se molto dipende dal browser utilizzato. Tuttavia agendo su margin e padding il display:inline è, a mio avviso, migliore rispetto al float che, come ben sai, ha altri problemi di layout…

    Rispondi Quota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre>                                  // blocco generico
<code></code>                                // blocco generico
[cc_actionscript][/cc_actionscript]          // Actionscript
[cc_actionscript3][/cc_actionscript3]        // Actionscript 3
[cc_css][/cc_css]                            // CSS Style Sheet
[cc_html][/cc_html]                          // HTML
[cc_js][/cc_js]                              // Javascript
[cc_objc][/cc_objc]                          // Objective-C
[cc_php][/cc_objc]                           // PHP
[cc_sql][/cc_sql]                            // SQL