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

andreas88

Utente Attivo
31 Ott 2009
129
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
 
Allego immagine
 

Allegati

  • esempio.png
    esempio.png
    488,6 KB · Visite: 555
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>
 
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

  • zoom.PNG
    zoom.PNG
    183 KB · Visite: 508
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
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à
 
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
 
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

  • cattura 2.JPG
    cattura 2.JPG
    102,4 KB · Visite: 479
  • cattura 3.JPG
    cattura 3.JPG
    121,9 KB · Visite: 530
  • Cattura.JPG
    Cattura.JPG
    105,4 KB · Visite: 459
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
 
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.
 

Discussioni simili