• User Attivo

    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!


  • Super User

    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!


  • User Attivo

    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!


  • Super User

    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 ^^ )


  • User Attivo

    Il codice praticamente come deve essere ?...


  • Super User

    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. 🙂


  • User Attivo

    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...


  • Super User

    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 🙂


  • User Attivo

    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


  • Super User

    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!


  • User Attivo

    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!


  • Super User

    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!


  • User Attivo

    Ecco così è perfetto!!!

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

    Grazie ancora.