[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
 

andreas88

Utente Attivo
31 Ott 2009
125
0
16
Lecce
Allego immagine
 

Allegati

  • esempio.png
    esempio.png
    488,6 KB · Visite: 189

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.371
338
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

  • zoom.PNG
    zoom.PNG
    183 KB · Visite: 186

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.371
338
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.371
338
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

  • cattura 2.JPG
    cattura 2.JPG
    102,4 KB · Visite: 176
  • cattura 3.JPG
    cattura 3.JPG
    121,9 KB · Visite: 181
  • Cattura.JPG
    Cattura.JPG
    105,4 KB · Visite: 169

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.371
338
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
 

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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
A inserire variabile php colore in div html PHP 2
napuleone [HTML] type="file" inserire path di partenza HTML e CSS 4
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
M [PHP] Come inserire codice html in un ciclo while PHP 2
Shyson [HTML] Inserire nuovo font con @font-face HTML e CSS 5
D [Javascript] [HTML] Inserire slash dopo 3 numeri Javascript 5
A [HTML] Come inserire google review stars nelle pagine del mio sito HTML e CSS 0
M [wordpress-galleria immagini]Inserire classe php in html PHP 0
M [HTML] Inserire un div tra altri div già esistenti HTML e CSS 7
nab23 Inserire 'share bottons' in un sito html/css HTML e CSS 7
T [HTML] Inserire barra di ricerca che ricerca solo le pagine del proprio sito HTML e CSS 6
Bubà [HTML] Widget per inserire instagram a lato del blog HTML e CSS 1
E [PHP] inserire HTML in una stringa PHP 16
F [HTML] Inserire testo all'interno di una div con border radius HTML e CSS 2
L inserire una pagina html al di fuori del CMS HTML e CSS 3
L Inserire Script Jquery in immagine html con zone cliccabili jQuery 2
B Inserire codice html per visualizzazione in altro sito web HTML e CSS 3
L [PHP/HTML] Inserire metodo di pagamento PHP 4
Devil-94 Javascript: script che permetta di inserire immagini in un certo elemento html. Javascript 2
E come inserire un codice html su facebook HTML e CSS 4
T [risolto]Inserire in una variabile del codice HTML e poi cercare in quella variabile con getelements Javascript 8
D Inserire una pagina html nel proprio sito tramite il cms di prestashop Content Management System (CMS) 0
C Inserire Valori Da Un File Js In Una Tabella Html Javascript 19
voldemort Inserire commenti in HTML HTML e CSS 5
M inserire un calendario settimanale su una pagina html, aggiornabile dall'esterno. HTML e CSS 11
J Inserire codice javascript in html Javascript 3
A Inserire codice html gooole maps in una variabile php PHP 1
B Inserire codice html di un banner su pagina web HTML e CSS 1
M Inserire in text Html valore variabile asp Classic ASP 3
asevenx inserire tag html con un file esterno HTML e CSS 2
B Inserire video in un'immagine in una pagine HTML HTML e CSS 3
A inserire xml in html HTML e CSS 0
A inserire xml in html? XML 5
J inserire oggetto flash in pagina html, cambiamenti? Flash 0
U Come inserire un video mpeg in una pagina html valida?? HTML e CSS 1
D inserire sfondo con l'html HTML e CSS 1
F Inserire HTML del document in una variabile Javascript 4
C inserire ora e data in file html generato da javascript Javascript 5
G Inserire il contenuto di un'altro sito all'interno di una tua pagina html HTML e CSS 1
C html: inserire codice banner HTML e CSS 0
X inserire file.class in html HTML e CSS 2
F Creare elementi html con javascript Javascript 0
G Appicazione HTML per inserimento dai in Database Access Microsoft HTML e CSS 0
W visualizzare solo file html e sottocartelle di una cartella PHP 1
C Dopo chiusura del tag php la stringa html va a capo PHP 1
G img html HTML e CSS 3
M Come fare un countdown in HTML? HTML e CSS 4
D Stampa a video in altra pagina html Database 3
F Tv in html Offerte e Richieste di Lavoro e/o Collaborazione 1
N Script elenco file HTML HTML e CSS 5

Discussioni simili