allineamento liste parallele

[rab]

Salve a tutti.
Sono bloccato su un problema che mi sta facendo perdere la testa e non trovo soluzione al tutto.
Dovrei creare due menu formati da liste, entrambi verticali, ma uno (quello a sinistra) con un solo link per elemento della lista e l'altro (quello a destra) con piu' link per ogni elemento; a creare le due liste non ho grossi problemi, ma il problema grosso sta nel riuscire ad allinearle perche' l'unico modo che conosco e' attraverso il "display: block", ma se imposto quel parametro ogni link viene considerato come se fosse una riga a se stante.
Qualcuno ha qualche idea di come poter risolvere?

potete vedere quello che ottengo qui: http://www.giannimazzotta.it/various/test/index.html

Quello segnato come "riga1" dovrebbero essere appunto sulla stessa (sulla prima) riga


help help help!

[Mich_]

Non ho capito se si tratta di un unico menu a due livelli, o di due menu, di cui uno ad un livello e l'altro a due.

In ogni modo ci sono molti menu gia` pronti che si pososno copiare e modificare: dovresti vedere tra le raccolte.
Alcuni riferimenti sono presenti tra i "link utili" del forum (a me piace come sono organizzati i menu di CSSplay), altri li trovi mediante ricerca in rete.

[rab]

son due menu' separati...uno a singolo livello (sinistra) e uno a doppio livello - orizzontale e verticale (destra).
Di menu' gia' fatti ne ho sfogliati a bizeffe ma nessuno che facesse al mio caso...e sopratutto il problema e' per l'allineamento e non per il menu' in se per se
Vorrei farli a mano perche' poi vorrei usare dei metodi jquery (accordion e show/hide) in base a come lo usero'

[Mich_]

Se dai le stesse dimensioni ai blocchi restano della stessa altezza.
Chiaramente devi dare le stesse dimensioni ai corrispondenti blocchi dei due menu, ma questo non e` un problema difficile, potrebbe essere un po' complesso trovare il punto giusto.

Come avrai notato dai menu pronti, per affiancare i blocchi si deve usare il float.

Puoi benissimo farli "a mano", copiando le buone idee che trovi in giro: e` cosi` che si impara.


Per il jquery o sim: io sono contrario ai menu che utilizzano JS: ci sono brwoser in cui sono disabilitati o non attivi, e i menu in JS impediscono la normale navigazione.

[rab]

Le altezze delle singole righe le ho settatate tramite "height"...posto un paio di screenshot che magari risulta piu' chiaro il tutto

#menu2
{
	float:left;
	border:1px solid #000;
	width: 49%;
	margin: 0;
	padding:0;
	height:300px;
	margin-top:17px;
}

#menu2 ul
{
	list-style: none;
	text-align: left;
}

#menu2 li
{
	margin: 0;
	padding: 0;
}

#menu2 a {
	font-size: 10pt;
	text-decoration: none;
	outline: none;
	padding: 0;
	border:1px solid #000;
	height:15px;
	
}	
	
#menu2  a:link, #menu2  a:visited {
	color: #c4c4c4;
	outline: none;
	display:block;
}
	
#menu2  a:hover {
	color: #8f8e8e;
	outline: none;
}

con questo css il risultato e' questo:



Le righe son allineate...ma ho 1 solo link per ogni riga (sulla sx - tutti i vari link con riga1 dovrebbero essere sulla stessa riga e senza ritorno a capo)

se disabilito il "display:block;" quello che ottengo e' questo:

risolvo il problema del primo caso ma le righe hanno uno spazio che mi fa perdere l'allineatura...

[Mich_]

Ma perche` ti diverti a fare prove senza costrutto.

Nessuno ti ha detto di usare un display:inline.
E nssuno ti ha detto di affiancare dei link senza un[*] in mezzo.

Non puoi inventare i menu senza un minimo di esperienza. DEVI COPIARLI da qualcuno che li ha gia` fatti.

I blocchi devono rimanere blocchi, e vanno affiancati tramite il float

[rab]

Originariamente inviato da Mich_
Ma perche` ti diverti a fare prove senza costrutto.

Nessuno ti ha detto di usare un display:inline.
E nssuno ti ha detto di affiancare dei link senza un[*] in mezzo.

Non puoi inventare i menu senza un minimo di esperienza. DEVI COPIARLI da qualcuno che li ha gia` fatti.

I blocchi devono rimanere blocchi, e vanno affiancati tramite il float

Perdonami mich_, ma quello che ho scritto una provenienza ce l'ha e ho provveduto a modificare un po' il codice a seconda della mia esigenza visto che nonostante numerose ricerche non sono riuscito a trovare un menu' come serve a me; ma ti chiedo...il codice che ho scritto l'hai letto?
Senza fare troppe ricerche, copia-incolla, etc., a me farebbe piacere capire in cosa sto sbagliando

[Mich_]

Io non ho visto codice intelligibile postato qui. Un CSS senza HTML e` inutile.

Ho visto la pagina, ed ho visto un menu fatto con i tag errati.
E ho letto cose come <<se disabilito il "display:block;" ...>> che mi dicono che non hai usato i tag[*] per il menu.

[rab]

nuovamente buongiorno!
Ho cercato di seguire il tuo consiglio e rifare i menu', ma continuo ad avere lo stesso problema
Copio quindi l'intero codice css e html nella speranza di arrivare a qualcosa...

<div class="menu">
	<div id="menu1">
		<ul>
			[*]<div id="port">Portfolio</div>

			<ul>

    			[*]Portraits &amp; People
			[*]Fashion &amp; Lifestyle
			[*]Still life
			[*]12345[*]Interiors
			[*]Advertising
			[*]Documentary
			[*] 
			[/list]
			
			<li ><div id="contacts">Contacts</div>

		[/list]
		</div>
		<div id="menu2">
		<ul>
			[*]
			<ul>
			[*]1[*]2[*]3[*]4[/list]
			
			[*]
			<ul>
			[*]1[*]2[*]3[*]4
			[/list]
			[*]
			<ul>
			[*]1[*]2[*]3[*]4
			[/list]
			
			[*]
			<ul>[*]1[*]2[*]3[*]4
			[/list]
			
			[*]
			<ul>
			[*]1[*]2[*]3[*]4
			[/list]
			
			[*]
			<ul>
			[*]1[*]2[*]3[*]4
			[/list]
			
			[/list]
		</div>
	</div>

e relativo css

.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;
}

Spero di essere stato piu' completo questa volta e spero in un vostro aiuto