Pagina 3 di 4 primaprima 1 2 3 4 ultimoultimo
Visualizzazione dei risultati da 21 a 30 su 31

Discussione: Tabella responsive

  1. #21
    Niente... non ne vengo a capo
    Iceberg

  2. #22
    Ho fatto altre prove, i problemi che vorrei risolvere nella versione della tabella semplificata sono:

    - non vedere una riga con un solo elemento dopo una con 3 ... ma avere righe sempre con gli stessi elementi (4 4, 3 3 2, 2 2 2 2, 1 1 1 1 1 1 1 1 1)
    - avere la tabella centrata nella pagina, ora collocata nel mio layout è allineata a destra

    Grazie infinite!!!!!
    Iceberg

  3. #23
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    La cosa in effetti non è così semplice. Con un po' d'impegno è anche possibile applicare una delle varie soluzioni proposte in questa discussione ma ovviamente apportare delle personalizzazioni non è poi alla portata di tutti. Ho visto che questo tipo di richiesta ultimamente viene fatta spesso (in varie salse), per cui ho colto questa occasione per elaborare una possibile soluzione con flexbox; ne ho fatto una supposta (vedi qui).

    Prova ad applicarla al tuo progetto e fammi sapere come va.
    Se hai bisogno di chiarimenti o di consigli per eventuali personalizzazioni, puoi chiedere proseguendo qui stesso.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  4. #24
    Spettacolare!!! Grazie KillerWorm, funziona e l'ho già personalizzata!

    Un solo dubbio, sopra e sotto la caption (testo sotto l'immagine) è possibile avere due righe, tipo questa immagine:

    https://www.dropbox.com/s/vo4t6xjan1...demo.jpeg?dl=0

    Grazie!!!!!
    Iceberg

  5. #25
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Spettacolare!!! Grazie KillerWorm, funziona e l'ho già personalizzata!
    Bene
    Un solo dubbio, sopra e sotto la caption (testo sotto l'immagine) è possibile avere due righe, tipo questa immagine:
    Penso di sì, ma intendi due righe vuote (cioè uno spazio sopra e sotto la riga di testo) o i due bordi arancioni?
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  6. #26
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Rileggendo meglio è plausibile che tu intenda i bordi sottili.
    Puoi aggiungere una cosa del genere per il selettore .picsponsive>figure>figcaption:
    codice:
    border: solid #C0D1CE;
    border-width: 1px 0;
    Questo aggiunge all'elemento figcaption i due bordi, superiore e inferiore, di 1px. Ovviamente puoi modificare i diversi valori come preferisci.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  7. #27
    Grazie KillerWorn, ora provo il tuo suggerimento per le righe! Grazi

    Sto studiando la struttura perché il tuo mi sembra un approccio molto pulito ed utilizzabile in vari contesti!

    Come posso ridurre l'immagine visualizzata da mobile? Ora è particolarmente grande (occupa tutta l'area orizzontale)

    Pensavo di modificare

    da



    @media (min-width: 544px) {
    .picsponsive>figure {
    width: calc(100% / 2);
    }
    .picsponsive>figure>img {
    max-height: 500px;
    }
    }

    a



    @media (min-width: 544px) {
    .picsponsive>figure {
    width: calc(80% / 2);
    }
    .picsponsive>figure>img {
    max-height: 500px;
    }
    }



    Quindi cambiando il 100% in 80% ma non mi sembra questo il parametro

    Grazie!
    Iceberg

  8. #28
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Come posso ridurre l'immagine visualizzata da mobile? Ora è particolarmente grande (occupa tutta l'area orizzontale)
    Per capire come intervenire ci sarebbe da chiarire meglio qualche punto. Cerco di spiegarti come funziona.

    Prima cosa, per convenzione ho usato un approccio "mobile-first", questo significa che l'impostazione di default (cioè le regole definite fuori dai vari breakpoint) è quella usata per il mobile; mentre, le regole definite per i breakpoint, stabiliscono la visualizzazione per i vari scaglioni di dimensione della viewport, dalla dimensione più piccola a quella più grande.

    Tieni conto che il fattore cascata è peculiare in questo contesto. Le regole definite per prime ricadono poi sui breakpoint a seguire.

    Detto questo, se intendi applicare una determinata regola per i dispositivi mobile, dovrai definirla nella parte iniziale come default, per poi sovrascriverla eventualmente a partire da un determinato breakpoint per cui su viewport maggiori avrai una differente impostazione.

    Quindi cambiando il 100% in 80% ma non mi sembra questo il parametro
    Infatti. L'elemento figure è sostanzialmente la "cella" della nostra tabella. Se modifichi la sua dimensione in quel modo è probabile che l'intera struttura si sfasci per le viewport maggiori, o comunque non otterrai l'effetto voluto.

    Ho usato calc() per ottenere una suddivisione precisa così da determinare quante "celle" per riga devono esistere per i vari breakpoint.
    Il calcolo è quindi basato sul valore totale (100%) della larghezza del contenitore principale, diviso per il numero di celle che si vogliono ottenere per riga.

    Ora, se la tua intenzione è quella di ridurre SOLO l'immagine contenuta in figure, dovrai agire sull'elemento img. Trattandosi poi dell'impostazione per mobile, dovrai agire nelle definizioni iniziali di default.

    Puoi quindi aggiungere questa definizione come default per il selettore .picsponsive>figure>img:
    codice:
    max-width: 80%;
    L'immagine risulterà quindi larga al massimo 80% della larghezza del proprio contenitore (elemento figure).

    Valuta però che, per i punti visti in precedenza, sarà così per tutte le dimensioni della viewport. Dovrai quindi "rompere" la cascata delle media query definendo, ad esempio, max-width:100% sul secondo o terzo breakpoint in modo che tale regola sia sovrascritta per le dimensioni maggiori del viewport (ottenendo quindi una larghezza massima del 100% per le immagini).

    E' chiaro che in questo caso la larghezza è definita solo per l'elemento img, quindi il contenitore figure e il figcaption al suo interno resteranno comunque sempre al 100%.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  9. #29
    Grazie!! Devo leggere passo passo la tua risposta perché è molto complicata per me!!
    Grazie infinito per aver dettagliato ogni aspetto nella tua risposta!!

    Per quella precedente

    .picsponsive>figure>figcaption:border: solid #C0D1CE;
    border
    -width:1px0;

    E' OK! Ma io vorrei che sotto ogni caption ci sia uno spazio .... questo per fare in modo che da mobile non sia proprio

    Img
    text
    Img
    text
    Img
    text

    ma

    Img
    text
    [spazio]
    Img
    text
    [spazio]
    Img
    text
    [spazio]

    in quanto non sarebbe comprensibile la caption a quale immagine fa riferimento se sono tutti gli elementi di seguito

    ho provato a fare un

    border: solid #C0D1CE;
    border
    -width:1px0;
    margin-bottom: 10px;

    Ma non gli piace!!

    Per quale motivo??
    Iceberg

  10. #30
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Non ho ben chiara la tua situazione attuale dopo le tue personalizzazioni. Se puoi postare un link della pagina potrebbe essere utile per poterti dare dei consigli più mirati secondo le tue esigenze.

    Ad ogni modo, se vuoi aumentare la distanza verticale tra una "cella" e l'altra (cioè tra i contenitori), puoi agire sul margine inferiore di figure:
    codice:
    .picsponsive > figure {
       /* ....
          al posto di 0 0 3px metti
       */
       margin: 0 0 13px;
    }
    Quello che invece hai fatto tu (che dovrebbe comunque funzionare) sposta l'elemento figcaption verso l'alto ma all'interno del contenitore stesso. Ora, dovrei aprire una lunga parentesi per spiegarti che in questo caso si potrebbe avere una sovrapposizione tra figcaption e img (in sostanza il testo andrebbe a coprire l'immagine) a meno di modificare altri valori per creare lo spazio opportuno.

    Però, ripeto, dovresti vedere comunque un qualche risultato, per cui non capisco cosa intendi per "non gli piace!!".
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

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.