Visualizzazione risultati 1 fino 5 di 5

Discussione: Allineamento lista <ul> in un div con float

  1. #1
    Guest

    Predefinito Allineamento lista <ul> in un div con float

    Ragazzi ho un problema, mi sto sbattendo per ottimizzare il sito per tutti i browser, ma non riesco bene ancora.

    Allora, ho una lista di elementi contenuti in un div con float:left;

    Il css è questo:
    Codice:
    div.menu {
    width: 140px;
    float:left;
    }
    Mentre il sorgetne html è questo:
    Codice HTML:
    <div class="menu">
    <div class="content" style="margin-left: 10px;">
    <div class="content_general">
    <i class="box_content_border_left c"><i></i><b></b></i>
    <i class="box_content_border_right c"><i></i><b></b></i>
    <i class="box_content_border_bottom_left c"><i></i><b></b></i>
    <i class="box_content_border_bottom_right c"><i></i><b></b></i>
    <div class="content_box">
    <div class="name_content_box">
    <span class="name">Men&ugrave;</span>
    </div>
    <ul>
    <li class="Index active"><a href="Index"><b>Index</b></a></li>
    <li class="About"><a href="About"><b>About</b></a></li>
    <li class="Contact"><a href="Contact"><b>Contact</b></a></li>
    <li class="Portfolio"><a href="Portfolio"><b>Portfolio</b></a></li>
    <li class="Artfolio"><a href="Artfolio"><b>Artfolio</b></a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    Il menù si vede in IE così:


    Mentre con Firefox così:


    Quindi come posso fare che la distanza dall'alto sia uguale per tutti e due i browser (prendendo come riferimento quello di IE) e che il primo elemento index si veda allineato come gli altri?

    Grazie in anticipo


    PS: Pagina esemplificativa nel mio sito.

  2. #2
    L'avatar di saitfainder
    saitfainder non è connesso Sëniör Stäff
    Data registrazione
    06-12-2002
    Residenza
    Torino
    Messaggi
    8,715

    Predefinito

    Devi scrivere esplicitamente il valore del margine sinistro di ul e li.


    «È una mia peculiarità distorcere la verità e inventarne di nuove.»
    «I tuoi orientamenti hanno su di me un effetto prossimo allo zero.»


  3. #3
    Guest

    Predefinito

    ho sbagliato a postare, scusatemi, io utilizzo questo codice:

    Codice:
    div.menu {
    width: 140px;
    float:left;
    }
    div.menu ul{
    display: inline;
    list-style-position: inside;
    }
    div.menu ul li {
    list-style: none;
    margin: 5px 0 0 0;
    }
    div.menu ul li.active a {
    color: #cc1144;
    }
    E l'ho modificato così:
    Codice:
    div.menu {
    width: 150px;
    float:left;
    }
    div.menu ul{
    display: inline;
    list-style-position: inside;
    margin-left: 0px;
    margin-top: 0px;
    }
    div.menu ul li {
    list-style: none;
    margin-top: 5px;
    margin-left: 0px;
    }
    div.menu ul li.active a {
    color: #cc1144;
    }
    Però in mozilla lo spazio dall'alto è sempre troppo rispetto ad IE (che è come vorrei).

    Grazie

  4. #4
    L'avatar di saitfainder
    saitfainder non è connesso Sëniör Stäff
    Data registrazione
    06-12-2002
    Residenza
    Torino
    Messaggi
    8,715

    Predefinito

    Specifica anche i padding. Perché rendi l'<ul> un elemento inline?


    «È una mia peculiarità distorcere la verità e inventarne di nuove.»
    «I tuoi orientamenti hanno su di me un effetto prossimo allo zero.»


  5. #5
    Guest

    Predefinito

    Ho risolto, lo spazio da sinistra per IE è maggiore ma poco mi interessa, ormai sta morendo sto browser

    Forse ho sbagliato a metterlo li, magari ho confuso classe!
    L'ho eliminato, grazie ancora saitfander

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •