Usare immagine nella lista <ul>

[andre.pv78]

Ciao, vorrei sapere come si fa ad inserire un immagine (solitamente un icona) al posto dei classici puntini che vengono fuori di default quando creiamo una lista utilizzando il tag:

<ul>[*][/list]

Grazie

[NonCeLaFaccio+]

Dal manuale css 2.1

’list-style-image’

Value: <uri> | none | inherit
Initial: none
Applies to: elements with ’display: list-item’
Inherited: yes
Percentages: N/A
Media: visual
Computed value: absolute URI or ’none’

This property sets the image that will be used as the list item marker. When the
image is available, it will replace the marker set with the ’list-style-type’ marker.

Example(s):

The following example sets the marker at the beginning of each list item to be the
image "ellipse.png".

ul { list-style-image: url("http://png.com/ellipse.png") }

prova un po' se funge.

Ciao

[istrice95]

Ciao, NonCeLaFaccio+ ti ha dato la risposta corretta se vuoi usare i css. Se invece vuoi rimanere nell'ambito di HTML, puoi usare una tabella senza bordi ed assegnare al primo TD di ogni riga un immagine (piccola) tramite IMG SRC.
Per esempio:

<TABLE>
  <TR>
    <TD>[img]immagine.gif[/img]</TD>
    <TD>Prima voce</TD>
  </TR>
  <TR>
    <TD>[img]immagine.gif[/img]</TD>
    <TD>Seconda voce</TD>
  </TR>
</TABLE>

[Myaku]

Originariamente inviato da istrice95
Ciao, NonCeLaFaccio+ ti ha dato la risposta corretta se vuoi usare i css. Se invece vuoi rimanere nell'ambito di HTML, puoi usare una tabella senza bordi ed assegnare al primo TD di ogni riga un immagine (piccola) tramite IMG SRC.

occhio che però così:
1. non avresti più una lista (nel senso logico / semantico del termine)
2. useresti parecchia marcatura in più

html e css sono complementari, non è questione di "volere" rimanere nell'uno o nell'altro ambito: per sviluppare bene devi usare entrambi
sono dell'idea che tanto vale quindi preferire la soluzione più corretta: quella che hai segnalato - se effettivamente andre.pv78 è di una lista che ha bisogno - mi sembra più una soluzione "di ripiego" (nulla di offensivo, ci mancherebbe, è solo una puntualizzazione )

[istrice95]

Originariamente inviato da Myaku
occhio che però così:
1. non avresti più una lista (nel senso logico / semantico del termine)
2. useresti parecchia marcatura in più

html e css sono complementari, non è questione di "volere" rimanere nell'uno o nell'altro ambito: per sviluppare bene devi usare entrambi
sono dell'idea che tanto vale quindi preferire la soluzione più corretta: quella che hai segnalato - se effettivamente andre.pv78 è di una lista che ha bisogno - mi sembra più una soluzione "di ripiego" (nulla di offensivo, ci mancherebbe, è solo una puntualizzazione )

Ciao! Ciò che dici è giustissimo, e la soluzione che ho dato è certamente poco elegante (anche la ripetizione della segnalazione all'immagine in ogni riga non è bellissima). In effetti, io non la userei mai, userei piuttosto i css e list-style-image che è certamente più corretto. Però, se andre.pv78 non conoscesse i Css, sarebbe piuttosto difficile per lui comprendere la soluzione list-style-image, perché ad ogni modo non saprebbe collegare la pagina css con la pagina html.
Ciao

[andre.pv78]

grazie a tutti!
anch'io trovo la soluzione con i css più corretta infatti è proprio quella proprietà list-style-image, l'unica cosa che non riesco a fare è allineare il testo che viene dopo il[*] in modo che sia middle rispetto all'icona che sta alla sua sinistra...
(cosa che invece succede automaticamente usando la table)
non so se mi sono spiegato....

[NonCeLaFaccio+]

Ciao,
se con middle intendi l'allineamento verticale, sappi che quella è una delle cose che hanno fatto odiare i css a tutti (solitamente non parlo per gli altri ma in questo caso credo di poterlo fare ). La risposta precisa non te la so dare, so solo che c'entra la line-height, se non imposti quella il vertical-align non funziona e c'entra anche il tipo di tag che usi, cioè si di tipo inline o block e anche il tipo di contenitore.
Se fai un po' di prove con varie combinazioni di <div>, <span> e

sicuramente ne verrai fuori.
Good luck.

[carlomarangoni]

Può darsi che io non abbia capito il problema ma non vedo difficoltà ad usare list-style
ad esempio

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css" media="screen" disabled="disabled">
ul {
	list-style: url(arrow.gif);
}
</style>
</head>

<body>
<ul>
	[*]Clicca Qui
	[*]Clicca Qui
	[*]Clicca Qui
	[*]Clicca Qui
	[*]Clicca Qui
	[*]Clicca Qui
	[*]Clicca Qui
	[*]Clicca Qui
	[*]Clicca Qui
	[*]Clicca Qui
	[*]Clicca Qui[/list]
</body>
</html>

[Vincent.Zeno]

Originariamente inviato da carlomarangoni

 <style type="text/css" media="screen" disabled="disabled" >

[carlomarangoni]

Originariamente inviato da Vincent.Zeno

É ormai quasi inutile ma dovrebbe servire per una certa compatibilità con IE4