lista con immagini

[mattej]

Ciao!

ho creato una semplice lista verticale con delle piccole iconcine affiancate a un testo, solo non riesco a centrare il testo nella riga..
come posso fare?
se uso il float nella img mi scombina tutto..

#legenda ul {
width: 150px;
list-style: none;
margin:2px;
padding: 5px;
background-color: #ccc;
}

#legenda li {
margin: 2px 0 0 0;
border-bottom: 1px solid #333333;
}

#legenda img {
padding: 2px;
}

spero di essermi fatto capire..

[ricman]

Come fa comparire l'immagine delle liste sei scrivi nel css:
list-style: none; ?
Dovrai dargli "list-style-image:url(....);"

[ricman]

Per capirsi... prova a fare una cosa simile...

li {
	height: 40px;
	line-height: 40px;
	list-style-image: url(/img/ico_lista.gif);
}

[mattej]

si, ma l'immagine che vado a mettere a fianco ogni scritta è diversa per ogni riga..

[ricman]

Originariamente inviato da mattej
si, ma l'immagine che vado a mettere a fianco ogni scritta è diversa per ogni riga..

Ah... Ok... non avevi messo l'html... sono due casi... avevo il 50% di indovinare... e naturlamente ho preso l'altro...

Puoi cmq usare la tecnica del height uguale al line-height applicandola al tuo LI (e forse anche al tuo A)

Prova e facci sapere... se non ti torna posta anche il pezzettino di codice html incriminato.

[mattej]

non va mica..

ti posto anche l'HTML:

<div id="legenda">
<ul>
[*][img]file/img_legenda/biketrialista.png[/img]Biker > Bike
[*][img]file/img_legenda/monotrialista.png[/img]Biker > Unicycle
[*][img]file/img_legenda/park.png[/img]Parco trial
[*][img]file/img_legenda/competition.png[/img]Gara trial
[*][img]file/img_legenda/event.png[/img]Evento trial
[*][img]file/img_legenda/shop.png[/img]Negozio specializzato[/list]
</div>

Questo è quello che viene:

[mattej]

Inserendo il float e il line-height nell'anteprima di dreamweaver è tutto ok, però poi sul browser viene un casino..

#legenda {
position: absolute;
margin: 380px 0 0 320px;
border: 3px solid #FFFFFF;
}

#legenda ul {
width: 150px;
list-style: none;
margin: 0;
padding: 0;
background-color: #ccc;
}

#legenda li {
margin: 0;
padding: 0;
border-bottom: 1px solid #fff;
line-height: 24px;

}

#legenda img {
float: left;
line-height: 24px;
padding: 2px;
}

#legenda h1 {
font: 10px verdana, Arial, Sans-Serif;
padding: 0 0 0 26px;

}

Che fare?