[HTML] come inserire 3 riquadri in un unico rigo (vedere img allegata)

Discussione in 'HTML e CSS' iniziata da andreas88, 20 Maggio 2018.

Tag (etichette):
  1. andreas88

    andreas88 Utente Attivo

    Registrato:
    31 Ottobre 2009
    Messaggi:
    123
    Mi Piace Ricevuti:
    0
    Punteggio:
    16
    Località:
    Lecce
    Salve a tutti,
    vorrei creare una index formata da 3 riquadri di promozione di eventi in un unico rigo... per capirci meglio posto un sito dove ho trovato ciò che vorrei creare sul mio di sito: vedi qui un esempio
    Come si può vedere ogni rigo è formato da 3 eventi di promozione turistica, ecco io vorrei realizzare un qualcosa di simile.

    Qualcuno potrebbe aiutarmi a creare questo?
    Grazie mille
    Andrea
     
  2. andreas88

    andreas88 Utente Attivo

    Registrato:
    31 Ottobre 2009
    Messaggi:
    123
    Mi Piace Ricevuti:
    0
    Punteggio:
    16
    Località:
    Lecce
    Allego immagine
     

    Files Allegati:

  3. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.431
    Mi Piace Ricevuti:
    261
    Punteggio:
    83
    Sesso:
    Maschio
    HTML:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    <style type="text/css">
    #contenitore {
        margin: 0px;
        padding: 0px;
    }
    #primo, #secondo, #terzo {
        margin: 10px;
        padding: 0px;
        float: left;
        width: 249px;
        height: 249px;
    }
    #clear {
        clear: both;
    }
    </style>
    </head>
    
    <body>
    <div id="contenitore">
      <div id="primo">
          <img src="https://vivi.imgix.net/images/viviparigi/viviparigi/Eiffel-Torre.jpg?auto=enhance%2Cformat%2Credeye&crop=entropy&fit=crop&h=249&ixlib=php-1.2.1&q=90&w=249&s=ee3916d4bd74ca3f6d844a056d749fe3" width="249" height="249" alt="img"> <br>
         Torre Eiffel: Visita l'icona di Parigi
    "Non esiste un monumento che simboleggia meglio Parigi della Dama di Ferro". Maupassant disse
      </div>
      <div id="secondo"> <img src="https://vivi.imgix.net/images/viviparigi/01/Parigi-Notre-Dame.jpg?auto=enhance%2Cformat%2Credeye&crop=entropy&fit=crop&h=249&ixlib=php-1.2.1&q=90&w=249&s=9021b9cb2306a0d238058f1b0294a68e" alt="imh" width="249" height="249"><br>
         Notre Dame de Paris: Visita la Cattedrale più celebre di Parigi
    Notre Dame de Paris non è soltanto il celebre musical musicato e sceneggiato dalla
      </div>
      <div id="terzo">
          <img src="https://vivi.imgix.net/images/viviparigi/01/Reggia_di_Versailles_Francia.jpg?auto=enhance%2Cformat%2Credeye&crop=entropy&fit=crop&h=249&ixlib=php-1.2.1&q=90&w=249&s=0ab438f4a8c90263f207166e26c1b285" alt="imh" width="249" height="249"><br>
         Reggia di Versailles: I giardini e la residenza del Re Sole
    La Reggia di Versailles, situata nell'Île de France, è entrata a far parte dei Patrimoni dell'Umanità
         <div id="clear">&nbsp;</div>
      </div>
    </div>
        
    </div>
    </body>
    </html>
     
  4. andreas88

    andreas88 Utente Attivo

    Registrato:
    31 Ottobre 2009
    Messaggi:
    123
    Mi Piace Ricevuti:
    0
    Punteggio:
    16
    Località:
    Lecce
    Perfetto!!! Grazie mille.
    E se volessi fare tipo un'ombra al passaggio del mouse?
    Puoi vedere l'esempio alla stessa pagina sopra indicata (ti allego sezione)
    Grazie
     

    Files Allegati:

    • zoom.PNG
      zoom.PNG
      Dimensione del file:
      183 KB
      Visite:
      57
  5. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.431
    Mi Piace Ricevuti:
    261
    Punteggio:
    83
    Sesso:
    Maschio
    HTML:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    <style type="text/css">
    #contenitore {
        margin: 0px;
        padding: 0px;
    }
    #primo, #secondo, #terzo {
        margin: 10px;
        padding: 0px;
        float: left;
        width: 249px;
    }
    #primo:hover, #secondo:hover, #terzo:hover {
        -webkit-box-shadow: 5px 5px 10px 1px #000000;
    box-shadow: 5px 5px 10px 1px #000000;
    }
    #clear {
        clear: both;
    }
    </style>
    </head>
    
    <body>
    <div id="contenitore">
      <div id="primo">
          <img src="https://vivi.imgix.net/images/viviparigi/viviparigi/Eiffel-Torre.jpg?auto=enhance%2Cformat%2Credeye&crop=entropy&fit=crop&h=249&ixlib=php-1.2.1&q=90&w=249&s=ee3916d4bd74ca3f6d844a056d749fe3" width="249" height="249" alt="img"> <br>
         Torre Eiffel: Visita l'icona di Parigi
    "Non esiste un monumento che simboleggia meglio Parigi della Dama di Ferro". Maupassant disse
      </div>
      <div id="secondo"> <img src="https://vivi.imgix.net/images/viviparigi/01/Parigi-Notre-Dame.jpg?auto=enhance%2Cformat%2Credeye&crop=entropy&fit=crop&h=249&ixlib=php-1.2.1&q=90&w=249&s=9021b9cb2306a0d238058f1b0294a68e" alt="imh" width="249" height="249"><br>
         Notre Dame de Paris: Visita la Cattedrale più celebre di Parigi
    Notre Dame de Paris non è soltanto il celebre musical musicato e sceneggiato dalla
      </div>
      <div id="terzo">
          <img src="https://vivi.imgix.net/images/viviparigi/01/Reggia_di_Versailles_Francia.jpg?auto=enhance%2Cformat%2Credeye&crop=entropy&fit=crop&h=249&ixlib=php-1.2.1&q=90&w=249&s=0ab438f4a8c90263f207166e26c1b285" alt="imh" width="249" height="249"><br>
         Reggia di Versailles: I giardini e la residenza del Re Sole
    La Reggia di Versailles, situata nell'Île de France, è entrata a far parte dei Patrimoni dell'Umanità
         <div id="clear">&nbsp;</div>
      </div>
    </div>
       
    </div>
    </body>
    </html>
    
     
    Ultima modifica: 21 Maggio 2018
    A andreas88 piace questo elemento.
  6. andreas88

    andreas88 Utente Attivo

    Registrato:
    31 Ottobre 2009
    Messaggi:
    123
    Mi Piace Ricevuti:
    0
    Punteggio:
    16
    Località:
    Lecce
    Grazie mille per l'aiuto, molto gentile.
    Andrea
     
  7. andreas88

    andreas88 Utente Attivo

    Registrato:
    31 Ottobre 2009
    Messaggi:
    123
    Mi Piace Ricevuti:
    0
    Punteggio:
    16
    Località:
    Lecce
    Volevo far notare che dopo aver inserito il codice html come suggerito non mi permette di scrivere del testo a seguire... faccio un esempio: ho creato una pagina con un testo <h1>titolo</h1> a seguire con un paragrafo ho inserito del testo di una decina di righe, poi ho inserito il codice sopra suggerito e funziona perfettamente (era appunto ciò che cercavo) inserite 3-4 righe di cui avevo bisogno ho riscontrato poi diversi intoppi:
    1) perché non riesco a scrivere ulteriore testo dopo il codice sopra indicato? Ho risolto inserendo una ventina di <br> ma non credo sia una soluzione adatta anche perché da mobile gli spazi son diversi.
    2) perché se la visualizzazione dello schermo è maggiore (esempio 150%) si sovrappongono i riguardi?

    Come posso sistemare ciò?
    Grazie mille per la disponibilità
     
  8. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.431
    Mi Piace Ricevuti:
    261
    Punteggio:
    83
    Sesso:
    Maschio
    Se usi il secondo codice che ti ho dato non il primo puoi aggiungere testo dove e come vuoi! Inoltre se cambi risoluzione come un mobile. i box non si sovrappongono ma vanno a capo e questo è ovvio perché le immagini e i box hanno una misura fissa, per non andare a capo e rimanere affiancati bisogna che tu li renda responsive cambiando le dimensioni a secondo della risoluzione usata
     
  9. andreas88

    andreas88 Utente Attivo

    Registrato:
    31 Ottobre 2009
    Messaggi:
    123
    Mi Piace Ricevuti:
    0
    Punteggio:
    16
    Località:
    Lecce
    Per quanto riguarda la risoluzione, si è box vanno a capo ma se il testo è superiore a 5-6 righe il box superiore si sovrappone al box inferiore, comunque l'ho risolto impostando un'altezza fissa e del testo di max 3 righe.
    Ho copiato fedelmente il secondo codice che mi hai fornito e ti allego il risultato.
    La pagina dovrebbe avere questa struttura.: titolo - testo - miniature box come descritto sopra - testo.
    Come si può vedere sul lato destro compare del testo che andrebbe posizionato sotto i box 3 o 9 che siano.
    I "servizi a Otranto" andrebbero posizionati sopra il testo "collaborazioni" e sotto i tre riquadri offerti da getyourguide

    Per il resto ho fatto copia+incolla del tuo codice che mi hai fornito e posizionato gli "<style)" nel mio file .css
     

    Files Allegati:

  10. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.431
    Mi Piace Ricevuti:
    261
    Punteggio:
    83
    Sesso:
    Maschio
    Sbagli qualche cosa!
    Non devi non va bene che hai aggiunto ai box misure fisse!
    Come puoi vedere i box non si sovrappongono senza aggiungere misure fisse e anche se metti molte righe di testo
    Vedi qui se va bene
     
  11. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.431
    Mi Piace Ricevuti:
    261
    Punteggio:
    83
    Sesso:
    Maschio
    Hai poi risolto?
     
  12. andreas88

    andreas88 Utente Attivo

    Registrato:
    31 Ottobre 2009
    Messaggi:
    123
    Mi Piace Ricevuti:
    0
    Punteggio:
    16
    Località:
    Lecce
    Si, l'ho provato ieri e credo di aver risolto, era ciò che cercavo grazie al secondo codice e alla pagina di esempio che mi ha inviato.
    Ti ringrazio per l'aiuto.
     
Sto caricando...

Condividi questa Pagina