Menù multicolonna

calabria

Menù multicolonna

Ciao Ragazzi
mi sto cimentando nei css ed ho esigenza di creare un menù con 4 voci di menù a colonna e con 3 colonne tipo questo:

Voce 1 Voce 5
Voce 2 Voce 6
Voce 3 Voce 7
Voce 4 Voce 8

nelle mie conoscenze faccio questo utilizzando il comando <li> ma dopo il quarto ovviamente non torna a capo a continua allargando la cella. Come devo fare? Creare delle celle di colonne?

taiku

Io la risolverei creando diversi contenitori affiancati, conteneti ciascuno una colonna di menu.

bonzoo

Prova a mettere tutto dentro ad un div con un altezza fissa

jantima

Se, per esempio la cella div che contiene la lista e' larga 200 pixel, e ogni elemento <li> e' largo 100 pixel, e li metti dispay: inline, ti dovrebbe allineare due alla volta.

karedas

Ciao Calabria

Oppure crei semplicemente più elementi di liste ordinate:
[html]
<ul>
<li>voce 1</li>
<li>voce 2</li>
<li>voce 3</li>
<li>voce 4</li>
</ul>
<ul>
<li>voce 5</li>
<li>voce 6</li>
<li>voce 7</li>
<li>voce 8</li>
</ul>
[/html]Al tag ul attribuisci una larghezza fissa e, se la loro somma non vuoi che superi una certa grandezza, racchiudi il tutto da un div a larghezza fissa. Proprio come ti hanno suggerito poco sopra.

Il problema nell'inserire una larghezza fissa al tag li come ti hanno invece suggerito sopra è poco attuabile.
Se ad esempio vogliamo una lista unica (quindi con un solo elemento "<ul></ul>") le nostre voci avranno due scelte:

o estendersi comunque sempre in verticale senza considerare il loro contenitore.
affiancarsi l'una accanto all'altra tramite attributi di float o display:inline.
Questo fatto però pone in causa la problematica che non ci sarà un ordine come da te scelto (quindi ogni 4 voci) ma si affiancheranno l'una accanto all'altra fintanto esse troveranno posto nel contenitore che le contiene.
Quindi visivamente verrebbe una cosa simile:

voce 1 - voce 2 - voce 3
voce 4 - voce 5 - voce 6
voce 7 - voce 8 - voce 9

Ciao!

karedas

Ciao Calabria

Oppure crei tre elementi affiancati di tipologia lista ordinata:
[html]
<ul>
<li>voce 1</li>
<li>voce 2</li>
<li>voce 3</li>
<li>voce 4</li>
</ul>
<ul>
<li>voce 5</li>
<li>voce 6</li>
<li>voce 7</li>
<li>voce 8</li>
</ul>
[/html]Al tag ul attribuisci una larghezza fissa e, se la loro somma non vuoi che superi una certa grandezza, racchiudi il tutto da un div a larghezza fissa. Proprio come ti hanno suggerito poco sopra.

Il problema nell'inserire una larghezza fissa al tag li come ti hanno invece suggerito sopra è poco attuabile.
Se ad esempio vogliamo una lista unica (quindi con un solo elemento "<ul></ul>") le nostre voci avranno due scelte:

o estendersi comunque sempre in verticale senza considerare il loro contenitore.
affiancarsi l'una accanto all'altra tramite attributi di float o display:inline. Questo fatto però pone in causa la problematica che non ci sarà un ordine come da te scelto (quindi ogni 4 voci) ma si affiancheranno l'una accanto all'altra fintanto esse troveranno posto nel contenitore che le contiene.
Quindi visivamente verrebbe una cosa simile:

voce 1 - voce 2 - voce 3
voce 4 - voce 5 - voce 6
voce 7 - voce 8 - voce 9

Ciao!

misterwo

male che vada dai una larghezza alla ul e fai flottare le tue li...