Visualizzazione dei risultati da 1 a 7 su 7

Discussione: Allineare icona e testo nel dropdown men¨

  1. #1

    Allineare icona e testo nel dropdown men¨

    Vorrei allineare delle icone (nel mio caso non sono propriamente .ico ma .png di 32x32 ppi) ai vari <a> del mio men¨.

    Facendo varie prove potrei anche dire di esser riuscito nel mio intento, il problema Ŕ che l'icona va a sovrapporsi all'<a> il quale rimane li senza dagli spazio.

    Questa Ŕ un'immagine del men¨ con un'icona appena inserita e senza modifiche:


    8OCIL9v.jpg


    codice HTML:
    <nav>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="#">REGIONI</a>
                    <ul>
                        <li><a href="#">NORD</a>
                            <ul>
                                <li><a href="regioni/emiliaromagna/emiliaromagna.html"><img class="region" src="images/icons/emiliaromagna2.png">EMILIAROMAGNA</a></li>
                                <li><a href="regioni/friuli/friuli.html">FRIULI</a></li>
                                <li><a href="regioni/liguria/liguria.html">LIGURIA</a></li>
                                <li><a href="regioni/lombardia/lombardia.html">LOMBARDIA</a></li>
                                <li><a href="regioni/piemonte/piemonte.html">PIEMONTE</a></li>
                                <li><a href="regioni/trentino/trentino.html">TRENTINO</a></li>
                                <li><a href="regioni/valledaosta/valledaosta.html">VALLE D'AOSTA</a></li>
                                <li><a href="regioni/veneto/veneto.html">VENETO</a></li>
                            </ul>
                        </li>

    codice:
    nav {
        margin: 0;
        background-color: #3777BD;
        font-family: 'Times New Roman', sans-serif;
        color: #FFFFFF;
        font-size: 25px;
        font-weight: bold;
        text-shadow: 1px 1px lightgray;
        letter-spacing: 5px;
    }
    
    nav ul {
        padding: 0;
        margin: 0;
        position: relative;
        list-style-type: none;
        z-index: 999;
    }
    
    nav ul li {
        margin: 0 -7px 0 0;
        display: inline-block;
        background-color: #3777BD;
    }
    
    nav a {
        display: block;
        padding: 0 20px;
        color: #FFFFFF;
        font-size: 20px;
        line-height: 60px;
        text-decoration: none;
        border-bottom: 4px solid #FBFFCE;
    }
    
    nav a:hover, nav a:focus {
        background-color: #84C945;
        border-bottom: 4px solid #3777BD;
        transition: background-color .5s ease-in-out, border-bottom .5s ease-in-out;
    }
    
    nav ul ul {
        display: none;
        position: absolute;
        top: 100%;
    }
    
    nav ul ul a {
        border-bottom: none;
    }
    
    nav ul li:hover > ul {
        display: inherit;
    }
    
    nav ul ul li {
        min-width: 170px;
        display: list-item;
        position: relative;
    }
    
    nav ul ul ul {
        position: absolute;
        top: 0;
        left: 100%;
    }

    Ci tengo a precisare che non Ŕ che appena incontro un problema vengo subito qui a chiedere aiuto eh, Ŕ da ieri che sto cercando su Google senza esser riuscito a trovare una soluzione adatta al mio problema. La maggior parte dei Web Designers preferisce usare, giustamente, le icone AwsomeFonts o Bootstrap che, credo, vadano gestite diversamente da un file immagine. Altra cosa Ŕ che molti siti si spiegano come gestire le icone ma all'interno di CMS come WordPress che a me al momento non serve.

    HELP!
    Devo pensarci...

  2. #2
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    18,350
    'sta mania di fornire codice incompleto...

    prova cosý
    codice:
    css:
    img.region {float:left; width:50px; height:50px}
    /* dove height corrisponde all'altezza di li */
    
    html:
    <li><img class="region" src="images/icons/emiliaromagna2.png" ><a href="regioni/emiliaromagna/emiliaromagna.html" >EMILIAROMAGNA</a></li>

  3. #3
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    'sta mania di fornire codice incompleto...
    VabŔ dai ho solo postato il CSS del men¨, il topic Ŕ su quello

    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    prova cosý
    codice:
    css:
    img.region {float:left; width:50px; height:50px}
    /* dove height corrisponde all'altezza di li */
    
    html:
    <li><img class="region" src="images/icons/emiliaromagna2.png" ><a href="regioni/emiliaromagna/emiliaromagna.html" >EMILIAROMAGNA</a></li>
    Ehm no, mi sa che non funziona:


    Ultima modifica di Utonto Tonto; 19-01-2018 a 16:15
    Devo pensarci...

  4. #4
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    18,350
    mi riferivo all'incompletezza dell'html: per testare copio/incollo il tuo esempio, ma se devo completare il codice Ŕ uno sforzo in pi¨ e non so nemmeno se hai sbagliato altre cose che non hai riportato.

    comunque funziona.
    devi fare attenzione alla dimensione in larghezza della voce di men¨: se la somma della larghezza dell'immagine e del testo supera la larghezza della voce, i contenuti vanno comunque a capo.

  5. #5
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    mi riferivo all'incompletezza dell'html: per testare copio/incollo il tuo esempio, ma se devo completare il codice Ŕ uno sforzo in pi¨ e non so nemmeno se hai sbagliato altre cose che non hai riportato.
    codice HTML:
    <nav>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="#">REGIONI</a>
                    <ul>
                        <li><a href="#">NORD</a>
                            <ul>
                                <li><img class="region" src="images/icons/emiliaromagna2.png"><a href="regioni/emiliaromagna/emiliaromagna.html">EMILIAROMAGNA</a></li>
                                <li><a href="regioni/friuli/friuli.html">FRIULI</a></li>
                                <li><a href="regioni/liguria/liguria.html">LIGURIA</a></li>
                                <li><a href="regioni/lombardia/lombardia.html">LOMBARDIA</a></li>
                                <li><a href="regioni/piemonte/piemonte.html">PIEMONTE</a></li>
                                <li><a href="regioni/trentino/trentino.html">TRENTINO</a></li>
                                <li><a href="regioni/valledaosta/valledaosta.html">VALLE D'AOSTA</a></li>
                                <li><a href="regioni/veneto/veneto.html">VENETO</a></li>
                            </ul>
                        </li>
                        <li><a href="#">CENTRO</a>
                            <ul>
                                <li><a href="regioni/lazio/lazio.html">LAZIO</a></li>
                                <li><a href="regioni/marche/marche.html">MARCHE</a></li>
                                <li><a href="regioni/toscana/toscana.html">TOSCANA</a></li>
                                <li><a href="regioni/umbria/umbria.html">UMBRIA</a></li>
                            </ul>
                        </li>
                        <li><a href="#">SUD</a>
                            <ul>
                                <li><a href="regioni/abruzzo/abruzzo.html">ABRUZZO</a></li>
                                <li><a href="regioni/basilicata/basilicata.html">BASILICATA</a></li>
                                <li><a href="regioni/calabria/calabria.html">CALABRIA</a></li>
                                <li><a href="regioni/campania/campania.html">CAMPANIA</a></li>
                                <li><a href="regioni/molise/molise.html">MOLISE</a></li>
                                <li><a href="regioni/puglia/puglia.html">PUGLIA</a></li>
                                <li><a href="regioni/sardegna/sardegna.html">SARDEGNA</a></li>
                                <li><a href="regioni/sicilia/sicilia.html">SICILIA</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    comunque funziona.
    devi fare attenzione alla dimensione in larghezza della voce di men¨: se la somma della larghezza dell'immagine e del testo supera la larghezza della voce, i contenuti vanno comunque a capo.
    Hai ragione, funziona. Il problema Ŕ che il risultato non Ŕ un granchÚ, l'immagine e l'anchor sono troppo vicini, non c'Ŕ un altro modo?
    Devo pensarci...

  6. #6
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    18,350
    Quote Originariamente inviata da Utonto Tonto Visualizza il messaggio
    l'immagine e l'anchor sono troppo vicini...
    distanziali
    metti un margine a dx dell'immagine

    non serviva "tutto il menu", bastava che postassi i vari tag correttamente chiusi

  7. #7
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    distanziali
    metti un margine a dx dell'immagine
    Vero, grazie Vincent!
    Devo pensarci...

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 © 2018 vBulletin Solutions, Inc. All rights reserved.