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

andreas88

Utente Attivo
31 Ott 2009
125
0
16
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
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.185
312
83
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>
 

andreas88

Utente Attivo
31 Ott 2009
125
0
16
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
 

Allegati

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.185
312
83
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:
  • Like
Reactions: andreas88

andreas88

Utente Attivo
31 Ott 2009
125
0
16
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à
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.185
312
83
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
 

andreas88

Utente Attivo
31 Ott 2009
125
0
16
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
 

Allegati

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.185
312
83
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
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.185
312
83
Hai poi risolto?
 

andreas88

Utente Attivo
31 Ott 2009
125
0
16
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.