Visualizzazione dei risultati da 1 a 6 su 6
  1. #1

    Sfasamento di finestre di immagini

    Ciao a tutti,
    a questa pagina si puo' vedere come l'ultima fila di immagini sia sfalsata (1 sopra e 2 sotto).

    Il codice e' il seguente. Non riesco a capire come risolvere. Cosa ne dite?
    codice HTML:
    <div class="gallery"><a href="/wp-content/uploads/2020/03/HotPotMilan.jpg" target="_blank" rel="noopener noreferrer"><img src="/wp-content/uploads/2020/03/HotPotMilan.jpg" alt="Hotpot Milan" /></a><div class="desc">A good hotpot in Milan</div></div>
    <div class="gallery"><a href="/wp-content/uploads/2020/03/Typical street.jpg" target="_blank" rel="noopener noreferrer"><img src="/wp-content/uploads/2020/03/Typical street.jpg" alt="Creuza" /></a><div class="desc">Typical street of Boccadasse</div></div>
    <div class="gallery"><a href="/wp-content/uploads/2020/03/Sticks.jpg" target="_blank" rel="noopener noreferrer"><img src="/wp-content/uploads/2020/03/Sticks.jpg" alt="Sticks" /></a><div class="desc">Wooden sticks in Cot Cos restaurans. 1 stick = 1 steak.</div></div>

  2. #2
    Il problema è che la pagina non è responsive! Se la guardi con una risoluzione superiore ai 750px la vedi bene se la risoluzione è inferiore la vedi come tu dici
    “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
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,763
    il problema che lamenti è dovuto al fatto che i contenitori in questione hanno dimensioni diversa in altezza.
    volendoli flottare, se il contenitore che torna a capolinea "si scontra" con l'altezza di un precedente contenitore, questo si blocca e non va a capolinea.
    i contenitori a seguire si comportano di conseguenza e creano nuove linee.

    per risolvere elegantemente puoi utilizzare flexbox con proprietà flex-wrap, altrimenti devi fare molta attenzione affinché tutti i contenitori abbiano altezza identiche.

  4. #4
    Quote Originariamente inviata da carlomarangoni Visualizza il messaggio
    Il problema è che la pagina non è responsive!
    Eppure il tema e' responsive! come posso risolvere?

    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    per risolvere elegantemente puoi utilizzare flexbox con proprietà flex-wrap, altrimenti devi fare molta attenzione affinché tutti i contenitori abbiano altezza identiche.

    Ottimo grazie

  5. #5
    Questo perche' noto che anche a questa pagine ho creato una mappa ma non funziona sul mobile.
    Se ne puo' creare una css anche in questo caso?
    codice:
    <map name="workmap">  <area shape="rect" coords="0,0,115,115" alt="Hong Kong" href="/index.php?page_id=1539">
      <area shape="rect" coords="115,0,230,115" alt="Gansu" href="/index.php?page_id=1683">
      <area shape="rect" coords="230,0,345,115" alt="Monte Cinto" href="/index.php?page_id=298">

  6. #6
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,763
    è un'altro argomento, sarebbe necessario aprirci un'altro thead.

    per rimappare una map area serve un supporto JS, qui un paio di esempi.
    https://github.com/stowball/jQuery-rwdImageMaps
    https://www.lachiavenelpozzo.com/com...immagini-mappa

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