- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Problema allinamento liste ordinate
-
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:.menu { width: 100%; height: 100%; border: 1px dashed #000; } #menu1 { float:left; border:1px solid; width: 250px; height:300px; } ul { list-style: none; text-align: right; } li a { font-size: 10pt; text-decoration: none; outline: none; border:1px solid; height:15px; } li a:link, li a:visited { color: #c4c4c4; display: block; outline: none; } li a:hover { color: #8f8e8e; outline: none; } .contacts { margin: 0; padding: 0; padding-right: 190px; margin-top:-4px; font-size: 10pt; text-decoration: none; color:; float:right; text-align: left; } #menu2 { float:left; border:1px solid; margin: 0; padding:0; height:300px; display:inline; } ul { list-style: none; text-align: left; margin:0; padding:0; } li { margin: 0; padding: 0; display: inline; } a { font-size: 10pt; text-decoration: none; outline: none; padding: 0; border:1px solid; height:15px; margin: 0; } li a:link, li a:visited { color:; outline: none; } a:hover { color:; outline: none; }****(ho inserito un border nero su ogni elemento giusto per controllare il posizionamento)
mentre l'html e' il seguente:<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 & People</a></li> <li><a href="#" id="sub_fashion">Fashion & 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> </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
-
perdonatemi...ho sbagliato qualcosa e ho aperto il topic due volte...questo puo' essere cancellato.
Grazie