Pagina 2 di 3 primaprima 1 2 3 ultimoultimo
Visualizzazione dei risultati da 11 a 20 su 21
  1. #11
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    797
    Siamo all'interno di un plugin, e lo stesso elemento contenitore che crea il modal è per me carta bianca, nel senso che io ho gli shortcode e devo solo creare l'html/css a mio piacere. Ma ho provato:
    codice HTML:
    .calmodal-logo img {object-fit:cover;}
    codice HTML:
    <div class="calmodalflex-item-left"><div class="calmodal-logo">[post_image]</div></div>

    eppur non si muove!

    Forse il secondo esempio è migliore, perchè con questo flex (con cui sto sperimentando) ho notato che le cose cambiano spesso. Ovvero, diversi modi per creare colonne a volte funzionano ed a volte no. I classici float mi sembrano più solidi, solo che flex mi sembrava che facesse le cose con meno righe.
    Ultima modifica di stardom; 10-06-2022 a 10:20

  2. #12
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    devo solo creare l'html/css a mio piacere
    perfetto, allora direi che il primo step è risolto a livello HTML. Se tu vuoi, possiamo passare alla parte CSS per vedere come puoi impostarla al meglio, magari non proprio "a tuo piacere"

    diversi modi per creare colonne a volte funzionano ed a volte no. I classici float mi sembrano più solidi, solo che flex mi sembrava che facesse le cose con meno righe.
    Non puoi fare un paragone superficiale di due tecniche differenti come float e flex.

    Anche se ognuna agisce in modo specifico secondo le proprie caratteristiche, ogni cosa nel CSS va valutata nel contesto in cui è posta, dove possono esserci molteplici altri fattori e regole CSS che influiscono sul risultato.

    Un errore comune è pensare che ogni "comando" CSS sia fine a sé stesso. Capisco che se non si hanno le dovute conoscenze su tutte le varie caratteristiche CSS, può risultare difficile capire certi meccanismi per ottenere dei risultati adeguati nei diversi contesti.

    Lascia perdere il secondo esempio, dove viene usato il background, che (ribadisco) nel tuo caso serve a poco.

    Direi di vedere invece come va impostato quel object-fit.

    Non vedo però la tua pagina aggiornata con quello che hai provato a fare. Sarebbe utile magari andare di pari passo così da evitare possibili imprecisioni.

    Hai scritto di aver provato così:
    codice HTML:
    <div class="calmodalflex-item-left"><div class="calmodal-logo">[post_image]</div></div>

    ... ma non vorrei che tu abbia tolto delle classi essenziali che servono per far funzionare il codice originale.

    La struttura originale infatti è questa:
    codice HTML:
    <div class="calmodal-flex-container">
      <div class="calmodalflex-item-left">[post_image]</div>
      <div class="calmodalflex-item-right"> ...the texts...  </div>
    </div>

    Se tu hai semplicemente sostituito la classe calmodalflex-item-left con la tua nuova calmodal-logo, certamente il giocattolo si romperà.

    Quindi chiariamo questo punto: la tua classe va aggiunta assieme a quelle eventualmente già esistenti.
    Potrebbe essere una cosa del genere:
    codice HTML:
    <div class="calmodal-flex-container">
      <div class="calmodalflex-item-left calmodal-logo">[post_image]</div>
      ...
    </div>
    In questo modo nel CSS saranno mantenuti tutti i riferimenti originali alla classe calmodalflex-item-left (che serve ad applicare chissà quali proprietà e/o funzionalità), mentre tu potrai riferirti a quello stesso elemento, ma in maniera più specifica, usando la tua classe calmodal-logo.

    Questo ti è chiaro?
    Prima di proseguire dammi conferma
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #13
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    797
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Non puoi fare un paragone superficiale di due tecniche differenti come float e flex [...]
    Lo stesso Flex non mi pare che funzioni sempre. Dei due esempi da cui sono partito, solo il secondo mi funzionava. Quindi già so che sto camminando in un campo non proprio a prova di errore. Ho notato che usare flex:50% oppure flex:1 non dà lo stesso risultato.

    Non vedo però la tua pagina aggiornata con quello che hai provato a fare. Sarebbe utile magari
    andare di pari passo così da evitare possibili imprecisioni.
    Strano l'avevo lasciato apposta perchè tu lo vedessi.

    la tua classe va aggiunta assieme a quelle eventualmente già esistenti.
    Una mia disatenzione, so che le classi vanno dentro lo stesso div, e non raddopiato il div

    Ho agigunto width:100%; e qualcosa sta cambiando ....
    Ultima modifica di stardom; 10-06-2022 a 13:14

  4. #14
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Lo stesso Flex non mi pare che funzioni sempre
    eheh non è mica la bacchetta magica (anche se qualche magia la fa); bisogna capire per cosa lo stai usando, come lo vai ad usare e in che contesto, cioè quali altre eventuali regole sono applicate...

    ma questo l'ho già scritto, e mi quoto:
    Anche se ognuna agisce in modo specifico secondo le proprie caratteristiche, ogni cosa nel CSS va valutata nel contesto in cui è posta, dove possono esserci molteplici altri fattori e regole CSS che influiscono sul risultato.

    Un errore comune è pensare che ogni "comando" CSS sia fine a sé stesso. Capisco che se non si hanno le dovute conoscenze su tutte le varie caratteristiche CSS, può risultare difficile capire certi meccanismi per ottenere dei risultati adeguati nei diversi contesti.
    Vorrei che sia chiaro questo concetto, perché anche per quel tuo object-fit, vale la stessa identica cosa — ci sono altri fattori da valutare e relative regole da considerare — qui sta l'ultimo punto che ti indico per arrivare all'obiettivo.

    Strano l'avevo lasciato apposta perchè tu lo vedessi.
    Sì, scusami, era restato in cache il precedente css, ora ho forzato l'aggiornamento e lo vedo

    L'ultimo punto è capire bene la logica di funzionamento della proprietà object-fit.

    Ho agigunto width:100%; e qualcosa sta cambiando ....
    Mentre ti sto rispondendo ho visto che ci stai arrivando da solo

    Cerco comunque di darti delle indicazioni a riguardo.

    Nelle documentazioni si possono trovare diversi esempi di applicazione, tuttavia ho visto che non viene messa alcuna enfasi su un fattore fondamentale per cui questa proprietà possa funzionare a dovere: questa proprietà NON agisce sulle dimensioni dell'elemento, ma solo sul suo contenuto.

    Faccio una panoramica e cerco poi di chiarire: object-fit agisce sulle dimensoni del "contenuto" di "elementi sostituiti", come appunto <img>. Abbiamo quindi il "contenitore" (cioè l'involucro dell'elemento stesso) e il "contenuto" (cioè l'insieme di dati che sono rappresentati visivamente dentro il contenitore).

    Ora, con object-fit viene "rielaborato" il solo contenuto, prendendo però come limiti di riferimento (in cui il contenuto è rielaborato) l'ingombro occupato dal suo contenitore.

    Cosa significa questo?
    E' presto detto, il contenuto non può eccedere oltre le dimensioni del suo contenitore.

    Arriviamo alla conclusione. Nella tua pagina vengono applicate delle dimensioni per ogni img:
    codice:
    img {
      max-width: 100%;
      height: auto;
    }
    In particolare quel height:auto fa in modo che l'elemento img (il contenitore) assuma la sua altezza originale una volta che il suo stesso contenuto è caricato sulla pagina. Ma tu non vuoi questo.

    Tu vuoi invece che l'elemento <img> vada ad occupare l'intera colonna, cioè l'intero ingomgro del suo relativo contenitore (il <div> in cui è presete l'elemento <img>).

    Quello che devi fare quindi è sovrascrivere width ed height per la tua img (che ora puoi selezionare appunto con ".calmodal-logo img") in modo che si portino al 100% del relativo contenitore div (cioè la tua colonna).

    Per ottenere quello che hai chiesto, ti basterà questo:
    codice:
    .calmodal-logo img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }

    per il momento è tutto... spero di aver chiarito qualche perplessità, o quantomeno di non aver creato più confusione
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #15
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    797
    Tutto, esattamente tutto quello che hai scritto l'ho scoperto proprio sperimentando ora.
    Innanzitutto il mio primo errore era proprio pensare che ogni comando CSS si comportasse sempre uguale a prescindere da dove fosse applicato, laddove dipende dal contesto.

    Che le regole si applicassero al contenuto e non al contenitore, ne ero gi� a conoscenza (anche se poi manipolando a volte dimentico e prendo una strada cieca).

    Tornando al nostro modal, avevo messo height:100%;width:auto; ma non manteneva l'immagine in responsive, mentre con height:100%;width:100%; si mantiene.
    Ho un po giocato con fill/cover per evitare la deformazione dell'immagine (avevo anche aggunto transform:translateX(0%) scale(1, 1); ma credo ora sia ridondante) e credo alla fine convenga usare fill perch�, anche se magari il ratio altezza/larghezza � un po' deformato, � sempre meglio avere l'immagine intera piuttosto che originale ma tagliata (perch� si tratta di loghi... se fossero state immagini non mi sarebbe importato).

    Credo ci sia un piccolo dettaglio per�: l'immagine non mi sta dentro il border arrotondato del modal, come se avesse uno z-index superiore. Cosa manca?

  6. #16
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    797
    Quote Originariamente inviata da stardom Visualizza il messaggio
    l'immagine non mi sta dentro il border arrotondato del modal, come se avesse uno z-index superiore. Cosa manca?
    potrei modificare i singoli border-radius:10px 0 0 10px e metterli in responsive con mediaquery a 10px 10px 0 0, ma credo ci sia un metodo migliore... o no?

  7. #17
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Tutto, esattamente tutto quello che hai scritto l'ho scoperto proprio sperimentando ora.
    Meglio così almeno lo hai vissuto a tue spese e probabilmente ti rimarrà più impresso.

    Che le regole si applicassero al contenuto e non al contenitore, ne ero gi� a conoscenza
    Ok, non vorrei però che tu la stessi prendendo come "norma generale". Chiariamo il fatto che è così in questo caso particolare, per object-fit, ma non vale per qualsiasi proprietà; anzi, in generale vale proprio il contrario. Ad esempio, le proprietà width ed height sono applicate esattamente al "contenitore" (inteso come involucro che definisce l'elemento stesso).

    Ho un po giocato con fill/cover per evitare la deformazione dell'immagine (avevo anche aggunto transform:translateX(0%) scale(1, 1); ma credo ora sia ridondante)
    Quel transform, così come lo hai applicato, è chiaramente superfluo.

    credo alla fine convenga usare fill perch�, anche se magari il ratio altezza/larghezza � un po' deformato, � sempre meglio avere l'immagine intera[...]
    "fill", per la proprietà object-fit, è il valore di default; anche in questo caso è superfluo che tu lo vada a specificare.

    A questo punto, l'oggetto della discussione e tutto ciò su cui abbiamo ragionato fin'ora per applicare un immagine cover, è da buttare nel cestino

    Credo ci sia un piccolo dettaglio per�: l'immagine non mi sta dentro il border arrotondato del modal, come se avesse uno z-index superiore. Cosa manca?
    z-index non c'entra nulla in questo comportamento, tuttalpiù, se vuoi che anche l'immagine stia dentro i bordi arrotondati dei div principale del modal, dovrai applicare overflow:hidden al div stesso del modal... ma questo è un altro capitolo

    anche se magari il ratio altezza/larghezza � un po' deformato, � sempre meglio avere l'immagine intera piuttosto che originale ma tagliata (perch� si tratta di loghi...
    Su questo concordo, ma se vai a trascurare le proporzioni originali e deformare l'immagine in quel modo, personalmente il risultato mi pare abbastanza improponibile, proprio perché stai mostrando un logo in maniera deformata rispetto a quello che dovrebbe essere l'originale.

    Valuta tu il giusto compromesso ma tieni conto che il fattore resonsive qui influisce parecchio su come viene mostrata l'immagine e certamente non devi limitarti a considerare solo le dimensioni dei dispositivi "desktop" e "smartphone".

    Se provi a giocare con la modalità flessibile del tuo browser (per testare la visualizzazione su diversi dispositivi), ad esempio, un "tablet" in orizontale (con cui mediamente si può avere una larghezza tra 900 e 1200px) il modal viene ristretto mantenendo tuttavia affiancate le due colonne "logo" e "testo", e riducendosi abbastanza da rendere parecchio deforme l'immagine. Questo produce quindi un effetto alquanto improponibile.
    Tu non pensi?

    A quel punto io ti consiglierei di mantenere le proporzioni dell'immagine, e centrarla dentro la colonna. Eventualmente potresti anche applicare un differente colore per la colonna (magari bianco, supponendo che sia il colore principale di sfondo dei vari loghi), così da ottenere un opportuno taglio con la colonna del testo.

    Se posso quindi darti un ultimo consiglio, io la imposterei in questo modo:

    - prima di tutto rimuovi l'ultima regola vista: con object-fit e compagnia bella
    - quindi inserisci una roba del genere:
    codice:
    .calmodal-logo {
      display: flex; /* la bacchetta magica per centrare perfettamente l'immagine */
      align-items: center;
      justify-content: center;
      background: #fff; /* colore di sfondo esteso alla colonna dove sta il logo */
    }
    .qtip-modal {
      overflow: hidden; /* per sare dentro i famosi bordi arrotondati */
    }

    Fai sapere.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  8. #18
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    797
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    "fill", per la proprietà object-fit, è il valore di default; anche in questo caso è superfluo
    Ah

    se vuoi che anche l'immagine stia dentro i bordi arrotondati dei div principale del modal, dovrai applicare overflow:hidden al div stesso del modal
    Corretto e funzionante.

    ad esempio, un "tablet" in orizontale il modal viene ristretto mantenendo tuttavia affiancate le due colonne "logo" e "testo", e riducendosi abbastanza da rendere parecchio deforme l'immagine.
    d'accordo, ma come si mantiene l'immagine quando l'altezza del modal varia... con fill si deformerebbe comunque, e con cover si taglierebbe comunque. Tanto vale portare la mediaquery a 1200px.

    mantenere le proporzioni dell'immagine, e centrarla dentro la colonna. Eventualmente potresti anche applicare un differente colore per la colonna (magari bianco, supponendo che sia il colore principale di sfondo dei vari loghi)
    non posso, i colori dei loghi cambiano, quindi ho tolto objectfit/width/height ed utilizzato display:flex;align-items: center;justify-content:center; (proprietà che non ho mai usato prima). Ma display:flex era già nel contenitore delle colonne, perchè occorre rimetterlo nella img? Per il discorso di contenuto/contenitore?
    E comunque il risultato è che l'immagine è mostrata nelle sue dimensioni originali.

    pensavo di aver finito ed invece siamo da capo a dodici
    Ultima modifica di stardom; 10-06-2022 a 17:07

  9. #19
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Attenzione, sulla tua pagina vedo che stai aggiungendo in modo duplicato le regole che stiamo valutando qui, inoltre stai travisando quanto ti ho indicato. Non ho mai indicato di applicare display:flex sull'immagine, rileggi bene il mio post.

    Quando apporti gli aggiornamenti assicurati di ripulire opportunamente il CSS da eventuali precedenti soluzioni, altrimenti rischi di creare delle ambiguità che rendono difficile effettuare qualsiasi successivo intervento.

    Al momento vedo che questa roba (comunque sbagliata) è specificata due volte nel css:
    codice:
    .calmodal-logo img {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    Rimuovi il tutto e prova ad applicare "ESATTAMENTE" quanto ti ho indicato nell'ultimo post.

    DA TENERE A MENTE:
    in CSS il termine "regola" tecnicamente indica una parte di codice compresa da un "selettore" e dalle "proprietà"

    codice:
                               /* -------------------------        */
    #id > div img {            /*  <- SELETTORE           |        */
                               /* --------------          |        */
       width: 100%;            /*              |          |        */
       height: auto;           /*       PROPRIETA'     REGOLA CSS  */
       border: 1px solid red;  /*              |          |        */
                               /* --------------          |        */
    }                          /*                         |        */
                               /* -------------------------        */

    Se indico di "rimuovere la regola", significa che va rimosso l'intero blocco, non solo le proprietà.

    Vedi infatti che il selettore nell'ultima regola che ti ho indicato non è lo stesso di quello della regola vista in precedenza.

    con fill si deformerebbe comunque, e con cover si taglierebbe
    Infatti ti ho indicato una soluzione alternativa.

    i colori dei loghi cambiano
    ok, ho visto però che la maggior parte a sfondo bianco, ma questo è marginale. Ti ho consigliato infatti di applicare "EVENTUALMENTE" un colore per la colonna, "MAGARI" bianco... e ti ho spiegato il motivo per cui dovresti applicarlo.

    Prova ad aggiustare, poi vediamo magari se e come la cosa può essere migliorata.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  10. #20
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    797
    Killer, se hai visto doppio è perchè nella pagina c'è anche il widget che aveva il vecchio stile, infatti con questo plugin devo aggiornarli entrambi affinchè non ci siano doppie proprietà o addirittura conflitti. Forse non l'hai visto mentre scrivevi.

    Mi era sfuggito che il selettore non era .calmodal-logo img ma .calmodal-logo. Ho corretto ed il logo ora è centrato, e con un background per lavorare (ma non possiamo usarlo perchè gli eventi sono un migliaio e solo una minoranza ha il bianco).

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.