Visualizzazione dei risultati da 1 a 10 su 10
  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2012
    Messaggi
    38

    immagini a capo su visualizzione mobile

    Salve, sono a chiedere un aiuto.

    ho un HTML che posto qui sotto dove ci sono 9 immagini disposte su una tabella da 3 colonne.
    Ho messo la regola sul css con class ".flex {max-width: 100%}" per rendere le immagine responsive.
    Solo che vorrei fare in modo che al posto che le immagini della tabella si rimpiccioliscono, la tabella sul telefono si componga su 9 righe e una colonna.
    Non è importante che le immagini siano su tabella, ma vorrei che andassero a capo sotto una certa risoluzione.
    Mi potete aiutare?
    Grazie.


    codice:
    <table width="100%" border="0">
    <tbody>
    <tr>
    <td>
    <p align="center">
    <a href="http://www.motopro24.com/filemotopro...r_2018_RMS.pdf" target=â€_blankâ€>
    <font size="2"
    face="Tahoma"><img class="flex" src="https://www.motopro24.com/filemotopr...-0006-0001.jpg" />
    </font></a></p></td>
    <td>
    <p align="center">
    <a href="http://www.motopro24.com/filemotopro...e_2018_RMS.pdf" target=â€_blankâ€>
    <font size="2" face="Tahoma"><img class="flex"
    src="https://www.motopro24.com/filemotopr...A-CLA-0001.jpg" />
    </font></a></p></td>
    <td>
    <p align="center">
    <a href="http://www.motopro24.com/filemotopro24/RMS/jt.pdf" target=â€_blankâ€><font size="2"
          face="Tahoma"><img class="flex"
          src="http://www.motopro24.com/filemotopro24/RMS/D0-110.jpg" /></font></a></p></td></tr>
    <tr>
    <td>
    <h4 align="center"><font size="2" face="Tahoma">Catalogo
    Moto&amp;Scooter 2018</font></h4></td>
    <td>
    <h4 align="center"><font size="2" face="Tahoma">Catalogo Vintage
    2018</font></h4></td>
    <td>
    <h4 align="center"><font size="2" face="Tahoma">Catalogo JT 2017 /
    JT Catalog 2017</font></h4></td></tr>
    <tr>
    <td>
    <p align="center">
    <a href="http://www.motopro24.com/filemotopro24/RMS/Muc-Off.pdf" target=â€_blankâ€>
    <font size="2" face="Tahoma"><img class="flex"
    src="https://www.motopro24.com/filemotopr.../FLMUC0000.jpg" />
    </font></a></p></td>
    <td>
    <p align="center">
    <a href="http://www.motopro24.com/filemotopro24/RMS/bs.pdf" target=â€_blankâ€><font size="2"
          face="Tahoma"><img class="flex"
          src="http://www.motopro24.com/filemotopro...CA-BS-0000.jpg" />
    </font></a></p></td>
    <td>
    <p align="center">
    <a href="http://www.motopro24.com/filemotopro24/RMS/NGK.pdf" target=â€_blankâ€><font size="2"
          face="Tahoma"><img class="flex"
          src="https://www.motopro24.com/filemotopr.../D0-032017.JPG" />
    </font></a></p></td></tr>
    <tr>
    <td>
    <h4 align="center"><font size="2" face="Tahoma">News MUC-OFF
    2017</font></h4></td>
    <td>
    <h4 align="center"><font size="2" face="Tahoma">Catalogo BS 2017 /
    BS Catalog 2017</font></h4></td>
    <td>
    <h4 align="center"><font size="2" face="Tahoma">News candele NGK
    2017</font></h4></td></tr>
    <tr>
    <td>
    <p align="center">
    <a href="http://www.motopro24.com/filemotopro...e%20Domino.pdf" target=â€_blankâ€>
    <font size="2" face="Tahoma"><img class="flex"
    src="https://www.motopro24.com/filemotopr.../D0-032017.JPG" />
    </font></a></p></td>
    <td>
    <p align="center">
    <a href="http://www.motopro24.com/filemotopro...vari%20WEB.pdf" target=â€_blankâ€>
    <font size="2" face="Tahoma"><img class="flex"
    src="https://www.motopro24.com/filemotopr...A-RMS-0001.jpg" />
    </font></a></p></td>
    <td>
    <p align="center">
    <a href="http://www.motopro24.com/filemotopro...dele%20WEB.pdf" target=â€_blankâ€>
    <font size="2" face="Tahoma"><img class="flex"
    src="https://www.motopro24.com/filemotopr...A-RMS-0000.jpg" />
    </font></a></p></td></tr>
    <tr>
    <td>
    <h4 align="center"><font size="2" face="Tahoma">News DOMINO
    2017</font></h4></td>
    <td>
    <h4 align="center"><font size="2" face="Tahoma">Estratto Attrezzi e
    Accessori Vari 2017</font></h4></td>
    <td>
    <h4 align="center"><font size="2" face="Tahoma">Estratto Candele
    2017</font></h4></td></tr></tbody></table>

  2. #2
    Una tabella a tre colonne non si ridurrà mai a 1 colonna automaticamente.
    Senza seguire tutte le regole del responsive puoi mettere le immagini e il relativo testo dentro a dei div (una per div) dandogli un float:left in modo da affiancarne tre, riducendo la risoluzione i div seguiranno il flusso della pagina e andranno a capo come vuoi tu
    “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

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2012
    Messaggi
    38
    Quote Originariamente inviata da carlomarangoni Visualizza il messaggio
    Una tabella a tre colonne non si ridurrà mai a 1 colonna automaticamente.
    Senza seguire tutte le regole del responsive puoi mettere le immagini e il relativo testo dentro a dei div (una per div) dandogli un float:left in modo da affiancarne tre, riducendo la risoluzione i div seguiranno il flusso della pagina e andranno a capo come vuoi tu
    Grazie, mi hai aperto un po' la mente.

    Ho cercato e creato questo:

    codice:
    <div id="container">
    <ul id="griglia">
       <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/CA-RMS-0006-0001.jpg"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/CA-BS-0000.jpg"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/D0-110.jpg"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/CA-RMS-0001.jpg"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/CA-RMS-0000.jpg"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/D0-032017.JPG"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/fileeds/RMS/CA-RMS-0001.jpg"></li>
    </ul>
    </div>
    con css:
    codice:
    #griglia > li {
      border: 2px solid #333333;
      display: inline-block;
      width:  160px;
      height: 160px;
      margin: 10px;
      background-color: #abe2ff;
    }
    #container {
        background: #e3e3e3;
        max-width:850px;
        margin:0 auto;
        padding: 20px;
        text-align: center;
    }
    Trovo solo una difficoltà, che è quella che non riesco a dare uno spazio tra le righe che si creano, lo spazio sta solo fra immagine in orizzontale, ma non in verticale, secondo me c'è un conflitto con il css del sito, potete aiutarmi?

    THX
    Ultima modifica di Vincent.Zeno; 12-12-2017 a 12:32 Motivo: correzione formattazione

  4. #4
    codice:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    </head>
    <style>
    #griglia > li {
    border: 2px solid #333333;
    display: inline-block;
    width: 160px;
    height: 160px;
    background-color: #abe2ff;
        margin: 10px 10px 50px 10px;
    }
    #container {
    background: #e3e3e3;
    max-width:850px;
    margin:0 auto;
    padding: 20px;
    text-align: center;
    }
    </style>
    <body>
    <div id="container">
    <ul id="griglia">
       <li><img class="flex" src="https://www.emporiodelloscooter.com/...0001.jpg"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/...0000.jpg"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/...-110.jpg"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/...0001.jpg"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/...0000.jpg"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/...2017.JPG"></li>
       <li><img class="flex" src="https://www.emporiodelloscooter.com/...0001.jpg"></li>
    </ul>
    </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

  5. #5
    Utente di HTML.it
    Registrato dal
    Jan 2012
    Messaggi
    38
    grazie, avevo provato con il margin, ma devo avere qualche cosa sul sito che interferisce, e non ne vengo fuori.

    https://www.emporiodelloscooter.com/121217

    il tutto è qui

  6. #6
    Hai troppi fogli di stule che cambiano le priorità fra di loro, insomma il tuo codice è alquanto caotico! Dovresti fare un unico foglio di stile.
    Ad esempio qui:
    codice:
    #griglia > li {
      display: inline-block;
      width:  160px;
      height: 160px;
      margin: 10px;
    
      background-color: #abe2ff;
      margin: 10px 10px 50px 10px;
      border: 2px solid #333333;
    }
    hai due margin quello tuo e quello che ti ho dato io, togli il primo!
    A me aumentando/diminuendo il margin funziona sicuramente tu gai dei conflitti
    “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

  7. #7
    Utente di HTML.it
    Registrato dal
    Jan 2012
    Messaggi
    38
    approfitto ancora per chiedere, non sono esperto di css, ma ho passione e voglia di imparare.
    Ma se io inserisco per primo questo:

    #griglia {
    padding: 0;
    margin: 0;
    }

    non annulla le regole per poi impostarle su:
    #griglia > li {

  8. #8
    Nel css le regole inserite per ultime annullano le regole precedenti e le regole inserite in linea annullano le regole del foglio di stile
    “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. #9
    Utente di HTML.it
    Registrato dal
    Jan 2012
    Messaggi
    38
    ok, io ti ringrazio, mi hai dato molte info che arricchiscono il mio bagaglio.

  10. #10
    Quote Originariamente inviata da stebo85 Visualizza il messaggio
    ok, io ti ringrazio, mi hai dato molte info che arricchiscono il mio bagaglio.


    “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

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.