Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Affiancare li con posizionamento assoluto

    Ciao!
    Chiedo il vostro aiuto perchè sto letteralmente impazzendo.
    Sto costruendo un semplice menu a 2 livelli orizzontale con il classico scheletro xhtml:

    codice:
    	        		<ul class="nav-list">
    	        			[*]Homepage
    	        			[*]La Scuola
    	        				<ul>
    	        					[*]Prova 1
    	        					[*]Prova 2
    	        					[*]Prova 1
    	        				[/list]
    	        			
    	        			[*]La Storia
    	        		[/list]
    Il problema si presenta quando vado a dare il posizionamento assoluto al UL figlio per poterlo mettere sotto quello padre. Infatti in questo modo perdo l'utilità del float e tutti gli elenchi figli vengono visualizzati uno sotto l'altro. Quindi secondo voi come faccio a mettere tutto orizzontalmente?

    Ecco il css in questione:

    codice:
     
    ul.nav-list li {
    	float:left;
    	text-align:center;
    	list-style: none;
    	position:relative;
    }
    
    ul.nav-list li a {
    	display: block;
    	width:90px;
    	height:30px;
    	line-height:30px;
    	color:#FFFFFF;
    	text-decoration:none;
    	font-weight:bold;
    	
    }
    
    ul.nav-list li a:hover {
    	background: url(../immagini/layout/bg_navbar_link-hover.gif) repeat-x center bottom;
    }
    
    ul.nav-list ul {
    	position:absolute;
    	top:30px;	
    	left:-45px;
    }

    Ho anche uppato tutto all'indirizzo: http://inverter.ilbello.com/canopoleno/

    Grazie mille!
    http://www.sanpaolosassari.it
    Il panino più buono è quello più grande

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Ti mancano un po` di stili per il sottomenu.

    Ad esempio prova con:
    codice:
    ul.nav-list ul {
    	position:absolute;
    	top:2em;	
    	left:-45px;
    	width: 40em;
    	height: 2em;
    }
    ul.nav-list ul li {
    	float; left;
    	display: inline;		/* pleonastico - serve per correggere un baco di IE */
    	width: 9em;
    	height: 100%;
    }
    ul.nav-list ul li a {
    	display: block;
    	width: 100%;
    	height: 100%;
    }
    le misure sono da sistemare: i miei sono valori approssimativi.
    Nota che in questi casi e` meglio usare dimensioni in em, dato che le dim. in px possono portare a sovarapposizioni o a spazi non voluti.

    E ricorda ceh ci sono ottimi esempi di menu di tutti i tipi: tra i "link utili" ci sono alcuni riferimenti - a me piace il sito di CSSplay (il tuo e` un menu orizzontale a due livelli)
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Scusa se ti rispondo così tardi ma sono stato molto impegnato.
    Comunque ti devo la mia salute mentale perchè grazie ai tuoi consigli sono riuscito a finire il menu ottimizzando anche il codice javascript.
    Ora è ok..!

    Grazie
    http://www.sanpaolosassari.it
    Il panino più buono è quello più grande

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