Newsgroup: it.comp.www.html
Titolo: [css] liste ul,li

ho una lista di nomi che vorrei far apparire in linea. Es:
@pippo @minni @pluto
dove @ è un'immagine.
Nel css ho scritto:
ul,li.nomi {   display:   inline;   list-style-image:
url(images/circle.gif) }
e nel foglio html
<UL class="nomi"> <IL>pippo <IL>minni <IL>pluto </UL>
Ma non mi appare circle.gif :/
E' proprio impossibile da fare con i css? Devo per forza usare una miriade
di <img> ? :(((
Ho anche provato a inserire <IL class="nomi"> ma non cambia niente ://
Deep

è così:
ul.nomi li {   display:   inline;   list-style-image: url(images/circle.gif) }
Saluti. Carlo.
--
Per rispondere via e-mail
togliere TOGLIQUESTO dall'indirizzo.
E-mail: 
TOGLIQUEST...@tiscalinet.it
Foglio Excel sulle tariffe telefoniche
Web I : 
http://web.tiscalinet.it/carlonike
    II: 
http://dadacasa.supereva.it/carlo_nike/
Scrivi il senso dei tuoi messaggi già nell'oggetto,
sarà più facile ottenere le risposte che cerchi.

 di <img> ? :(((
certo che si puo' fare. secondo me non trova
l'immagine tutto qui, il browser forse
la cerca sotto la cartella sbagliata, prova
a modificare la regola con:
list-style-image: url("../images/circle.gif");
qui c'e' un bell'articolo
su come applicare gli stili CSS alle liste:
http://www.alistapart.com/stories/taminglists/
ciao.
-- 
email: goldicus1970 AT 
yahoo.it
web: 
http://www.deelan.com

 ul.nomi li {   display:   inline;   list-style-image:
url(images/circle.gif) }
no :( nemmeno cosě funziona
L'inline funziona, ma niente circle.gif ://
Il percorso č giusto, perchč in un altra pagina ho un altro elenco (non
inline) e il list-style-image č lo stesso.
:(

 
http://www.alistapart.com/stories/taminglists/
Visto :))
Deep

 list-style-image: url("../images/circle.gif");
PS: ho anche provato a sostituirlo con  list-style: square; ma non ne vuole
sapere lo stesso :)

>list-style-image: url("../images/circle.gif");
ora non ho tempo ma dai 1 occhio al mio sito - banda laterale sinista -
ciao
-- 
[ Fustino? What a F#*k1n6 nick!? ]
  ~ 
http://space.virgilio.it/swa...@tin.it
  ~ ICQ: 61670579

   ~ 
http://space.virgilio.it/swa...@tin.it
Mmmm, nel tuo sito gli elementi sono disposti in modo normale, cioč a
blocchi.
Io li volevo in linea usando la dichiarazione "display: inline" nel css.
Il fatto č che per venire in linea, vengono, ma non mi appare il
list-style-type, ne con quelli predefiniti dal css (square, etc etc) ne con
un'immagine che carico io.
:(

 Visto :))
bravo. negli esempi di ALA hai notato che quando gli elementi sono 
inline i bullet spariscono? quindi, se i bullet spariscono non ce stanno 
nemmeno le immagini (perche' sono bullet anch'essi). fesso io che non ho 
te l'ho detto subito (mi ero dimenticato che stavo parlando
di elementi INLINE)e quindi ero convinto che fosse da un'altra parte il 
problema.
PERO'...
puoi comunque ottenere quello che vuoi:
ul li {
   display: inline;
   background: transparent url("dot.gif") center left no-repeat;
   padding-left: 20px;
}
questo e' il vecchio trucco del "fatti piu' in la'"
applichi un background non ripetuto all'elemento che
vuoi decorare e con un po' di padding-left sposti il contenuto
verso destra.
copia incolla, "dot.gif" e' il nostro bullet grafico:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"
http://www.w3.org/TR/html4/strict.dtd
">
<html>
<head>
<title>inline LI with funky bullet</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul li {
   display: inline;
   background: transparent url("dot.gif") center left no-repeat;
   padding-left: 20px; /* dot.gif e' largo poco meno di 20px */
}
</style>
</head>
<body>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>
</html>
questo l'ho provato con mozilla 1.2 e IE6.


 verso destra.
Smack ! Sei un grande :))
Grazie, funziona, devo solo regolare il padding :D
Deep

"deelan" ha scritto:
| puoi comunque ottenere quello che vuoi:
|
| ul li {
|    display: inline;
|    background: transparent url("dot.gif") center left no-repeat;
|    padding-left: 20px;
| }
|
| questo e' il vecchio trucco del "fatti piu' in la'"
| applichi un background non ripetuto all'elemento che
| vuoi decorare e con un po' di padding-left sposti il contenuto
| verso destra.
Ciao Deelan... la stavo per postar quasi uguale quando ho letto il tuo post.
Solo che invece di padding-left ho specificato width + text-indent:
li{
    widht: 100px;
    margin: 0px;
    padding: 0px;
    display: inline;
    background: transparent url("freccia.gif") no-repeat left center;
    text-indent: 10px
    }
Direi che cosě DeepBlue ha le due alternative:
-se vuole che gli elementi della lista abbiano dimensione adattata al testo
con il bullet usa la tua soluzione
-se vuole che gli elementi della lista abbiano dimensione fissa usa
la soluzione che ho proposto io, per evitare discrepanze di dimensione
tra IE e gli altri browsers (oppure il padding-left piů il box-model hack
di Tantek).
Saluti,
    SantaKlauss

 di <img> ? :(((
Hai provato cosě?
ul li {display: inline; list-style-image: url(immagine.gif);}