Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 16
  1. #1

    Come creare Liste con voci Annidate E Numerate come su Wikipedia

    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

  2. #2
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,064
    Quote Originariamente inviata da Handerson Visualizza il messaggio
    La difficoltà è che non riesco a gestire correttamente il progressivo dei numeri all'interno delle voci annidate.
    in che senso? fai un'esempio

    edit
    concettualmente sono liste annidate, spiega il tuo problema
    Ultima modifica di Vincent.Zeno; 03-04-2019 a 12:01

  3. #3
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    in che senso? fai un'esempio

    edit
    concettualmente sono liste annidate, spiega il tuo problema
    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
    Immagini allegate Immagini allegate

  4. #4
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,064
    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>

  5. #5
    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

  6. #6
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,064
    Quote Originariamente inviata da Handerson Visualizza il messaggio
    Non c'è proprio nulla che possa automatizzare la gestione di queste liste?
    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.

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,315
    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
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  8. #8
    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

  9. #9
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    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
    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

  10. #10
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,064
    l'esempio chiaro e funzionante sta qui
    http://jsfiddle.net/qGCUk/4/

    che il css sia esterno o meno non fa differenza

Tag per questa discussione

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