Modificare lo stile di una list...

[Arles]

Salve.

Ancora non ho letto una guida/un libro su CSS. Sto procedendo per
tentativi, cercando d'intuire il significato dei .css scaricati durante
la navigazione. Quindi, scusate la banalità delle domande. :-) Spero di
risolvere al più presto, studiandolo sistematicamente.

Nel mio file .css, ho creato un tag:

..miotag {
list-style-image: url(images/myimg.gif);
// altro. (*)
}

(*) scusatemi, ma ancora non so come si mettano i commenti in CSS :))

Nel file html, uso una unordered list così:

<ul style="miotag">
<il>Uno</il>
<il>Due</il>
</ul>

Anzitutto, non so perché io abbia dovuto mettere quel punto davanti al
nome, dato che funziona sia col punto che senza. :-) Se è un derivato da
unix/linux, allora vorrà forse dire che quel tag è "nascosto"... mah. :)

Inoltre, inizialmente avevo ridefinito sia il tag "body", sia il tag
"ul", inserendo in essi la proprietà (?) 'list-style-image'. Ma non
aveva funzionato. Ho dovuto quindi creare un tag nuovo.

Comunque sia, il problema è che la mia immagine .gif è una freccia ed il
testo che viene visualizzato al suo fianco NON è "verticalmente centrato
all'immagine".

Intendo dire... mettiamo che la .gif della freccia sia di 24 pixel di
altezza. Vorrei che il testo, mettiamo che sia da 20 pixel, fosse
"centrato" in modo da avere, a sinistra della .gif e guardando dall'alto
verso il basso, due pixel lasciati vuoti, venti pixel di testo e altri
due pixel lasciati vuoti. Mi sono spiegato? :-)

Inoltre, vorrei almeno anche aumentare lo spazio che c'è tra l'immagine
dell'elenco puntato e il relativo testo. Come posso fare?

In entrambi i casi, devo agire tramite gli attributi dell'html oppure
gli stili CSS mi permettono di modificare questi stili? Purtroppo ho
notato che per le "list" non ci sono molte opzioni di stile... :-(

Grazie!
Arles

[Magilla]

Post by Arles
Comunque sia, il problema è che la mia immagine .gif è una freccia ed il
testo che viene visualizzato al suo fianco NON è "verticalmente centrato
all'immagine".

Dimentica il 'list-style-image' (che si comporta in maniera differente
con i diversi browser) e usa la proprietà background per inserire
l'immagine in sfondo. Poi puoi usare il padding per spostare il testo.

Ciao

[Nello Polesello]

Post by Arles
Ancora non ho letto una guida/un libro su CSS.
Sto procedendo per tentativi

Male, così ci metti almeno il doppio del tempo tirando ad indovinare.
E scrivendo un sacco di robe non valide in questo newsgroup :-)

Comunque, ritornando al tuo problema specifico, i punti elenco (nel tuo caso
la freccia .gif) si mettono impostandoli come sfondo all'elemento <li>. In
pratica, nonostante le buone intenzioni dei creatori dei CSS, non si usa
list-style-image, proprio perché c'è modo di posizionare esattamente
l'immagine in modo che sia centrata e distante dal testo della lista.
Quindi:

<ul class="frecce">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

<style>
ul.frecce {
list-style:none;
margin: 10px;
padding: 0;
}

ul.frecce li {
background: url(img/freccia.gif) no-repeat 0 2px;
padding-left: 40px;
}

</style>

----------
Nello.

[Arles]

On Tue, 5 Apr 2005 15:44:49 +0200, "Nello Polesello"

Post by Nello Polesello

Post by Arles
Ancora non ho letto una guida/un libro su CSS.
Sto procedendo per tentativi

Non più, ora. :-)

Ho questo testo: "HTML, XHTML, and CSS Bible", terza edizione, di Bryan
Pfaffenberger, Steven M. Schafer, Chuck White, Bill Karow, dell'ottobre
2004. Spero sia il più aggiornato e conforme agli standard possibile! :)
http://www.josseybass.com/WileyCDA/WileyTitle/productCd-0764577182.html

Post by Nello Polesello
Male, così ci metti almeno il doppio del tempo tirando ad indovinare.
E scrivendo un sacco di robe non valide in questo newsgroup :-)

^_^'

Grazie mille a te e a Magilla.
A.