liste con immagini diverse

[javaweb72]

ciao mi chiedevo come fare per una lista del tipo

<ul class="menuNavigazione">
        <li id="setting">Impostazioni
	[*]Prima Voce
	[*]Seconda Voce[*]Terza Voce
	[*]Quarta Voce
	[*]Quinta Voce[/list]

ad inserire per ogni singola voce uno sfondo di immagine diversa

sto impazzendo e non trovo una soluzione

[fcaldera]

assegna un id a ciascuna voce e assegna il corrispondente background-image (position e repeat puoi assegnarli in comune a tutti i list item)

[javaweb72]

ho già fatto così ma nulla

[H5N1_Aviaria]

Potremmo vedere il codice risultante?
Dovrebbe assomigliare a questo:
(X)HTML:

<ul class="menuNavigazione">
        <li id="li1">Impostazioni
	<li id="li2">Prima Voce
	<li id="li3">Seconda Voce
        <li id="li4">Terza Voce
        ....[/list]

CSS:

#li1{
    background :white url(../images/tuaImmagine1.gif) 0 0 no-repeat;
}
#li2{
    background :white url(../images/tuaImmagine2.gif) 0 0 no-repeat;
}
#li3{
    background :white url(../images/tuaImmagine3.gif) 0 0 no-repeat;
}
#li4{
    background :white url(../images/tuaImmagine4.gif) 0 0 no-repeat;
}
...

[javaweb72]

ok, grazie

ho risolto cosi:

.menuNavigazione{
	width:160px;
	margin:0;
	padding:0;
	list-style:none;
}
.menuNavigazione a{
	display:block;
	text-decoration:none;
	border:0px solid #999;
	margin:0px 0;
	padding:4px 30px;
	color:#009;
	border-bottom:1px solid #EEEEEE;
}
.menuNavigazione a:link,
.menuNavigazione a:visited{
	color:#585656;
}
.menuNavigazione a:hover,
.menuNavigazione a:focus,
.menuNavigazione a:active{
	color:#373636;
	border-color:red;
	border-bottom-width:1px;
}

.menuNavigazione a:active{
	color:#373636;
	border-color:red;
	border-bottom-width:1px;
}

.menuNavigazione a#current{
	background:#E8E8E8;
	color:#373636;
	border-bottom: 1px solid #f00;
}

#li1 {
	background: url(../images/icone/crediti.jpg) 0 0 no-repeat;
}

#li2 {
	background: url(../images/icone/bot_info.png) 0 0 no-repeat;
}

<ul class="menuNavigazione">
	<li id="li1">Impostazioni
	<li id="li2">Prima Voce
	[*]Terza Voce
	[*]Quarta Voce
	[*]Quinta Voce[/list]

il problema ora è che no non riesco a fare il rollover con uno sfondo diverso, se assegno uno sfondo a class="menuNavigazione" questo mi copre l'immagine contenuta in[*]

[H5N1_Aviaria]

Ma và?
Credo che tu debba ripassare (o studiare?) un po' di regolette sui selettori.

[fcaldera]

se devi cambiare l'immagine allo stato hover l'immagine va spostata come background del link (al quale darai un display: block per occupare tutta l'area del list-item e delle dimensioni alla lista <ul>)

le regole cambiano in accordo, ad es.

li a {
  background-repeat: no-repeat;
  background-position: 0 0;
}

#li1 a {	background-image: url(../images/icone/crediti.jpg); }
#li2 a {	background-image: url(../images/icone/bot_info.png); }

#li1 a:hover {	background-image: url(../images/icone/crediti.jpg); }
#li2 a:hover {	background-image: url(../images/icone/bot_info.png); }