Pagina 2 di 4 primaprima 1 2 3 4 ultimoultimo
Visualizzazione dei risultati da 11 a 20 su 31

Discussione: Tabella responsive

  1. #11
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,016
    tutte le espressioni sono attaccate esempio:
    Carlo, in quel caso mi pare un errore dovuto al copia incolla sul forum, infatti il codice sul primo post è corretto, a parte la mancanza dell'attributo alt nei tag <img> che genera degli errori nella validazione... ma questa è un'altra storia.

    Ad ogni modo è chiaro che sarebbe meglio usare delle soluzioni differenti dalle tabella.

    @iceberg, senza reinventare la ruota, ti suggerisco intanto di dare uno sguardo a qualche tutorial, anche giusto per comprendere come poter impostare la cosa. Vedi magari questi tra i quali sono proposte diverse soluzioni:

    Creare una galleria responsive con HTML e CSS, senza Framework
    Using Modern CSS to Build a Responsive Image Grid
    How to Build a Responsive Image Gallery with Flexbox
    Responsive Image Grids with Transitional Effects when Hovered
    CSS Grid Card Examples (vedi "Responsive example" nella prima soluzione)
    Common Responsive Layouts with CSS Grid (and some without!)
    Creating Responsive Images with CSS

    Prova magari ad abbozzare qualcosa da te, seguendo ovviamente qualcuno di quei tutorial, poi se trovi difficoltà se ne potrà discutere qui.

    Buon proseguimento.
    Ultima modifica di KillerWorm; 01-01-2018 a 12:30 Motivo: fix links
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    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!

  2. #12
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    18,445
    .

  3. #13
    Grazie per l'aiuto


    - I diversi testi nelle celle, riportati su righe alternate, sono relativi alle singole immagini? Cioè sono in sostanza delle didascalie di quelle immagini?
    Esatto!! Sotto ogni immagine c'è la didascalia, quindi in modalità mobile avrò
    Imagine
    Didascalia
    [spazio]
    Imagine
    Didascalia

    In tal caso ritengo sia comunque inadeguata l'impostazione che hai usato per quella tabella. Sarebbe stato più opportuno inserire il testo all'interno di ogni <td> relativo all'immagine.
    Credo tu abbia ragione!

    - Utilizzi HTML 5?


    Devo inserire questo codice (+ il relativo CSS) in una porzione HTML di una pagina Wordpress


    In tal caso, e in base al primo punto, si potrebbe usare una serie di elementi <figure>, cioè dei contenitori in cui inserire l'elemento <img> e il suo relativo <figurecaption>. In alternativa si potrebbero comunque usare dei semplici div, il discorso non cambia.

    A questo punto sarà possibile organizzare tali contenitori come meglio si crede (ad esempio con float o con flexbox) in modo da ottenere la disposizione voluta, che si posso inoltre organizzare facilmente per la questione responsive.



    Il risultato che mi piacerebbe ottenere è visualizzare gli elementi in tabella da desktop (immagine + didascalia ... 4 elementi per riga)
    e da mobile/tablet vedere

    Imagine
    Didascalia
    [spazio]
    Imagine
    Didascalia
    [spazio]
    Imagine
    Didascalia
    [spazio]
    Imagine
    Didascalia
    etc...

    Grazie!!!
    Iceberg

  4. #14
    Oltre che usare i div e come suggerito da KillerWorm usare html5 è appunto sbagliato mettere il testo in celle separate inoltre quella tabella non potra mai funzionare in quanto è piena di errori semantici, tutte le espressioni sono attaccate esempio:
    Così non va bene
    codice:
    <td><imgsrc="img4.png"width="300"height="200"/></td>
    Così va bene
    codice:
    <td><imgsrc="img4.png"width="300"height="200"/></td>
    Quegli errori (spazi) sono sicuramente causa del copia/incolla!

    In ogni caso, non soffermiamoci su quella tabella... perché è solo per mostrare come io vedo da desktop i risultati ora.
    Andrebbe benissimo anche usare i DIV se secondo voi è la soluzione ottimale!

    Grazie!!
    Iceberg

  5. #15
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,016
    Ok, leggi i successivi post, vedi se riesci a fare tu qualcosa con qualcuno dei tutorial che ho lincato.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    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!

  6. #16
    Ho creato questa!
    Le immagini sono OK, non riesco a mostrare un testo sotto
    Se lo aggiungo è vedo un blocco nero che sfasa tutto

    codice:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Documento senza titolo</title>
    <style type="text/css">
    
    
    
    
    
    
    #rig {
        max-width:900px;
        margin:0 auto; /*center aligned*/
        padding:0;
        font-size:12px; /* Remember to change it back to normal font size if have captions */
        list-style:none;
        background-color:#000;
    }
    #rig li {
        display: inline-block;
        *display:inline;/*for IE6 - IE7*/
        width:25%;
        vertical-align:middle;
        box-sizing:border-box;
        margin:0;
        padding:0;
    }
            
    /* The wrapper for each item */
    .rig-cell {
        /*margin:12px;
        box-shadow:0 0 6px rgba(0,0,0,0.3);*/
        display:block;
        position: relative;
        overflow:hidden;
    }
            
    /* If have the image layer */
    .rig-img {
        display:block;
        width: 100%;
        height: auto;
        border:none;
        transform:scale(1);
        transition:all 1s;
    }
    
    
    #rig li:hover .rig-img {
        transform:scale(1.05);
    }
            
    /* If have the overlay layer */
    .rig-overlay {
        position: absolute;
        display:block;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background: #3DC0F1 url(img/link.png) no-repeat center 20%;
        background-size:50px 50px;
        opacity:0;
        filter:alpha(opacity=0);/*For IE6 - IE8*/
        transition:all 0.6s;
    }
    #rig li:hover .rig-overlay {
        opacity:0.8;
    }
    
    
    /* If have captions */
    .rig-text {
        display:block;
        padding:0 30px;
        box-sizing:border-box;
        position:absolute;
        left:0;
        width:100%;
        text-align:center;
        text-transform:capitalize;
        font-size:18px;
        font-weight:bold;
        font-family: 'Oswald', sans-serif;
        font-weight:normal!important;
        top:40%;
        color:white;
        opacity:0;
        filter:alpha(opacity=0);/*For older IE*/
        transform:translateY(-20px);
        transition:all .3s;
    }
    #rig li:hover .rig-text {
        transform:translateY(0px);
        opacity:0.9;
    }
    
    
    @media (max-width: 9000px) {
        #rig li {
            width:25%;
        }
    }
    
    
    @media (max-width: 700px) {
        #rig li {
            width:33.33%;
        }
    }
    
    
    @media (max-width: 550px) {
        #rig li {
            width:50%;
        }
    }
    
    
    
    
    </style>
    </head>
    
    
    <body class="testo">
    
    
    
    
    
    
    <div class="table-responsive">
    <ul id="rig">
    <li><a class="rig-cell" href="#"> <img class="rig-img" src="https://....URL IMMAGINE" /> Testo 0<span class="rig-overlay">Testo 1 </span> <span class="rig-text"></span></a></li>
    <li><a class="rig-cell" href="#"> <img class="rig-img" src="https://....URL IMMAGINE" /> <span class="rig-overlay"></span> <span class="rig-text">Consectetur Adipiscing</span> </a></li>
    <li><a class="rig-cell" href="#"> <img class="rig-img" src="https://....URL IMMAGINE" /> <span class="rig-overlay"></span> <span class="rig-text">Vivamus ut Felis</span> </a></li>
    <li><a class="rig-cell" href="#"> <img class="rig-img" src="https://....URL IMMAGINE" /> <span class="rig-overlay"></span> <span class="rig-text">Curabitur tempus</span> </a></li>
    <li><a class="rig-cell" href="#"> <img class="rig-img" src="https://....URL IMMAGINE" /> <span class="rig-overlay"></span> <span class="rig-text">Sed et nunc luctus</span> </a></li>
    <li><a class="rig-cell" href="#"> <img class="rig-img" src="https://....URL IMMAGINE" /> <span class="rig-overlay"></span> <span class="rig-text">Suspendisse tellus</span> </a></li>
    <li><a class="rig-cell" href="#"> <img class="rig-img" src="https://....URL IMMAGINE" /> <span class="rig-overlay"></span> <span class="rig-text">pellentesque odio</span> </a></li>
    <li><a class="rig-cell" href="#"> <img class="rig-img" src="https://....URL IMMAGINE" /> <span class="rig-overlay"></span> <span class="rig-text">Nam euismod</span> </a></li>
    </ul>
    </div>
    </body>
    
    
    
    
    
    
    </html>

    Dove sbaglio?

    Grazie!
    Iceberg

  7. #17
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,016
    Buon Anno!

    Le immagini sono OK, non riesco a mostrare un testo sotto
    Aspetta, in quel caso il testo appare con un effetto overlay e le immagini sono cliccabili; a te interessa avere queste caratteristiche?
    E' chiaro che tra i link che ho suggerito* ci sono diversi esempi con varie caratteristiche ma, se a te non interessano certi effetti, prova qualche soluzione più simile a quello che vorresti ottenere. Il primo link mi pare riporti una soluzione che si avvicina di più a ciò che stai provando a fare.


    * alcuni link erano rotti, li ho appena corretti.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    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!

  8. #18
    Un esempio di codice semplice:
    codice:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    <style type="text/css">
    .tab1, .tab2 {
        text-align: center;
        float: left;
        overflow: hidden;
        padding: 0;
        margin: 10px;
    }
    #clear {
        clear: both;
    }
    </style>
    </head>
    
    <body>
    <div class="tab1">
      <img src="img1.png" width="300" height="200" alt=""/><br>
      Didascalia
    </div>
    <div class="tab1">
      <img src="img2.png" width="300" height="200" alt=""/><br>
      Didascalia
    </div>
    <div class="tab1">
      <img src="img3.png" width="300" height="200" alt=""/><br>
      Didascalia
    </div>
    <div class="tab1">
      <img src="img4.png" width="300" height="200" alt=""/><br>
      Didascalia
    </div>
    <div id="clear">&nbsp;</h6></div>
    <div class="tab2">
        <img src="img5.png" width="300" height="200" alt=""/><br>
      Didascalia
    </div>
    <div class="tab2">
        <img src="img6.png" width="300" height="200" alt=""/><br>
      Didascalia
    </div>
    <div class="tab2">
        <img src="img7.png" width="300" height="200" alt=""/><br>
      Didascalia
    </div>
    <div class="tab2">
        <img src="img8.png" width="300" height="200" alt=""/><br>
      Didascalia
    </div>
    </body>
    </html>
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  9. #19
    Non mi interessano gli effetti ... ed io parlavo del testo che ho messo sotto.

    L'overlay l'avrei tolto dopo senza problemi. E' il testo sotto l'immagine che non va bene.

    Il tuo primo esempio dava problemi con layout principale del mio sito quindi ho optato per questo
    Iceberg

  10. #20
    Quote Originariamente inviata da carlomarangoni Visualizza il messaggio
    Un esempio di codice semplice:
    codice:
    <!doctype html>
    <html>
    <head>

    Carlo il tuo esempio sarebbe perfetto .... e pulito
    unico problema, quando riduco la finestra, ho una situazione in cui ho

    3 elementi su una riga
    1 su una seconda riga
    3 su una terza riga
    1 su una quarta

    io vorrei che le righe fossero sempre piene

    quindi se stringo dovrei avere eventualmente
    3
    3
    2

    oppure
    2
    2
    2
    2


    oppure

    1
    1
    1
    1
    1
    1
    1
    1


    Il caso iniziale invece va bene (4 per riga per situazione di default)


    Grazie
    Iceberg

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