Ciao,
Sto cercando di creare una lista simile a quella che normalmente troviamo in una qualsiasi pagina di wikipedia:
Esempio
Lista contenuti della pagina
1. Contenuto abc
2. Contenuto abc
2.1 Contenuto abc
2.1.1 Contenuto abc
2.1.2 Contenuto abc
2.2 Contenuto abc
3. Contenuto abc
3.1 Contenuto abc
ecc...
La difficoltà è che non riesco a gestire correttamente il progressivo dei numeri all'interno delle voci annidate.
Qualcuno di voi ha una soluzione in merito?
Grazie
in che senso? fai un'esempioOriginariamente inviata da Handerson
edit
concettualmente sono liste annidate, spiega il tuo problema
Ultima modifica di Vincent.Zeno; 03-04-2019 a 12:01
Ho inserito in allegato la lista wikipedia che vorrei essere in grado di riprodurre. Spero si capisca ora quello che voglio ottenere.
Come vedi le voci annidate mantengono un progressivo numerico corretto. Io non riesco a capire come realizzare quella lista in HTML. Quello che mi viene fuori è un lista con numeri che ripartono da 1 nel caso delle voci annidate.
Grazie
ho capito che stai usando liste ordinate (ol), devi usare invece le liste non ordinate (ul) e assegnare tu la numerazione apparente.
qui un esempio proprio come da wikipedia:
codice:<ul> <li class="toclevel-1 tocsection-1"><a href="#Etimologia"><span class="tocnumber">1</span> <span class="toctext">Etimologia</span></a></li> <li class="toclevel-1 tocsection-2"><a href="#Storia"><span class="tocnumber">2</span> <span class="toctext">Storia</span></a> <ul> <li class="toclevel-2 tocsection-3"><a href="#Situazione_odierna"><span class="tocnumber">2.1</span> <span class="toctext">Situazione odierna</span></a></li> </ul> </li> <li class="toclevel-1 tocsection-4"><a href="#Note"><span class="tocnumber">3</span> <span class="toctext">Note</span></a></li> <li class="toclevel-1 tocsection-5"><a href="#Voci_correlate"><span class="tocnumber">4</span> <span class="toctext">Voci correlate</span></a></li> </ul>
Grazie Vincent, ti confermo che sto usando ol e non ul. Speravo ci fosse una soluzione che nativamente permettesse di gestire nel modo corretto le numerazioni delle voci annidate e soprattutto senza dover scrivere il numero per ogni singola voce della lista.Non c'è proprio nulla che possa automatizzare la gestione di queste liste? il solo pensiero di doverle numerare a mano mi mette di cattivo umore...
Grazie
solo se gestisci le informazioni dinamicamente, prelevandole la un db.
quindi puoi inventarti l'ordinamento che ti pare, in base a condizioni da te impostate.
Ciao, da qualche semplice ricerca ho trovato questo:
https://stackoverflow.com/questions/...pe-not-working
dove viene data una soluzione con <ol> e un po' di css.
Vedi se può andare bene
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Il risultato che ottengo io non è come il loro esempio e neanche il risultato loro cliccando sul pulsante ron
“Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.
Giovanni Falcone
nel mio caso non posso includere il css nella pagina ma devo richiamarlo da css esterno. In tal caso, stando all'esempio riportato nel link che hai condiviso, come dovrei personalizzare il codice html? Intendo dire, quali sarebbero gli elementi ol e li che dovrebbero essere modificati specificando la classe? (es. <ol class=nome_classe>) Tutti? Solo alcuni della lista?
E poi basterebbe creare 3 classi css per farlo funzionare?
Esempio:
.contenuti-lista ol {
counter-reset: item
}
.contenuti-lista li {
display: block
}
.contenuti-lista li:before {
content: counters(item,".")" ";
counter-increment: item
}
Grazie
l'esempio chiaro e funzionante sta qui
http://jsfiddle.net/qGCUk/4/
che il css sia esterno o meno non fa differenza
Permessi di invio
Rispondi quotando
