Pagina 3 di 3 primaprima 1 2 3
Visualizzazione dei risultati da 21 a 30 su 30
  1. #21
    Scusami, credo di essermi bevuto il cervello.
    Cloudflare mi sta facendo impazzire, anche quando imposto la developer mode non mi aggiorna il CSS in tempo reale, quindi mi fa sembrare alcuni tentativi fallaci e sbagliati, mentre invece erano corretti.

    Ho semplicemente eliminato il div half dal template, e reimpostato il bootstrap a 6, così giusto per riprovare per scrupolo, ed ora MAGICAMENTE il risultato grafico è rimasto identico a quando c'era il div half, con la differenza che ora su mobile si adatta grazie al boostrap. Con questa stessa identica mossa, 48h fa' mi dava tutti i post sul lato sinistro, a mezza pagina. Ora come per magia i post sono su entrambe le colonne. Mi sento un davvero un cretino. Forse dovrei davvero abbandonare cloudflare (che implementai qualche anno fa' perché avevo dei persecutori che mi buttavano giù i siti con attacchi ddos).

    Tuttavia è emerso l'ennesimo problema: per far sì che la homepage da pc visualizzi una griglia di post pulita, ho dovuto precedentemente impostare <article> height su 350px; e tale mossa vedo che causa un problema nella visualizzazione da mobile, dove bootstrap splitta (giustamente) i post per una resa grafica migliore, mettendo immagine del post da sola, e testo del post sotto di essa (mentre su pc immagine e testo sono affiancati): questo fa sì che il limite di altezza post da 350px su visualizzazione mobile mi accavalli i post l'uno sull'altro.

    Allo stesso tempo non posso aumentare l'altezza del post di più pixel perché altrimenti su pc avrei enormi spazi vuoti tra una fila di post e l'altra...

    Quindi siamo alle solite: esiste una condizione per settare nel css l'id postheight a 350px in caso di schermo pc, e su auto, in caso di mobile?
    Scusami per il continuo mal di testa che ti sto creando :"D

  2. #22
    Giusto per dare un'idea visiva: questa è la grafica se non imposto l'altezza dell'articolo: https://images2.imgbox.com/81/10/fD17XO8Q_o.png
    Questo invece è il risultato ottenuto impostando l'altezza a 350px: https://images2.imgbox.com/04/f0/1ZJFLqye_o.png


    EDIT: forse ho trovato la soluzione (non appena il maledettissimo cloudflare si aggiornerà potrò verificare)

    min-height: 350px;
    overflow: hidden;
    Ultima modifica di danielepalmas88; 09-11-2021 a 13:16

  3. #23
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,684
    Scusami, credo di essermi bevuto il cervello.
    Cloudflare mi sta facendo impazzire
    [...]
    Scusami per il continuo mal di testa che ti sto creando :"D
    No problem, capita anche ai più bravi comunque i mal di testa sono dovuti ad altro, anzi, qui di fronte mi rilasso

    Tuttavia è emerso l'ennesimo problema: per far sì che la homepage da pc visualizzi una griglia di post pulita, ho dovuto precedentemente impostare <article> height su 350px;
    Ok, e fin qui c'eravamo già prima.
    e tale mossa vedo che causa un problema nella visualizzazione da mobile, dove bootstrap splitta (giustamente) i post per una resa grafica migliore, mettendo immagine del post da sola, e testo del post sotto di essa (mentre su pc immagine e testo sono affiancati): questo fa sì che il limite di altezza post da 350px su visualizzazione mobile mi accavalli i post l'uno sull'altro.
    [...]
    esiste una condizione per settare nel css l'id postheight a 350px in caso di schermo pc, e su auto, in caso di mobile?
    Bootstrap fa il suo per quanto riguarda le larghezze delle colonne ma per le altezze devi andare di CSS impostando magari qualche media query.

    Giusto per dare un'idea visiva:
    Sì, avevo già notato il problema qualche post fa quando mi hai indicato che avresti dovuto impostare un'altezza fissa.

    Ricalcando la media query bootstrap per il desktop, puoi impostare una cosa del genere:
    codice:
    @media (min-width: 992px) {
        #main article {
            height: 350px;
        }
    }
    Questo fa in modo che 350 sia applicato solo su desktop o maggiori, mentre su dispositivi più piccolo resta "auto" di default.

    Prova e fai sapere.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  4. #24
    Bene, sembra tutto risolto, finalmente!

    Nel CSS ho messo:
    Codice PHP:
     #indexpostheight{min-height:350px;overflow:hidden;} 
    Nell'index ci ho messo:
    Codice PHP:
     <article class="post col-md-6 text-center" id="indexpostheight"
    Dopo 2h aspettando che cloudflare si aggiornasse (ma a quanto vedo è proprio un problema di CSS lento ad aggiornarsi, pure in un dominio senza cloudflare... forse perché il file CSS del template è mastodontico ci impiega tanto ad aggiornarsi, non so)

    Anyway, dopo la lunga attesa noto con sollievo che ho finalmente ottenuto ciò che desideravo: post visualizzati su due colonne, in posizione ottimale su schermo device grande; post riadattato da bootstrap su schermo mobile, senza accavallamenti.

    Ho in seguito - come mi hai suggerito - provato questo metodo:
    Codice PHP:
    @media (min-width992px) {
        
    #main article {
            
    height350px;
        }

    ...ma dopo 1h ancora il CSS non mi dà risultati, credo la causa sia la presenza di altri TANTISSIMI @media nel file CSS, ne ho contati ben 7...che in aggiunta al tuo fornitomi potrebbero entrare in conflitto.
    Quindi credo sia meglio tenere la soluzione che ho trovato, dato che sembra stia fungendo come deve

    Ti ringrazio per l'enorme pazienza, per i consigli, e per gli input che mi hai dato. Non sono un webmaster, e non "costruisco" siti molto spesso, ma negli ultimi 10 anni mi hai dato un aiuto non indifferente in almeno 4 o 5 occasioni, nelle quali ho imparato tanto da te, perché non ti limiti a dare una risposta secca per risolvere rapidamente la domanda del topic, ma aiuti sempre l'utente ad arrivarci da solo, stimolandolo ad usare la testa per capire ciò che sta facendo.
    Ricordo anni fa' chiesi qui consiglio su come aggiungere un bordo alla copertina di un libro, e oltre a spiegarmi soluzioni più avanzate, finisti per produrre questa guida capolavoro https://forum.html.it/forum/showthre...readid=2946408

    Per cui grazie davvero per tutto quello che fai, mettendo gratuitamente le tue immense conoscenze a disposizione degli utenti, e interagendo con pazienza come un vero Maestro!
    Ultima modifica di danielepalmas88; 09-11-2021 a 15:04

  5. #25
    UPDATE: ecco la doccia gelata! Si è riaggiornato il CSS tra ritardi vari e CloudFlare ... ed ecco che la mia soluzione consistente in #indexpostheight{min-height:350px;overflow:hidden;} non funziona più... Su PC l'altezza di 350 minimo non viene assegnata, per qualche strana ragione........

    Con l'ultimo suggerimento che mi hai dato, devo solo inserire quel codice nel CSS, oppure devo pure richiamare altro, tipo fare <article id="
    main article">?

    Ultima modifica di danielepalmas88; 09-11-2021 a 16:33

  6. #26
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,684
    No, aspetta, non ci siamo, penso ti stia perdendo in un bicchier d'acqua

    Premessa:
    Senza offesa ma noto che hai (ancora) delle lacune gravi riguardo il css. Difficile capire e farsi capire quando mancano le basi di utilizzo dello strumento che si sta manovrando. Consiglio, appena hai tempo/possibilità/voglia, di dare una studiata a qualche guida di base CSS.
    Quella su HTML.it mi sembra abbastanza valida e completa: Guida CSS di base
    In particolare è importante comprendere come leggere un selettore CSS, conoscere i selettori e i combinatori, perlomeno i principali, e imparare ad assemblarli per costruire dei selettori più complessi da usare nei propri elaborati.

    Ti ringrazio per l'enorme pazienza
    [...]
    e interagendo con pazienza come un vero Maestro!
    Grazie a te per l'elogio

    Tornando in topic, hai aggiornato il sito online?
    codice:
    #indexpostheight{min-height:350px;overflow:hidden;}
    .
    in questa pagina soluzionieconomiche.com non vedo nessun elemento con id "indexpostheight"; in tal caso avrebbe ragione di non funzionare.

    Bisogna poi capire meglio perché hai usato min-height anziché height.

    Ad ogni modo questa è la parte che dovresti risolvere inserendo (o sostituendolo al tuo) l'ultimo codice che ti ho proposto:
    codice:
    @media (min-width: 992px) {
        #main article {
            height: 350px;
        }
    }
    Il selettore #main article va letto in questo modo: seleziona tutti gli elementi con nome tag article (<article>) che sono discendenti (diretti o non diretti) dell'elemento con id main.

    Gli <article> in quella pagina sono infatti discendenti del <div id="main">, cioè stanno al suo interno anche se non sono figli diretti.

    Possiamo riassumere la struttura HTML della tua pagina, in questo modo:
    codice HTML:
    <div id="main">
    
       <div class="container">
          <div class="row text-center">
             <article class="post col-md-12">
                ...
             </article>    
          </div>
       </div>
       
       <div class="container">
          <div class="row text-center">
             <article class="post col-md-12">
                ...
             </article>    
          </div>
       </div>
       
       <div class="container">
          <div class="row text-center">
             <article class="post col-md-12">
                ...
             </article>    
          </div>
       </div>
       
       <div class="container">
          <div class="row text-center">
             <article class="post col-md-12">
                ...
             </article>    
          </div>
       </div>
       
       <div class="container">
          <div class="row text-center">
             <article class="post col-md-12">
                ...
             </article>    
          </div>
       </div>
       
    </div>
    Ho scelto volutamente di indicare #main per dare maggiore specificità al selettore; il tag <article> infatti potrebbe anche trovarsi in altre sezioni della pagina in cui non si desidera che gli sia applicata tale regola.

    Questa regola funziona così come è senza bisogno di modificare l'HTML; basta aggiungerla al CSS personalizzato o quel che è.

    La classe col-md-6 invece devi aggiungerla nell'HTML ma non devi specificarla per gli <article>, devi invece applicarla ai relativi elementi .container (<div class="container">).

    codice HTML:
       <div class="container col-md-6">
          <div class="row text-center">
             <article class="post col-md-12">
                ...
             </article>   
          </div>
       </div>
    .
    Sono infatti questi div che devono essere dimezzati, in modo che si possano affiancare a due a due all'interno del contenitore principale #main, il quale possiede la larghezza totale del corpo della pagina e ingloba tutti gli elementi contenenti gli <article>.

    Se fossero dimezzati gli <article> li vedresti, sì, dimezzati in larghezza ma, essendo racchiusi dentro un proprio contenitore (<div class="row text-center">), resterebbero sempre impilati uno sopra l'altro perché la loro larghezza fa riferimento a quella data dal loro proprio contenitore, il quale occupa la larghezza intera del corpo della pagina.

    Riguardando i vari nostri post, mi accorgo che questi dettagli li avevo omessi pensando forse che quanto avevo indicato fosse sufficiente. Mi rendo conto però che la mancanza di tali dettagli possa averti spinto fuori strada.

    Spero comunque di non averti confuso maggiormente. Fai nuovamente qualche prova e vedi se la situazione migliora.
    Ultima modifica di KillerWorm; 09-11-2021 a 18:49
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  7. #27
    Sì, scusami davvero, ma come hai intuito non ho nessuna base di studio, per cui talvolta diventa difficile capirci perché anche il più basilare dei concetti che potresti dare per scontato, io potrei non conoscerlo :"D
    Il template che sto utilizzando, l'ho parzialmente copiato e messo da parte 2 anni fa' da un blog francese (che a sua volta lo aveva copiato ad un altro blogger indonesiano) proprio perché aveva già integrata nel codice la fruibilità via mobile in modo adattivo (bootstrap), ma non sarei mai riuscito a crearlo da zero.

    Dunque ti ringrazio per i preziosi suggerimenti, e non appena avrò un po' di tempo e lucidità mentale, proverò sicuramente a studiarmi le guide di CSS che mi hai linkato, perché in effetti un minimo di basi mi toglierebbero le castagne dal fuoco anche solo per capire cosa sto "copiando" da altri siti cui mi ispiro nel costruire il mio.

    SoluzioniEconomiche.com non lo sto usando per i test, perché oltre al CSS enorme di suo, ha pure cloudflare che rallenta di ore ogni piccolo aggiornamento, per cui risulta difficoltoso comprendere ciò che si sta facendo. Per questo motivo non hai trovato traccia dei test recenti (#indexpostheight). In ogni caso, su questo id indexpostheight, stavo provando min-height anziché height, perché mentre con la seconda l'altezza è definita e forzata (quindi in caso di visitatori da mobile i post compariranno sovrapposti) affinché fosse indicata l'altezza minima ovvero ciò che mi serve per chi visualizza da PC, ma che in automatico aumenti in caso di visualizzazione mobile (dove bootstrap riadatta le griglie una sopra l'altra, allungando quindi l'altezza a ben più di 350 pixel). Tuttavia il presunto automatismo di min-height non ha funzionato come avrebbe dovuto, dato che non ha allungato l'altezza in automatico alla necessita (eppure su stackoverflow, nella risposta ad una domanda di qualche anno fa', dicevano avrebbe funzionato).

    In ogni caso, sto continuando a fare i test sul dominio free privo di cloudflare: https://maiale-1025cb.ingress-erytho.easywp.com/

    Sto usando il codice che mi hai dato da inserire nel CSS, e adattato la struttura come da te suggerito, ma vedo che non mi sta applicando i 350px di altezza, neppure così

    codice:
    <div class="container">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div id="main">
    <div class="container col-md-6">
    <div class="row text-center">
    <article class="post col-md-12">
    <h3 class="entry-title widget-title text-center"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
    <br>
    <div class="col-md-4 text-center">
    <a href="<?php the_permalink() ?>"><img style="border-radius: 10px;" src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>" class="img-responsive inblock main-poster"></a>
    </div>                
    <div class="col-md-8 text-justify">
    <table class="table table-condensed table-bordered table-hover">
    <tr><th><i class="icon fa fa-cog"></i> Info 1</th><td><?php echo get_post_meta($post->ID, 'recensione', true); ?></td></tr>
    <tr><th><i class="icon fa fa-cog"></i> Info 2</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
    <tr><th><i class="icon fa fa-cog"></i> Info 3</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
    <tr><th><i class="icon fa fa-cog"></i> Info 4</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
    <tr><th><i class="icon fa fa-cog"></i> Info 5</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
    </table>
    </div>    
    </article>    
    </div>
    </div>
    </div>
    <?php endwhile; ?>
    </div>

  8. #28
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,684
    su questo id indexpostheight, stavo provando min-height anziché height, perché mentre con la seconda l'altezza è definita e forzata (quindi in caso di visitatori da mobile i post compariranno sovrapposti) affinché fosse indicata l'altezza minima ovvero ciò che mi serve per chi visualizza da PC, ma che in automatico aumenti in caso di visualizzazione mobile (dove bootstrap riadatta le griglie una sopra l'altra, allungando quindi l'altezza a ben più di 350 pixel).
    Questo però lo abbiamo risolto proprio usando quella mediaquery, dove si può definire l'altezza fissa (così come ti ho indicato) solo per la visualizzazione da dedesktop e viewport maggiori. Su mobile quindi non c'è il problema delle sovrapposizioni, perché in quel caso (se non ci sono altre regole applicate) l'altezza resta automatica di default.

    Certo, anche su desktop, se imposti un'altezza fissa al contenitore, questa dovrebbe essere non oltrepassata dal contenuto, altrimenti ci sarebbe un problema di eccedenza e probabile sovrapposizione dei contenuti.

    Ad ogni modo io sono partito dal presupposto che tu avessi impostato un altezza fissa usando height. Usando invece min-height le cose cambiano parecchio perché l'altezza non resta "fissa" e questo comportamento influisce su quegli elementi a cui è applicato il float.

    Ora non sto a spiegarti qual è il problema del float in questo caso, altrimenti rischiamo di non uscirne e creare solo confusione, ma prendi per buono quanto ti indico.

    Tuttavia il presunto automatismo di min-height non ha funzionato come avrebbe dovuto, dato che non ha allungato l'altezza in automatico alla necessita
    Appunto, questo è il normale comportamento, l'altezza del contenitore è di default relativa al contenuto, non va ad espandersi in automatico, a meno di non usare altre strategie.

    In altre parole, con min-height, se il contenuto supera quel valore minimo, allora il contenitore si espande; viceversa, se il contenuto è inferiore al valore minimo stabilito, il contenitore si "ferma" a quel valore minimo.

    (eppure su stackoverflow, nella risposta ad una domanda di qualche anno fa', dicevano avrebbe funzionato)
    Non so dirti su questo, sarei però curioso di vedere cosa è stato chiesto esattamente e cosa è stato risposto esattamente.
    In ogni caso, sto continuando a fare i test sul dominio free privo di cloudflare: https://maiale-1025cb.ingress-erytho.easywp.com/

    Sto usando il codice che mi hai dato da inserire nel CSS, e adattato la struttura come da te suggerito, ma vedo che non mi sta applicando i 350px di altezza, neppure così
    Dove hai applicato il css che ti ho indicato?
    Nel tuo file "/wp-content/themes/SE_Theme/style.css" vedo che hai inserito questo:
    codice:
    @media(min-width: 992px){#mainarticle{height: 350px;}}
    Nel css che ti ho consigliato c'è uno spazio tra "#main" e "article" - non è messo a caso - ma nel tuo css non lo vedo; dove è finito!?
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  9. #29
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Dove hai applicato il css che ti ho indicato?
    Nel tuo file "/wp-content/themes/SE_Theme/style.css" vedo che hai inserito questo:
    codice:
    @media(min-width: 992px){#mainarticle{height: 350px;}}
    Nel css che ti ho consigliato c'è uno spazio tra "#main" e "article" - non è messo a caso - ma nel tuo css non lo vedo; dove è finito!?
    Hai ragione, scusami. Infatti una volta corretto (ed atteso una marea di ore che si aggiornasse), ha finalmente funzionato!

    Ho scoperto che il servizio che stavo usando per i test col dominio free, usa una fortissima memoria cache sul file CSS di wordpress, basata direttamente su server. Quindi ecco spiegato l'arcano del perché non si aggiornasse neppure quello, sebbene fosse privo di cloudflare.......!

    Alla fine ho dovuto procedere con i test ogni volta clonando il template e reinserendolo in una nuova cartella con diverso nome, così da "ingannare" il sistema eludendo la cache.

    C'è stato un minuscolo problema col tuo codice fornitomi, poiché tale ID "main" era presente anche nei singoli post, per cui da PC mi accavallava il testo in esubero ai 350 pixel di altezza.
    In ogni caso ho risolto creando un nuovo ID appositamente per i post singoli, con esattamente gli stessi attributi di main, fatto salvo il pezzetto sui 350 pixel.

    Finalmente ho risolto tutti i problemi, e ti ringrazio ancora una volta per tutto il tempo e la pazienza dedicatomi!
    Non appena troverò il tempo e la lucidità mentale per studiarmi i link che mi hai fornito sulle guide di base al CSS, provvederò subito a leggermi, così da colmare le mie lacune ed avere per lo meno un minimo di competenza di base!

    Grazie ancora e buon fine settimana! :-)

  10. #30
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,684
    In ogni caso ho risolto creando un nuovo ID
    Benissimo, quantomeno stai iniziando a prendere padronanza

    Grazie ancora e buon fine settimana! :-)
    Sei benvenuto, buon weekend anche a te
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

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