Domanda sui CSS (urgente x favore)

[floyd46]

Ciao a tutti e ai moderatori

sto avendo qualche problema nel creare 1 elenco con i CSS: mi spiego meglio.

Non a livello di tag; invece di usare il JavaScript x lo scambio immagine, vorrei farlo solo con codice CSS.

Ogni voce dell'elenco sarà 1 link.

Fin qui ci sono riuscito e lo scambio immagine avviene regolarmente.

Quello che mi dà 1 pò noia è il non allineamento del testo dell'elenco con la "gif", posta prima del testo.

ho provato a fare in questo modo:

ul.lista a:link {
list-style-image: url(image.gif border:0 align:middle/absmiddle);
}

ho provato a scrivere prima-->align:middle

e poi align:absmiddle

ma non ottengo l'effetto desiderato.

Chi potrebbe darmi 1 aiuto cortesemente?

Siccome non ci sono problemi di allineamento se usassi 1 normale elenco tipo:
<ul>[*]------[/list]

vorrei ottenere la stessa cosa.

Ringrazio in anticipo

Saluti

-Floyd-

[Francis87]

ul.lista {
list-style-image: url(image.gif);
}

[floyd46]

Ciao Francis 87

grazie per avermi risposto, ma ho anche provato a scrivere come mi hai fatto tu l'esempio.

Il risultato non cambia; io ho solo aggiunto in + il codice in quanto vorrei che ogni singola voce dell'elenco sia 1 link con relativo scambio immagine.

Non è allineata la mia gif con il testo dell'elenco.

Grazie

-Floyd-

[antos]

Originariamente inviato da floyd46
...
ul.lista a:link {
list-style-image: url(image.gif border:0 align:middle/absmiddle);
}
...

Chi potrebbe darmi 1 aiuto cortesemente?

Siccome non ci sono problemi di allineamento se usassi 1 normale elenco tipo:
<ul>[*]------[/list]

vorrei ottenere la stessa cosa.
...

non mi è chiaro cosa vuoi ottenere comunque il codice css che hai scritto è in parte errato
ul.lista li{list-style-image: url(image.gif);}
ul.lista li a:link {
border:0;
vertical-align:middle;
}
anche se usi i css l'html lo devi scrivere per forza! :gren:

[floyd46]

Ciao Antos
grazie x la risposta. Adesso provo a correggere il codice scritto da me (senz'altro ci sarà qualche errore).

Il risultato che vorrei ottenere è 1 semplice lista; solo che vorrei mettere 1 mia gif prima del testo e fare 1 scambio immagine
(a.hover) quando il puntatore del mouse passa sopra il link.

Il risultato che ottenevo prima mi dava sì lo scambio immagine, ma la gif non era allineata al testo. Tutto qui.

Grazie e ti farò sapere.

-Floyd-

[floyd46]

Ciao
ho provato a scrivere il codice come mi hai segnalato tu, ma non ci siamo ancora. Ottengo lo stesso rusultato che avevo io prima: lo scambio immagine c'è, ma qullo che vorrei è l'allineamento della gif con la scritta.

In ogni caso ti posto il codice, spero di non disturbarti tanto:
<style type="text/css">

ul.lista li {
list-style-image: url(btn_off.gif);
font-family:Verdana;
font-size:0.7em;
color:#822931;
padding:10px 0 5px 0;
font-weight:bold;
vertical-align:middle;
}
ul.lista li a:link {
text-decoration:none;
color:#822931;
}

ul.lista li a:visited {
text-decoration:none;
color:#000000;

}
ul.lista li a:hover {
list-style-image: url(btn_on.gif);
color:#ff0000;
text-decoration:none;
}
</style>

e questa in basso è la mia gif + la scritta.

Spero si possa risolvere.

Grazie ciao

[antos]

per la serie a tutto c'è rimedio

ul.lista li {
list-style-image: url(btn_off.gif);
font-family:Verdana;
font-size:0.7em;
color:#822931;
font-weight:bold;
vertical-align:middle;
}

devi togliere il padding!
infatti come avevi scrittin precedenza tra il brodo superiore dell'elmento li e l'elemento di testo che lo contiene ci sono 10px e 5px ce ne sono in basso
se devi aumentare le distanze tra i punti elenco devi usare il margin
per esempio se scrivi margin:5px 0px; aumenti metti il margine di 5 px sopra e sotto e niente ai lati

[floyd46]

Ciao Antos
non so come ringraziarti x la cortesia che mi stai facendo.

Non ho ancora provato a creare l'elenco con il tuo ultimo codice; appena lo scrivo ti faccio sapere x ringraziarti ancora.

A presto.

-Floyd-

[Francis87]

scusa se prima ti ho dato una risposta affrettata ma non avevo capito bene il problema ed ero a scuola

[floyd46]

Ciao Francis 87

tranquillo, non preoccuparti.
Ti ringrazio tanto x il tuo interessamento; abbiamo ottenuto un risultato simile. Adesso provo con il codice che mi postato Antos.

Grazie ancora, ci si sente.

-Floyd-
_______________
www.extro.tagonline.it