+ Rispondi alla Discussione
Risultati da 1 a 2 di 2

Problema allinamento liste ordinate

Ultimo Messaggio di karedas il:
  1. #1
    rab è offline
    User Newbie
    Data Registrazione
    Sep 2011
    Località
    Bologna
    Messaggi
    2

    Problema allinamento liste ordinate

    Buongiorno a tutti
    Ho un problema su cui sto perdendo la testa da un po' di giorni e non riesco a venirne a capo...
    Ho una pagina semplicissima in html/css, composta da due menu affiancati ottenuti tramite liste (<ul>/<li>).
    Il menu di sinistra (menu1) e' verticale a un livello, mentre il quello si destra (menu2) e' un menu verticale a due livelli con piu' elementi per ogni riga; il menu1 e' quello principale (a slide verticale con effetto accordion di jquery), e, le righe del menu2, tramite appositi jquery, si dovrebbero attivare e comparire solo al click dell'elemento corrispondente (nella stessa posizione verticale) del menu1.

    Il problema che ho, e che non riesco in alcun modo a risolvere, e' l'allineamento dei due menu
    il codice css utilizzato e' il seguente:
    Codice:
    .menu
    {
        width: 100%;
        height: 100%;
        border: 1px dashed #000;
    }
    #menu1
    {
        float:left;
        border:1px solid #000;
        width: 250px;
        height:300px;
    }
    
    #menu1 ul
    {
        list-style: none;
        text-align: right;
    }
    #menu1 li a {
        font-size: 10pt;
        text-decoration: none;
        outline: none;
        border:1px solid #000;
        height:15px;
    }    
        
    #menu1 li a:link, #menu1 li a:visited {
        color: #c4c4c4;
        display: block;
        outline: none;
    }
        
    #menu1 li a:hover {
        color: #8f8e8e;
        outline: none;
    }    
    
    #menu2
    {
        float:left;
        border:1px solid #000;
        
        margin: 0;
        padding:0;
        height:300px;
        display:inline;
    }
    
    #menu2 ul
    {
        list-style: none;
        text-align: left;
        margin:0;
        padding:0;
        
    }
    
    #menu2 li
    {
        margin: 0;
        padding: 0;
        display: inline;
    }
    
    #menu2 a {
        font-size: 10pt;
        text-decoration: none;
        outline: none;
        padding: 0;
        border:1px solid #000;
        height:15px;
        margin: 0;
    }    
        
    #menu2  li a:link, #menu2 li a:visited {
        color: #c4c4c4;
        outline: none;
    
    }
        
    #menu2  a:hover {
        color: #8f8e8e;
        outline: none;
    }
    (ho inserito un border nero su ogni elemento giusto per controllare il posizionamento)
    mentre l'html e' il seguente:
    Codice HTML:
    <div class="menu">
        <div id="menu1">
            <ul>
            <li><a href="#"><div id="port">Portfolio</div></a>
                <ul><br />
                    <li><a href="#" id="sub_portraits">Portraits &amp; People</a></li>
                    <li><a href="#" id="sub_fashion">Fashion &amp; Lifestyle</a></li>
                    <li><a href="#" id="sub_still">Still life</a></li>
                    <li><a href="#" id="sub_still">12345</a></li>
                    <li><a href="#" id="sub_interiors">Interiors</a></li>
                    <li><a href="#" id="sub_advert">Advertising</a></li>
                    <li><a href="#" id="sub_docum">Documentary</a></li>
                    <li> &nbsp;</li>
                </ul>
            </li>
            <li ><a href="#"><div id="contacts">Contacts</div></a></li>
            </ul>
        </div>
        <div id="menu2">
            <ul>    
            <li>
                <ul>
                    <li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li>
                </ul>
            </li>
            </ul>
        </div>
    </div>
    Chiedo quindi gentilmente a voi: come posso risolvere questo problema?
    Grazie a tutti per il momento
    Ultima modifica di rab; 19-09-11 alle 11:26

  2. #2
    User Attivo L'avatar di karedas
    Data Registrazione
    May 2007
    Località
    Impruneta (Firenze)
    Messaggi
    1,102
    Ciao Rab e benvenuto nel forum GT.

    L'allineamento di cui parli intendi quello orizzontale tra la prima voce del menù di sinistra con quello di destra?
    Se in poche parole vuoi eliminare lo spazio che precede la voce "PORTFOLIO" allora devi eliminare il margine di default che ha il tag "UL".

    Ti basterà settare in questo modo:

    Codice:
    ul{
    margin:0;
    }
    In questo modo lo rimuovi ad ogni menù e sottomenù costriuto con le liste non ordinate (ul).

    Oppure attribuisci un id/classe al tag ul che ti interessa e esegui la stessa procedura ma in questo modo:

    es.

    Codice:
    ul#menu_sinistra{
    marigin:0;
    }
    Spero di aver capito
    Easysystem- Software and hardware solutions

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.