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

    Transition per div dentro div contenitore griglia.

    Buona sera ragazzi, da novellino avrei bisogno che qualcuno mi aiuti col mio codice.
    In breve ho un div con un contenuto <p><pre>testo..., questo div ha un testo all'interno che supera le sue dimensioni in lunghezza, sono riuscito quindi a far vedere nel div semplice solo la parte di testo che voglio,

    ora però, oltre a quanto fatto, vorrei poter mettere a questo div una transizione che permetta al div di allungarsi solo verso il basso fino a permettere la visualizzazione del resto del testo al suo interno, questo ovviamente deve avvenire solo al passaggio del mouse sul div e deve rimanere aperto fin quando non tolgo il puntatore da sopra.
    Uno dei possibili problemi del div in questione è che non ne conosco le dimensioni perchè sono dovute a quanto scritto in percentuale nel grid template .box, il div in questione con testo lunghissimo è "DivBio".
    A proposito, quando la transizione si aprirà non dovrà spostare il resto del contenuto della pagina ma sovrapporsi a ciò finirà sotto.
    Allego l'immagine.
    Grazie in Anticipo.
    Immagini allegate Immagini allegate
    Ultima modifica di WebNovellinoDsg; 22-12-2021 a 20:10

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,276
    Ciao, sarebbe utile vedere un esempio funzionante della situazione a cui sei arrivato.

    Ti invito a postare del codice (usando gli appositi tag per formattarlo sul forum, vedi regolamento di sezione) o, meglio ancora, ad usare un qualche servizio code playground per rendere disponibile un esempio minimo riproducibile (vedi Tryit o CodePen o altri simili; qualcuno è anche elencato in questo capitolo dei link utili CSS, sotto la voce "Applicazioni online").

    In questo modo semplifichi il lavoro per chi vorrebbe darti eventuale aiuto e sarà più probabile, per te, riceverne
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    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!

    "Mi son documentato"

  3. #3
    codice:
        body{
            background-image: radial-gradient(gold 0%, #F0C241 10%, goldenrod 20%, #cda435 30%,goldenrod 40%,
            #F0C241 50%, gold 60%, #F0C241 70%, goldenrod 80%, #cda434 90%, goldenrod 100%);
            background-repeat: no-repeat; background-attachment: scroll; background-size: cover; width: 1339px; height: 1326px; margin: 10px;}
    
        .box{
            display: grid; gap: 10px; grid-template-columns: 22% 11% 34% 11% 22%;
            grid-template-rows: 30% 5% 25% 25% 10% 5%; width: 1289px; height: 1276px;}
        
        .L20{}
        .L33{}
        .L50{}
        .L60{}
        .SX, .C, .DX{border: 5px solid blueviolet; color: white; background-color: black; text-align: center; overflow: hidden;}
        .SX {}
        .C  {}
        .DX {}
        h3  {}
        p   {}
        pre {font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
        .ParBIO{}
        .DivBio{width:; height:; transition:}
        .box:hover .DivBio{height:}
    </style>
    
        <body>
            <div id="div1box13" class="box">
    
                <div class="SX"    class="DivBio" style="grid-column: 1/2; grid-row: 1/3;">
    
    
                <h4>BIOGRAFIA</h4>
                <p class="ParBIO";><pre>
    lungo testo<pre><p></div> 
    seguono altri div e chiusura dell'html...
    
    Spero di aver fatto bene ora.
    Grazie.
    Ultima modifica di WebNovellinoDsg; 23-12-2021 a 00:30

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,276
    Sarebbe meglio un esempio minimo funzionante, altrimenti chi vorrebbe darti aiuto dovrebbe preoccuparsi di riassemblare il tutto cercando di capire come risolvere il codice mancante e il risultato potrebbe non corrispondere alla tua reale situazione... puoi capire da te che risulta poco pratico per chi vorrebbe aiutarti.

    Magari prova ad usare un playground come indicato.

    Inoltre, quando posti codice sul forum sarebbe meglio rimuovere l'eventuale formattazione che solitamente è applicata dall'editor che stai usando.
    Per incollare senza formattazione, in genere si può usare la combinazione da tastiera CTRL+MAIUSC+V.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    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!

    "Mi son documentato"

  5. #5
    codice HTML:
    <!DOCTYPE html>
    <html lang="it-en-us">
        <head>
            <title>acleofeoceplcepf&ograve; Galleria!</title>
            <meta charset="utf-8" name="author" content="FDS";/>
        </head>
    
    <style>
    
        body{
            background-image: radial-gradient(gold 0%, #F0C241 10%, goldenrod 20%, #cda435 30%,goldenrod 40%,
            #F0C241 50%, gold 60%, #F0C241 70%, goldenrod 80%, #cda434 90%, goldenrod 100%);
            background-repeat: no-repeat; background-attachment: scroll; background-size: cover; width: 1339px; height: 1326px; margin: 10px;}
    
        .box{
            display: grid; gap: 10px; grid-template-columns: 22% 11% 34% 11% 22%;
            grid-template-rows: 30% 5% 25% 25% 10% 5%; width: 1289px; height: 1276px;}
       
        .L20{}
        .L33{}
        .L50{}
        .L60{}
        .SX, .C, .DX{border: 5px solid blueviolet; color: white; background-color: black; text-align: center; overflow: hidden;}
        .SX {}
        .C  {}
        .DX {}
        h3  {}
        p   {}
        pre {font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
        .ParBIO{}
        .DivBio{width:; height:; transition:}
        .box:hover .DivBio{height:}
    </style>
    
        <body>
            <div id="div1box13" class="box">
    
                <div class="SX"    class="DivBio" style="grid-column: 1/2; grid-row: 1/3;">
    
    
                <h4>BIOGRAFIA</h4>
                <p class="ParBIO";><pre>
    Uomo dalle innumerevoli doti:
    Geometra, Dott.Mag., Professore,
    Ingegnere, Meccanico, Elettronico,
    Inventore, Musicista Compositore,
    Scultore, POETA, GRAFICO, PITTORE.
    
    In una delle sue tante opere,
    fa riferimento al tempo che sentiva
    di aver perso nel corso della vita,
    ma di fronte alle sue incalcolabili
    opere, non ci si riesce a capacitare
    di quando lui abbia perso realmente
    tempo, pochi al mondo riuscirebbero
    a completare anche solo la metà di
    tutti i suoi lavori, forse,
    meglio dire "capolavori"...
    
    
    (F.S.J.)</b></pre></p>
    <br>
                <p class="PAR"><pre>
    Artista profondamente immerso nel
    continuo affinamento delle tecniche,
    che indichiamo come uno dei più
    autonomi rappresentanti del
    rinnovato interesse realistico.
    Scava nella materia d'un
    esistenzialismo della crisi,
    esprimendo quel senso di
    disorientamento che caratterizza la
    coscienza contemporanea, andando
    incontro al fato contro cui la altra
    ribellione non può prendere
    forma se non quella dell'"eterno nel
    transitorio". C'è dunque nella sua
    arte, un doppio fondo, quello che
    assolutizza l'uomo d'oggi e quello
    che lo interpreta in ogni debolezza
    umana, nell'uno e nell'altro vive
    recondita e inconsapevole,
    l'esigenza di un rinnovamento.
    L'innovazione stilistica e la varietà
    tematica, fanno parte del suo
    carattere estroso e della sua
    intelligenza spietata, per cui la
    sua satira vivace assume il sapore
    di una favola amara, l'intuizione
    si è maggiormente affinata in
    svolazzi surreali e metafisici,
    in ricchi motivi formali ecromatici,
    sempre più attento alla mimesi,
    all'esistenziale, nel fremito di un
    colore, di una luce, di una idea,
    di cento idee, spesso nell'esasperata
    concettosità che addensa immagini
    audaci e sconcertanti, in segno di
    protesta.
    
    Poeta di forte espressività,
    nella sua produzione trovano
    risonanza l'antico mondo contadino,
    scene e bozzetti di vita paesana,
    ma molte delle sue liriche,
    scaturiscono da una profonda analisi
    dell'amara realtà della vita e di una
    società che va sempre più alla deriva.
    La sua opera, si configura come
    ricerca intensa quale tensione
    continua (non ripetitiva) verso un
    modulo espressivo, originale e
    creativo, capace di collegare l'idea
    germinale &mdash;&laquo;contenuti inconsci,
    come momenti di propulsione
    intellettuale, infinito urgere di
    sollecitazioni, emozioni, tensioni
    che sono alla base della sua
    esperienza personale in tutte le sue
    direzioni soggettive e oggettive
    (esperienza estetica e culturale)&raquo;&mdash;
    e la sua concreta realizzazione,
    per la quale gioca un ruolo decisivo
    la perizia tecnica dell'uso "pulito",
    chiaro, smagliante e preciso dei
    colori. Gli Impulsi, i bisogni e le
    aspirazioni della sua personalità,
    premono per trovare una precisazione
    e definizione, che a volte, acquista
    connotazioni razionali &mdash;&laquo;alcuni quadri
    danno in "sintesi artistica",
    proprio lo stimolo a riflessioni su
    oggettive, culturali e sociali&raquo;&mdash;
    altre più volte, si risolve in un
    "suggerimento", sottile, aereo,
    indefinito di emozioni, di stati
    d'animo che rimandano pure a
    problematiche esistenziali; è questo
    il segno di ciò che è stato chiamato
    "subliminale" nella sua pittura,
    presente come filo conduttore di
    tutta la sua ricerca, cioè lo sforzo
    e la tensione continua di trattare
    "ciò che è sotto la soglia sensoriale"
    (impulsi sensuali, aggressivi, odio,
    emozioni, il"limite" morte),
    trova così la maniera di subliminarsi
    nella creatività artistica,
    espressione che costituisce la
    "fatica", il "tormento", "l'intima
    soddisfazione" dell'artista.
    In molti quadri è stata raggiunta la
    "perfezione" (fusione o unità
    inscindibile tra idea germinale -
    tecnica - realizzazione), tanto che,
    per la plasticità e levigatezza delle
    figure, si ha l'impressione di
    trovarsi di fronte a "sculture
    pittoriche" o a "pitture scultoree".
    
    Ha partecipato a vari concorsi
    nazionali classificandosi sempre ai
    primi posti, come pittore, grafico,
    poeta e non solo...
    Si è dedicato anche alla composizione
    di brani musicali.
    Molto rilevante anche la sua genialità
    d'inventore, alcuni brevetti infatti,
    furono richiesti da industriali
    italiani e stranieri, riscuotendo
    particolare interesse e contribuendo
    così all'evoluzione dell'industria,
    allora moderna.
                </pre></p></div>
    
                <div class="C"    class="L60" style="grid-column: 2/5; grid-row: 1/2;">
                <img src="C:\Users\Utente\Desktop\Sito internet\IMG_Prova Copertina.jpg" alt="Errore di visualizzazione!"
                width="100%" height="100%"></div>
    
                <div class="DX"    class="L20" style="grid-column: 5/6; grid-row: 1/3;">
                                <h4>SULAGNU</h4>
                                <p class="TX1"><pre>
    ...
                </pre></p></div>
    
                <div class="C"    class="L60" style="grid-column: 2/5; grid-row: 2/3;">box4</div>
    
                <div class="SX"    class="L20" style="grid-column: 1/2; grid-row: 3/4;">box6</div>
                                <div class="DX"    class="L20" style="grid-column: 5/6; grid-row: 3/4;">box7</div>
                <div class="SX"    class="L20" style="grid-column: 1/2; grid-row: 4/5;">box8</div>
                                <div class="DX"    class="L20" style="grid-column: 5/6; grid-row: 4/5;">box9</div>
    
                <div class="SX"    class="L33" style="grid-column: 1/3; grid-row: 5/6;">box12</div>
                        <div class="C"    class="L33+1" style="grid-column: 3/4; grid-row: 5/6;">box13</div>
                                <div class="DX"    class="L33" style="grid-column: 4/6; grid-row: 5/6;">box14</div>
    
                        <div class="C"    class="L100" style="grid-column: 1/6; grid-row: 6/7;">box15</div>
    
            </div>
        </body>
    </html>
    Spero di aver fatto bene ora.
    Grazie.
    Ultima modifica di KillerWorm; 23-12-2021 a 02:45 Motivo: aggiunto tag code [HTML]

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,276
    Il codice riporta diversi errori di validazione; dandoti dei consigli su come intervenire per il problema in questione, può anche essere che i risultati siano inconsistenti a causa di tali errori.

    In qualunque caso sarebbe meglio lavorare su un codice valido.

    Prima di proseguire ti consiglio quindi di iniziare col validare l'intero codice. Puoi usare questo validatore online e cercare di correggere tutti gli errori che ti vengono segnalati analizzando il tuo codice.

    Se hai bisogno di aiuto a capire come risolvere determinati errori, puoi chiedere sempre su questa discussione.

    Ad ogni modo...

    ora però, oltre a quanto fatto, vorrei poter mettere a questo div una transizione che permetta al div di allungarsi solo verso il basso fino a permettere la visualizzazione del resto del testo al suo interno, questo ovviamente deve avvenire solo al passaggio del mouse sul div e deve rimanere aperto fin quando non tolgo il puntatore da sopra.
    Uno dei possibili problemi del div in questione è che non ne conosco le dimensioni perchè sono dovute a quanto scritto in percentuale nel grid template .box
    in questo caso è possibile che il solo CSS non sia sufficiente ad ottenere ciò che chiedi; eventualmente si potrebbero trovare delle soluzioni con l'ausilio di un po' di JavaScript... ma, ripeto, sarebbe bene partire da un codice validato.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    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!

    "Mi son documentato"

  7. #7
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Il codice riporta diversi errori di validazione; dandoti dei consigli su come intervenire per il problema in questione, può anche essere che i risultati siano inconsistenti a causa di tali errori.
    Ciao, riguardo gli errori so già quali sono e non recano problemi al funzionamento della pagina, utilizzo visual studio code che già li segnala, li ho lasciati apposta perchè mi ricordano alcuni passaggi senza crearmi però dei problemi, ad ogni modo ora sistemo tutto e riposto il codice in modo più pulito possibile per chi voglia aiutarmi.
    Ps: gli errori in ogni caso sono dei semplici riferimenti a classi o tag lasciati vuoti nello style css.

    Riguardo quello che voglio fare in realtà ho visto degli esempi su internet e dovrebbe poter bastare del css, in ogni caso non contraddico comunque la tua ipotesi perchè sicuramente ne sai più di me.
    Colgo ancora l'occasione di ringraziarti e augurarti buona giornata.

  8. #8
    https://jsfiddle.net/anjfrLhv/#&togetherjs=ae3ffolkxy

    Ecco, credo di essere riuscito a postare il link per accedere rapidamente al codice per aiutarmi col problema della transizione da aggiungere al div bio.


  9. #9
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,276
    gli errori in ogni caso sono dei semplici riferimenti a classi o tag lasciati vuoti nello style css
    No, quelli li ho visti e infatti ho dato per scontato che li avessi lasciati volontariamente vuoti, ma ci sono altri errori di markup malformato, come lo il blocco <style> fuori posto, vari tag aperti o chiusi male e altri errori vari.

    Inutile dirti che sarebbe meglio correggerli tutti, anche inserendo quei valori che hai lasciato mancanti (o tutt'al più commentare quelle parti e aggiungere un eventuale testo di promemoria).

    Ad ogni modo l'esempio che fornisci (sebbene minimo) è essenziale che sia funzionante in tutte le sue parti e che abbia un codice valido perché, ripeto, è possibile che i risultati, ottenuti con un esempio mal funzionante, siano inconsistenti in quanto i diversi browser (che cercano, ognuno a proprio modo, di correggere gli errori di validazione) possono restituire differenze anche sostanziali.

    Il condizionale è d'obbligo ma questo non toglie il fatto che sarebbe comunque opportuno fornire un esempio valido.

    Chiaramente tutto va a vantaggio tuo

    dovrebbe poter bastare del css
    Sì, è possibile che sia sufficiente il solo CSS ma a seconda dell'effetto che vuoi ottenere potrebbero esserci delle limitazioni per cui potrebbe essere più semplice gestire la cosa via script.

    Le animazioni CSS sono applicabili su proprietà animabili e l'effetto di transizione è apprezzabile nel caso in cui sia possibile il calcolo dei valori intermedi tra quello iniziale e quello finale.

    Se tu hai un height che va da un valore X (ad esempio 100px) ad un valore "auto", ovviamente i valori intermedi non possono essere calcolati, quindi la transizione non sarà apprezzabile.

    Una soluzione potrebbe essere l'uso di max-height, impostando un valore finale che sia sufficientemente grande per garantire la completa visibilità dell'elemento aperto. Questa soluzione però ha delle limitazioni in quanto non è possibile sapere esattamente quale possa essere il valore da impostare e la transizione potrebbe non essere omogenea per le eventuali diverse altezze che può avere ciascun elemento quando è aperto.

    Certo, possono esserci altre soluzioni sempre CSS ma bisogna capire esattamente quali possono essere i risultati e se soddisfano le tue esigenze.

    In ogni caso, per provare adeguatamente delle eventuali soluzioni e verificarne gli effettivi risultati, è opportuno partire da un codice di funzionante di esempio; vedo ora che sei riuscito a postarlo
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    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!

    "Mi son documentato"

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,276
    Ciao, non so se sei riuscito ad elaborare già qualcosa. Nel tuo fiddle vedo comunque che non hai rimosso i vari errori di validazione, inutile ripeterti che sarebbe meglio farlo

    Per la richiesta in questione, una soluzione può essere l'uso di max-height come già accennato.

    Prova magari in questo modo:
    - avvolgi l'intero contenuto dentro un opportuno <div> a cui applichi una classe specifica per questa effetto, ad esempio:

    codice HTML:
    <div class="espandibile">
      Qui tutto il contenuto che vuoi rendere espandibile
    </div>

    - rimuovi "overflow: hidden;" che hai definito nel CSS per il contenitore div .SX, altrimenti il contenuto resterebbe limitato a questo div vanificando il risultato;

    - quindi aggiungi qualcosa di simile a questo:
    codice:
        .espandibile {
          position: relative;
          overflow: hidden;
    
          max-height: 100%;
          background-color: #000;
          z-index: 0;
          box-shadow: 0 0 0 0 #fff;
    
          transition: 1s ease-in-out;
        }
    
        .espandibile:hover {
          max-height: 1000%;
          background-color: #123;
          z-index: 999;
          box-shadow: 0 0 8px 2px #fff;
        }

    Chiaramente puoi personalizzare le varie proprietà come meglio credi (io ho voluto applicare un background e un box-shadow per dare risalto quando il div è espanso), fai solo attenzione ad alcune proprietà (come position, overflow, z-index) che dovrebbero restare tali perché sono funzionali per l'effetto da ottenere durante la transizione.

    Fai sapere, buon proseguimento
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    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!

    "Mi son documentato"

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