[Risolto] Interlinea degli elenchi puntati

[klubin]

[Risolto] Interlinea degli elenchi puntati

Qualcuno sa come si può aumentare l'interlinea negli elenchi elenchi puntati tramite css?

cioe' vorrei aumentare lo spazio che intercorre tra un punto e l'altro, utilizzando una pagina css esterna....

Grazie

[laburno]

Ciao kublin,
Se vuoi aumentare solo lo spazio tra un punto e l'altro basta applicare un margine sugli elementi <li> dell'elenco.

[klubin]

Ciao! Grazie mille!
Che stupido che sono io agivo sugli <ul>

Senti un'altra cosa.... Io ho usato il tag

list-style-image: url('immagine.gif')

per applicare un'immagine all'elenco puntato, solo che ora le immagini mi sembrano non allineate al testo, cioè dovrei "tirare un pò giù" le immaginette, in modo da allinearle al testo.

Conosci qualche tag che mi possa aiutare (sempre via CSS)???

Intanto grazie!

[karedas]

Ciao klubin anche da parte mia

Ti indico una via addizionale.

Partiamo con questo attributo nel css:
[HTML]
li{
background: url('immagini.jpg') no-repeat left 2%;
}[/HTML]

Questo attributo aggiunge uno sfondo al "li" e in particolare la tua gif.
Aggiungiamo "no-repeat" per non far ripetere la stessa immagine e , grazie ai valori successivi, centriamo il nostro "bullet" dove vogliamo.

Puoi usare valori letterali come "top,left,right, bottom" e numerici (px, em, %)

Ciao!

[klubin]

Purtroppo non funziona (provandolo con explorer...)
praticamente mi lascia sia i pallini originali dell'elenco e mi aggiunge le immagini leggermente traslati...

Nel mio CSS ho questo codice:

ul
{
list-style-image: url('immagini/led.gif');
}

li
{
margin-bottom: 25px
}

E mi fa quello che ho bisogno: Immaginetta e aumento dell' interlinea.... tuttavia le immaginette dell'elenco non sono allineate al testo, dovrei farle scendere un po' (le immagini sono quadrate 8x8 e non hanno spazi bianchi)

Grazie son fiducioso che ce la faremo!

[karedas]

Ti lascia i "pallini" perchè li devi disabilitare con: list-style:none;. Mi sono dimenticato che devi aggiungere (invece di margin) un "padding" necessario per distanzare il contenuto dai tuoi pallini e il gioco è fatto :). L'esempio lo puoi vedere anche nel sito che ho in firma ( scusa non cerco di farmi pubblicità è solo per mostrartelo ^^ )

[klubin]

Il codice praticamente come deve essere ?...

[karedas]

Questa sarà la tua lista immagino:
[html]
<ul>
<li>contenuto 1 </li>
<li>contenuto 2</li>
</ul>
[/html]il css sarà questo:
[html]
{
list-style:none;
background: url('immagine.gif') no-repeat left 10%;
}
[/html]Al posto di "left" e "10%" andranno i tuoi valori per impostare l'immagine.
In quel caso si posiziona a sinistra di ogni li e al 10% di distanza dal "top".
Li regolatelo a video come meglio ti sembra.

[klubin]

Con il background non mi funziona....
Son riuscito con questo codice:

li
{
list-style:none;
list-style-image: url('immagini/led.gif'); position:relative;
margin-bottom: 25px;
}

ad ottenere quello che volevo!
In Firefox tutto OK!!! Mentre con explorer rimane identico a prima... cioe' le immaginette leggermente alte rispetto al testo...

[karedas]

In che senso non ti funziona? Di regola funziona. Se ci inserisci un link ( non attivo ^^ ) del sito posso vedere di darti il codice preciso

[klubin]

Inserendo questo codice

li
{
list-style:none;
background: url('immagini/led.gif') no-repeat left 20%;
}

come dici tu mi fa questo:

tyvm.eu/guida_webmarketingA.html

[karedas]

Questo perchè non hai aggiunto il padding al **li **come ti avevo suggerito sopra

Se non dai uno spazio interno giustamente il contenuto si va ad ammassare tutto a sinistra finendo sopra lo sfondo nonchè al tuo "pallino".

Devi mettere così:

[html]
li{
list-style:none;
background: url(immagini/led.gif) no-repeat scroll left 50%;
padding-left:20px;
}
[/html]p.s. Ah attento che l'intero sito è stracolmo di errori XHTML il che non sarebbe un'ottima cosa soprattutto in un 2008

Ti consiglio la pagina del validatore del w3c per scovarli e correggerli poichè spesso molti errori derivano dal documento non corretto.

ciao!

[klubin]

Ci siamo quasi... Praticamente è perfetto se ogni <li> fosse su una riga singola, ma quando il <li> va su più righe, l'immagine mi va in mezzo invece che restare ancorata, all' inizio del <li>....

Guarda qui:

tyvm.eu/guida_webmarketingB.html

PS il sito on line è vecchia versione, ora ho rifatto il template, spero che gli errori siano a posto, poi cmq nel caso cercherò di correggerli, tempo permettendo!

[karedas]

Come valore ti ho messo la percentuale.
Era un esempio il mio tu devi semplicemente usare l'unità di misura e il valore adatto a seconda delle esigenza

Ora prova così e vedrai che ci siamo:
[html]
background: url(immagini/led.gif) no-repeat scroll left 0.5em
[/html]Al posto di quel valore in grassetto che ti ho messo tu puoi usare qualsiasi cosa come ti ho scritto qualche risposta fa:
percentuali, em, pixel, valori letterali (left,top,bottom, right).

Ciao ancora!

[klubin]

Ecco così è perfetto!!!

Forse dovrei studiare i Css.... Non ne capisco molto!

Grazie ancora.