Visualizzazione dei risultati da 1 a 7 su 7

Discussione: lista con immagini

  1. #1

    lista con immagini

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

  2. #2
    Come fa comparire l'immagine delle liste sei scrivi nel css:
    list-style: none; ?
    Dovrai dargli "list-style-image:url(....);"
    Fantasupermegafavolipermeramagicultra irresistibili
    4 10 30 100 1001 personaggi insuperabili fantaincredibili ultraimpossibili iperterribili irresistibili!!!

    "... a quell'età ... bastava un dito per fare la pace ..."
    fotine

  3. #3
    Per capirsi... prova a fare una cosa simile...
    codice:
    li {
    	height: 40px;
    	line-height: 40px;
    	list-style-image: url(/img/ico_lista.gif);
    }
    Fantasupermegafavolipermeramagicultra irresistibili
    4 10 30 100 1001 personaggi insuperabili fantaincredibili ultraimpossibili iperterribili irresistibili!!!

    "... a quell'età ... bastava un dito per fare la pace ..."
    fotine

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

  5. #5
    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.
    Fantasupermegafavolipermeramagicultra irresistibili
    4 10 30 100 1001 personaggi insuperabili fantaincredibili ultraimpossibili iperterribili irresistibili!!!

    "... a quell'età ... bastava un dito per fare la pace ..."
    fotine

  6. #6
    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:
    Immagini allegate Immagini allegate

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

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.