lista non ordinata

[FinalFantasy]

ciao a tutti...sto guardando il sito di w3schools ma non trovo la soluzione al mio problema...
vorrei settare in una lista non ordinata, il marcatore diverso dal pallino, esattamente questo simbolo: »
cosa dovrei settare esattamente?

[thomas_anderson]

Hai due opportunità: dato che quel simbolo non lo puoi inserire con list-style-type puoi usare un immagine di background:

li {
list-style-type: none;
background: url(arrow.gif) no-repeat top left;
padding-left: xx; /* dipende dalla larghezza dell'immagine */
}

oppure puoi usare un entità XHTML:

<ul>[*]&raquo;list item[/list]

ti consiglio la prima.

il simbolo è eraquo; dove la e si scrive &

[FinalFantasy]

un'altra cosa, gentilmente
la lista si butta un po' troppo a destra, posso farlo rientrare un po'? ho messo il padding-left con un valore negativo, ma non va...
cosa potrei fare?

[thomas_anderson]

Inseriscila in un contenitore (div) di cui specificherai i margin. poi alla lista imposta margin: 0 e padding: 0.

[pierofix]

Originariamente inviato da FinalFantasy
ciao a tutti...sto guardando il sito di w3schools ma non trovo la soluzione al mio problema...
vorrei settare in una lista non ordinata, il marcatore diverso dal pallino, esattamente questo simbolo: »
cosa dovrei settare esattamente?

Le soluzioni ottimali sarebbero due:

1. un'immagine di sfondo, come detto da thomas_anderson;
   
2. l'utilizzo avanzato dei CSS e più precisamente della proprietà 'content':
   
   

   li
   {
      list-style-type:none;
   }
   li:before
   {
      content:'&#38raquo;';
   }

   questa soluzione, tuttavia, sarebbe supportata solo dai browser seri, quindi niente IE. :rollo:

Eviterei la seconda soluzione postata da thomas_anderson, ovvero l'inserimento del carattere nell'elemento di lista: esso, infatti, verrebbe letto da uno screen-reader, creando più rumore che altro.

In sostanza, la soluzione più compatibile è quella dell'immagine di sfondo, a parer mio.

[pierofix]

Originariamente inviato da FinalFantasy
un'altra cosa, gentilmente
la lista si butta un po' troppo a destra, posso farlo rientrare un po'? ho messo il padding-left con un valore negativo, ma non va...
cosa potrei fare?

Originariamente inviato da thomas_anderson
Inseriscila in un contenitore (div) di cui specificherai i margin. poi alla lista imposta margin: 0 e padding: 0.

Anche qui devo dissentire con l'amico Gabriele.

Invece di sporcare il markup, perchè non portare inizialmente tutti gli elementi sul filo sinistro, e definirne successivamente una distanza da esso? In questo modo si annullerebbero le diverse interpretazioni dei vari browser, ottenendo un risultato simile su tutti.

ul,
ul *
{
   margin:0; padding:0;
}
li
{
   margin-left:20px;
}

No?