elementi (li) personalizzati manualmente con spaziatura

[KillerWorm]

Mi hai beccato è esattamente questo il mio approccio!

lo è di molti, tranquillo, sei in buona compagnia

ma cosa non meno importante mi ritrovo un codice molto più pulito e semplificato

ti manca solo validarlo

Personalmente avrei pulito un altro bel po' di cose, compresa la logica dei toggle, in modo da averne una sola, ben organizzata e riutilizzabile per i diversi elementi. Al momento invece hai le sezioni che usano lo slide con un loro script, le liste che usano un altro script con altre classi, le icone con i dettagli che ne usano ancora un altro e con altre proprie classi... ma vabbè... piano piano...

Man mano che aggiungerò altro contenuto inizierò a personalizzare e ad applicare anche le altre numerazioni personalizzate.

Non so come ringraziarti buon weekend anche a te!

Attendo di vedere gli sviluppi, buon proseguimento

[jeyjack]

ti manca solo validarlo

Personalmente avrei pulito un altro bel po' di cose, compresa la logica dei toggle, in modo da averne una sola, ben organizzata e riutilizzabile per i diversi elementi. Al momento invece hai le sezioni che usano lo slide con un loro script, le liste che usano un altro script con altre classi, le icone con i dettagli che ne usano ancora un altro e con altre proprie classi... ma vabbè... piano piano...


Attendo di vedere gli sviluppi, buon proseguimento

Si, in realta' questi dettagli li sistemero' nei prossimi giorni con calma. Ho ancora un sacco di contenuti da dover inserire e magari tra una pausa e l'altra mi dedichero' alla pulizia. In ogni modo adottando le <ol> e seguendo i suggerimenti che mi hai dato finora penso che il contenuto che inseriro' in futuro sara' gia' ben piu' ordinato

[jeyjack]

Naggia, credevo di essermela sfangata e invece mi ritrovo nuovamente un problema nell'inserimento delle liste numerate..


Ho provato ad inserire piu' liste numerate per COSMOLOGICAL > Contingency > Koons (simplified) (visibile online)

Per qualche motivo mi compare solo la prima lista A-List, ma tutto il contenuto che inserisco di seguito no. SCREEN

Questo e' il codice:

<li><span class="caret">Koons (simplified)</span>
<ol class="nested A-list">
<div class="spacing"></div>
<div class="subtitle">Mereological Axioms</div>


<li>x is a <div class="tooltip"><b>part of</b><span class="tooltiptext"><b>part of</b> The relation of ‘part of’ is reflexive and anti- symmetric</span></div> y IFF anything that <div class="tooltip"><b>overlaps</b><span class="tooltiptext"><b>overlaps</b> x overlaps y IFF x and y have a part in common</span></div> x overlaps y.
<li>If there is a thing of type F, then there is an aggregate of all such types.
<li>x = y IFF x is a part of y and y is a part of x.
<li>If a whole exists, so do all of its parts.
<li>If all of the parts of a whole exist, so does thewhole.
</ol>
<ol class="nested D-list">
<li>A wholly contingent thing is something thathas no necessary parts. (Def.)
</ol>


<ol class="nested C-list">
<li>A cause and its effect must be distinct (i.e., a cause can’t overlap its effect).
<li>Every wholly contingent thing has a cause.
</ol>
<ol class="nested L-list">
<li>All parts of a necessary thing are necessary.(A4, modal system K)ⓘ
</ol>
<ol class="nested T-list">
<li>If there are any contingent things, then the universe has a cause that is a necessary thing. (L4, C1, L5, A1)
</ol>


<span class="baret"> </span>
<ul class="bested">
<li>Robert Koons, “A New Look at the Cosmological Argument,” <i>American Philosophical Quarterly</i> 34/2 (1997), pp. 193-211. For a similar argument, see John O’Leary Hawthorne and Andrew Cortens, “The Principle of Necessary Reason,” <i>Faith and Philosophy 10/1</i> (1993), pp. 60-67.
</ul>

Dal momento che chiudo l'OL della A-List, il contenuto che segue non compare. Sbaglio qualcosa?

[KillerWorm]

Per qualche motivo mi compare solo la prima lista A-List
[...]
Dal momento che chiudo l'OL della A-List, il contenuto che segue non compare. Sbaglio qualcosa?

Il sistema del toggle che stai usando (relativo alla classe "caret"), consente di gestire solo un elemento, cioè quello che viene subito dopo "caret".
Quindi, i contenuti che seguono, giustamente non compaiono. Stai sbagliando ad usare quel sistema in una struttura del genere. Infatti quel toggle agisce sul primo elemento "nested" che trova.

Puoi risolvere in vari modi. Una soluzione è quella di usare un <div> come contenitore (in cui mettere tutto ciò che deve comparire/nascondersi), quindi attribuire a questo la classe "nested". Ma dovrai aggiustare il css.

Per me la cosa sta diventando troppo pasticciata a questo punto. Più inserisci nuove cose, più ti troverai ad affrontare problematiche non previste. Difficile da seguire se non organizzi meglio una buona base di partenza studiata al dettaglio secondo le caratteristiche che ti serve avere

[jeyjack]

Il sistema del toggle che stai usando (relativo alla classe "caret"), consente di gestire solo un elemento, cioè quello che viene subito dopo "caret".
Quindi, i contenuti che seguono, giustamente non compaiono. Stai sbagliando ad usare quel sistema in una struttura del genere. Infatti quel toggle agisce sul primo elemento "nested" che trova.

Puoi risolvere in vari modi. Una soluzione è quella di usare un <div> come contenitore (in cui mettere tutto ciò che deve comparire/nascondersi), quindi attribuire a questo la classe "nested". Ma dovrai aggiustare il css.

Per me la cosa sta diventando troppo pasticciata a questo punto. Più inserisci nuove cose, più ti troverai ad affrontare problematiche non previste. Difficile da seguire se non organizzi meglio una buona base di partenza studiata al dettaglio secondo le caratteristiche che ti serve avere

Questa e' probabilmente la situazione piu' complicata in cui mi posso trovare, se riuscissi a gestire questa situazione (fargli visualizzare tutto il contenuto) potrei riuscire tranquillamente a portare avanti questo sistema che mi piace troppo e inoltre il grosso e' stato gia' fatto (grazie proprio al tuo aiuto).

Non c'e' un modo per fargli considerare tutti i nested e non solo il primo?
Oppure non c'e' un modo di inserire un elemento unico che segna la fine del contenitore e che usero' solo alla fine di ogni voce?

Ho provato ad inserire tutto il contenuto in un Div, ma poi smette di funzionare la funzione che permette di espandere/comprimere tutto il contenuto

[KillerWorm]

in maniera efficace

E' proprio questo il fatto, per fare le cose bene sarebbe stato necessario impiegare un po' di tempo per una buona progettazione.

Se lo fai per lavoro, avrai sempre gli stessi problemi con tutti i clienti, perché loro non sanno cosa effettivamente c'è dietro una "semplice" modifica. Per questo, a livello professionale, va fatto un progetto facendo firmare e sottoscrivere un contratto, che prevede uno studio di fattibilità e quantifichi l'entità del lavoro in base a quanto si richiede inizialmente. Se poi il committente richiede ulteriori modifiche, il deterrente migliore, in questi casi, è quello di dirgli che va eseguito nuovamente un progetto per quantificare l'entità dei costi, in termini di fattibilità, lavoro, tempo, denaro.

Se lo fai per "favore", il discorso comunque non cambia molto, è opportuno pianificare il tutto prima di buttarsi a capofitto nello sviluppo.

Sia chiaro, i miei vogliono essere solo dei consigli poi ognuno e libero di fare come meglio crede.

Non c'e' un modo per fargli considerare tutti i nested e non solo il primo? Ho provato ad inserire tutto il contenuto in un Div, ma poi smette di funzionare la funzione

Certo, come ti ho indicato, dovresti rivedere il CSS, quindi modificare i selettori per dirgli che il riferimento alla classe "active" (applicata ai ".nested") non è relativa solo ad elementi "ol".

Questa sarebbe la cosa più logica; ogni toggle gestisce un elemento (che sia div o ol o altro).

Quindi, usa un div contenitore, come indicato, applica a questo la classe "nested" e toglila a tutti gli ol che stanno dentro questo div.
Poi modifica questa parte di CSS:

ol:not(.active) + .baret,
ol:not(.active) + .baret + .bested {
    display: none;
}

usando, ad esempio, un selettore generico, così:

*:not(.active) + .baret,
*:not(.active) + .baret + .bested {
    display: none;
}

vedi se va.

Poi, è chiaro, si potrebbe anche intervenire sullo script, magari facendo un ciclo su tutti i "nested" fratelli del "toggle", per dirgli che quel toggle deve gestire più elementi.

Ma ripeto, la cosa a questo punto mi sembra molto aggrovigliata secondo il tuo approccio di sviluppo, mi è difficile seguirti.

Anche tutto il CSS ridondante per le liste con le lettere, si potrebbe semplificare con un unico blocco CSS definendo un attributo "data" e usando quello nel content CSS con la funzione attr() per costruire a dovere gli indicatori della lista; ma forse è inutile dirtelo ora

Fai sapere

[jeyjack]

E' proprio questo il fatto, per fare le cose bene sarebbe stato necessario impiegare un po' di tempo per una buona progettazione.

Se lo fai per lavoro, avrai sempre gli stessi problemi con tutti i clienti, perché loro non sanno cosa effettivamente c'è dietro una "semplice" modifica. Per questo, a livello professionale, va fatto un progetto facendo firmare e sottoscrivere un contratto, che prevede uno studio di fattibilità e quantifichi l'entità del lavoro in base a quanto si richiede inizialmente. Se poi il committente richiede ulteriori modifiche, il deterrente migliore, in questi casi, è quello di dirgli che va eseguito nuovamente un progetto per quantificare l'entità dei costi, in termini di fattibilità, lavoro, tempo, denaro.

Se lo fai per "favore", il discorso comunque non cambia molto, è opportuno pianificare il tutto prima di buttarsi a capofitto nello sviluppo.

Sia chiaro, i miei vogliono essere solo dei consigli poi ognuno e libero di fare come meglio crede.

I consigli quando sono costruttivi sono sempre ben accetti. è un dato di fatto che ho cominciato a programmare da poco e quindi pecco in esperienza, infatti farò molto tesoro di questa esperienza. Principalmente ho lavorato in altri ambiti informatici, mentre sulla programmazione mi sto cimentando sul serio solo da un mese a questa parte. Se fossi già esperto sicuramente non avrei bisogno di gente più navigata come te e probabilmente non sarei finito nel forum di HTML.IT a chiedere aiuto. In questo caso lo sto facendo per un amico degli Stati Uniti, avrai notato che il contenuto è tutto in inglese. Mi farà un regalino a fine sito per il tempo che gli ho dedicato. Ho già un lavoro, ma in futuro non mi dispiacerebbe arrotondare con qualche sito visto che ho già partita IVA e che ho molti contatti. Magari in quel caso, mi farebbe comodo trovare un socio in affari esperto come te che mi aiuti nelle parti in cui sono più arrugginito. Se posso farti una domanda personale, tu programmi per mestiere o solo come passione personale?

Certo, come ti ho indicato, dovresti rivedere il CSS, quindi modificare i selettori per dirgli che il riferimento alla classe "active" (applicata ai ".nested") non è relativa solo ad elementi "ol".

Questa sarebbe la cosa più logica; ogni toggle gestisce un elemento (che sia div o ol o altro).

Quindi, usa un div contenitore, come indicato, applica a questo la classe "nested" e toglila a tutti gli ol che stanno dentro questo div.
Poi modifica questa parte di CSS:

ol:not(.active) + .baret,
ol:not(.active) + .baret + .bested {
    display: none;
}

usando, ad esempio, un selettore generico, così:

*:not(.active) + .baret,
*:not(.active) + .baret + .bested {
    display: none;
}

vedi se va.

Poi, è chiaro, si potrebbe anche intervenire sullo script, magari facendo un ciclo su tutti i "nested" fratelli del "toggle", per dirgli che quel toggle deve gestire più elementi.

Ma ripeto, la cosa a questo punto mi sembra molto aggrovigliata secondo il tuo approccio di sviluppo, mi è difficile seguirti.

Anche tutto il CSS ridondante per le liste con le lettere, si potrebbe semplificare con un unico blocco CSS definendo un attributo "data" e usando quello nel content CSS con la funzione attr() per costruire a dovere gli indicatori della lista; ma forse è inutile dirtelo ora

Fai sapere

Inutile dire che seguendo i tuoi consigli sono riuscito a risolvere.. Mi mancava la correzione della parte CSS. Quando mi parli di fare cicli su "nested" o intervenire sulla javascript ti dico con tutta sincerità che sono quasi a 0 di javascript, quindi al momento mi accontento del fatto che il sito stia funzionando Grazie ancora per il tuo supporto, spero di non doverti più dare fastidio, anche se il forum in fondo serve anche per questo

[KillerWorm]

mentre sulla programmazione mi sto cimentando sul serio solo da un mese a questa parte

Bene, in tal caso il mio consiglio resta quello di lavorare maggiormente sulla fase preliminare della progettazione prima di buttarti sullo sviluppo; come già detto, una buona progettazione ti eviterà molte di quelle rogne durante lo sviluppo (non tutte, ma molte)

Magari in quel caso, mi farebbe comodo trovare un socio in affari esperto come te che mi aiuti nelle parti in cui sono più arrugginito. Se posso farti una domanda personale, tu programmi per mestiere o solo come passione personale?

Per un periodo l'ho fatto come freelance per lavoro, poi ho lasciato perdere per dedicarmi ad altro e avere meno mal di testa. Ora lo faccio più che altro per passione. Oggi posso dare qualche consiglio sui forum ma molto difficilmente mi ci dedicherei per mestiere.

Grazie ancora per il tuo supporto, spero di non doverti più dare fastidio, anche se il forum in fondo serve anche per questo

Nessun fastidio, figurati. Hai detto bene, il forum esiste per questo; male che vada, lascio che intervenga qualcun altro

Per ora buon proseguimento