incastonare div per ottenere un effetto puzzle

marco4001

Utente Attivo
28 Mar 2008
30
0
0
Salve a tutti non so se questo e' l'area del forum giusta, cmq io ci provo, in caso mi bacchetterete

in sostanza il problema e' semplice da spiegare, devo realizzare una galleria fotografica con questo effetto che presenta dei div incastonati tra di loro a modi puzzle:

http://pinterest.com/alessandramr/into-the-aquarius/

ci ho provato ma il risultato e' il seguente:

http://www.ilfogliobianco.it/php/barchette_2013/boat.php?boat=1&gruppo=01-49

la mia domanda e':

come faccio a fare in modo che le foto piu' piccole vadano a incastrarsi, senza lasciare degli spazi vuoti come si vede nel mio esempio?

vi posto il codice dei div che ho utilizzato:

per la foto lunga in verticale:

div.polaroid_v1
{
width:227px;
height: 335px;
border:1px solid #BFBFBF;
background-color:white;
/* Add box-shadow */
box-shadow:2px 2px 3px #aaaaaa;
}

per la foto in orizzontale:

div.polaroid_h1
{
width:227px;
height: 223px;
border:1px solid #BFBFBF;
background-color:white;
/* Add box-shadow */
box-shadow:2px 2px 3px #aaaaaa;
}

grazie 1000 e in anticipo x l'aiuto
 

Kirsolo

Utente Attivo
17 Gen 2013
171
0
0
secondo me hai sbagliato le lunghezze dei td, fai bene i conti (tra div immagine bordi ecc..) e prova

ciao
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Forza le dimensioni delle immagini dentro al DIV (o TD) impostando width ed height di quest'ultime a 100% e dando dimensioni fisse al DIV (o TD) che le contiene in px.

Unica pecca è che le immagini potrebbero non rispettare le proporzioni tra larghezza e altezza quindi si potrebbero distorcere.
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Scusami ho sbagliato, quella che ti ho scritto è per visualizzare tutte le immagini alla stessa altezza, tu invece vuoi che le immagini sotto scorrano in alto andando a coprire quello spazio vuoto.

Crei le colonne a dimensioni fisse:
4 div con larghezza fissa espressa in pixel (l'altezza non specificarla)

Mettiamo che hai questi 4 div larghi 200px; crei il modulo foto (che sarebbero i div che compongono il contenitore delle foto, nel tuo caso lo sfondo bianco e lo sfondo grigio per il testo che va sotto la foto, dove tu ci hai scritto la data) e gli dai larghezza non superiore al div colonna.

Copi ed incolli il modulo dentro il primo div 3 o 4 volte, e poi ripeti per gli altri 3 div.

Ricorda che le foto che metti in un div, vanno in verticale quindi la seconda foto dentro il primo div non andrà sulla destra, ma sotto.

Prova tu altrimenti provo a fartela io appena posso.
 

marco4001

Utente Attivo
28 Mar 2008
30
0
0
Ho provato a seguire la tua indicazione senza successo, questo e' il codice
<style>

div.colonna1 { width:300px; }
div.colonna2 { width:300px; }

div.polaroid_h1
{float:left;
width:227px;
height: 235px;
border:1px solid #BFBFBF;
background-color:white;
/* Add box-shadow */
box-shadow:2px 2px 3px #aaaaaa;
}

div.polaroid_v1
{
float:left;
width:227px;
height: 245px;
border:1px solid #BFBFBF;
background-color:white;
/* Add box-shadow */
box-shadow:2px 2px 3px #aaaaaa;
}


.fondodata_h {
BACKGROUND-COLOR: #CCC;
padding-top:10px;
padding-bottom:10px;
padding-right: 60px;
padding-left:60px; }





</style>
</head>

<body>
<div id="colonna1">
<div class="polaroid_h1" align="center">
<p class="caption"><img src="img/Bar.jpg" width="192" height="127" /><br /><br />
<span class="fondodata">18/10/2013</span></p>
</div>
<div class="polaroid_v1" align="center">
<p class="caption"><img src="img/scarpe.jpg" width="133" height="187" /><br /><br />
<span class="fondodata">2/11/2013</span></p>
</div><div class="polaroid_h1" align="center">
<p class="caption"><img src="img/Bar.jpg" width="192" height="127" /><br /><br />
<span class="fondodata">18/10/2013</span></p>
</div>
<div class="polaroid_v1" align="center">
<p class="caption"><img src="img/scarpe.jpg" width="133" height="187" /><br /><br />
<span class="fondodata">2/11/2013</span></p>
</div><div class="polaroid_h1" align="center">
<p class="caption"><img src="img/Bar.jpg" width="192" height="127" /><br /><br />
<span class="fondodata">18/10/2013</span></p>
</div>
</div>
<div id="colonna2">
<div class="polaroid_h1" align="center">
<p class="caption"><img src="img/Bar.jpg" width="192" height="127" /><br /><br />
<span class="fondodata">18/10/2013</span></p>
</div>
<div class="polaroid_v1" align="center">
<p class="caption"><img src="img/scarpe.jpg" width="133" height="187" /><br /><br />
<span class="fondodata">2/11/2013</span></p>
</div><div class="polaroid_h1" align="center">
<p class="caption"><img src="img/Bar.jpg" width="192" height="127" /><br /><br />
<span class="fondodata">18/10/2013</span></p>
</div>
<div class="polaroid_v1" align="center">
<p class="caption"><img src="img/scarpe.jpg" width="133" height="187" /><br /><br />
<span class="fondodata">2/11/2013</span></p>
</div>
</div>

in allegato le immagini cosa ottengo con questo codice e invece cosa vorrei ottenere (cioe' l'effetto desiderato)

saluti

1a immagine immagine (cosa ottengo con il codice sopra riportato)


2a immagine cosa voglio ottenere (immagine modificata in photoshop)
 

Allegati

  • cosa_ottengo.jpg
    cosa_ottengo.jpg
    79,5 KB · Visite: 470
  • cosa_voglio_ottenere.jpg
    cosa_voglio_ottenere.jpg
    98,5 KB · Visite: 489
Ultima modifica:

marco4001

Utente Attivo
28 Mar 2008
30
0
0
risultato.jpg
Dai FLOAT: LEFT;
anche alle colonne.

fatto ti posto qui di seguito il codice:

<style>

div.colonna1 { width:300px; float:left; }
div.colonna2 { width:300px; float:left; }

div.polaroid_h1
{float:left;
width:227px;
height: 235px;
border:1px solid #BFBFBF;
background-color:white;
/* Add box-shadow */
box-shadow:2px 2px 3px #aaaaaa;
}

div.polaroid_v1
{
float:left;
width:227px;
height: 245px;
border:1px solid #BFBFBF;
background-color:white;
/* Add box-shadow */
box-shadow:2px 2px 3px #aaaaaa;
}


.fondodata_h {
BACKGROUND-COLOR: #CCC;
padding-top:10px;
padding-bottom:10px;
padding-right: 60px;
padding-left:60px; }





</style>
</head>

<body>
<div id="colonna1">
<div class="polaroid_h1" align="center">
<p class="caption"><img src="img/Bar.jpg" width="192" height="127" /><br /><br />
<span class="fondodata">18/10/2013</span></p>
</div>
<div class="polaroid_v1" align="center">
<p class="caption"><img src="img/scarpe.jpg" width="133" height="187" /><br /><br />
<span class="fondodata">2/11/2013</span></p>
</div><div class="polaroid_h1" align="center">
<p class="caption"><img src="img/Bar.jpg" width="192" height="127" /><br /><br />
<span class="fondodata">18/10/2013</span></p>
</div>
<div class="polaroid_v1" align="center">
<p class="caption"><img src="img/scarpe.jpg" width="133" height="187" /><br /><br />
<span class="fondodata">2/11/2013</span></p>
</div><div class="polaroid_h1" align="center">
<p class="caption"><img src="img/Bar.jpg" width="192" height="127" /><br /><br />
<span class="fondodata">18/10/2013</span></p>
</div>
</div>
<div id="colonna2">
<div class="polaroid_h1" align="center">
<p class="caption"><img src="img/Bar.jpg" width="192" height="127" /><br /><br />
<span class="fondodata">18/10/2013</span></p>
</div>
<div class="polaroid_v1" align="center">
<p class="caption"><img src="img/scarpe.jpg" width="133" height="187" /><br /><br />
<span class="fondodata">2/11/2013</span></p>
</div><div class="polaroid_h1" align="center">
<p class="caption"><img src="img/Bar.jpg" width="192" height="127" /><br /><br />
<span class="fondodata">18/10/2013</span></p>
</div>
<div class="polaroid_v1" align="center">
<p class="caption"><img src="img/scarpe.jpg" width="133" height="187" /><br /><br />
<span class="fondodata">2/11/2013</span></p>
</div>
</div><div class="polaroid_h1" align="center">
<p class="caption"><img src="img/Bar.jpg" width="192" height="127" /><br /><br />
<span class="fondodata">18/10/2013</span></p>
</div>
</div>

Ma il risultato rimane errato la foto della seconda riga dovrebbe attacarsi in alto invece rimane staccata :(

risultato.jpg
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
HTML:
<html>
	<head>
		<title>
		</title>
		<style type="text/css">
			#colonna1			{float:left; width: 300px; background: #66AA66;}
			#colonna2			{float:left; width: 300px; background: #0066CC;}
			#colonna3			{float:left; width: 300px; background: #FF9933;}
				div.polaroid_h1	{            width: 227px; background: #FFFFFF; border: 1px solid #BFBFBF; margin: 00px auto 20px auto; /* Add box-shadow */ box-shadow: 2px 2px 3px #aaaaaa;}
				div.polaroid_v1	{            width: 227px; background: #FFFFFF; border: 1px solid #BFBFBF; margin: 00px auto 20px auto; /* Add box-shadow */ box-shadow: 2px 2px 3px #aaaaaa;}
					.thumb		{            width: 180px;}
					.fondodata	{                          background: #CCCCCC; padding: 10px 60px 10px 60px;}
		</style>
	</head>
	<body>
		<div id="colonna1">
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/1.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
			<div class="polaroid_v1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/Desert.jpg" class="thumb" /><br /><br /><span class="fondodata">2/11/2013</span></p>
			</div>
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/4.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
			<div class="polaroid_v1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/1.jpg" class="thumb" /><br /><br /><span class="fondodata">2/11/2013</span></p>
			</div>
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/4.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
		</div><!-- Fine Colonna 1 -->
		<div id="colonna2">
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/Desert.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
			<div class="polaroid_v1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/4.jpg" class="thumb" /><br /><br /><span class="fondodata">2/11/2013</span></p>
			</div>
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/1.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
			<div class="polaroid_v1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/Desert.jpg" class="thumb" /><br /><br /><span class="fondodata">2/11/2013</span></p>
			</div>
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/4.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
		</div><!-- Fine Colonna 2 -->
		<div id="colonna3">
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/4.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
			<div class="polaroid_v1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/Desert.jpg" class="thumb" /><br /><br /><span class="fondodata">2/11/2013</span></p>
			</div>
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/1.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
			<div class="polaroid_v1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/4.jpg" class="thumb" /><br /><br /><span class="fondodata">2/11/2013</span></p>
			</div>
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/1.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
		</div><!-- Fine Colonna 3 -->
	</body>
</html>
Hai sbagliato la chiusura di alcuni tag, ti ho riscritto tutto il sorgente, prima di inserirlo nella tua pagina, leggilo perbene e comprendilo, è semplice ma almeno sai bene come funziona e come metterci le mani.
PS. Se fai copia e incolla l'indentazione dovrebbe vedersi correttamente anche se qui si vede da schifo.
 

marco4001

Utente Attivo
28 Mar 2008
30
0
0
1000 grazie

HTML:
<html>
	<head>
		<title>
		</title>
		<style type="text/css">
			#colonna1			{float:left; width: 300px; background: #66aa66;}
			#colonna2			{float:left; width: 300px; background: #0066cc;}
			#colonna3			{float:left; width: 300px; background: #ff9933;}
				div.polaroid_h1	{            width: 227px; background: #ffffff; border: 1px solid #bfbfbf; margin: 00px auto 20px auto; /* add box-shadow */ box-shadow: 2px 2px 3px #aaaaaa;}
				div.polaroid_v1	{            width: 227px; background: #ffffff; border: 1px solid #bfbfbf; margin: 00px auto 20px auto; /* add box-shadow */ box-shadow: 2px 2px 3px #aaaaaa;}
					.thumb		{            width: 180px;}
					.fondodata	{                          background: #cccccc; padding: 10px 60px 10px 60px;}
		</style>
	</head>
	<body>
		<div id="colonna1">
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/1.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
			<div class="polaroid_v1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/desert.jpg" class="thumb" /><br /><br /><span class="fondodata">2/11/2013</span></p>
			</div>
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/4.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
			<div class="polaroid_v1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/1.jpg" class="thumb" /><br /><br /><span class="fondodata">2/11/2013</span></p>
			</div>
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/4.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
		</div><!-- fine colonna 1 -->
		<div id="colonna2">
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/desert.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
			<div class="polaroid_v1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/4.jpg" class="thumb" /><br /><br /><span class="fondodata">2/11/2013</span></p>
			</div>
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/1.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
			<div class="polaroid_v1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/desert.jpg" class="thumb" /><br /><br /><span class="fondodata">2/11/2013</span></p>
			</div>
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/4.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
		</div><!-- fine colonna 2 -->
		<div id="colonna3">
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/4.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
			<div class="polaroid_v1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/desert.jpg" class="thumb" /><br /><br /><span class="fondodata">2/11/2013</span></p>
			</div>
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/1.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
			<div class="polaroid_v1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/4.jpg" class="thumb" /><br /><br /><span class="fondodata">2/11/2013</span></p>
			</div>
			<div class="polaroid_h1" align="center">
				<p class="caption"><img src="http://www.ilfogliobianco.it/php/barchette_2013/form/upload/1.jpg" class="thumb" /><br /><br /><span class="fondodata">18/10/2013</span></p>
			</div>
		</div><!-- fine colonna 3 -->
	</body>
</html>
hai sbagliato la chiusura di alcuni tag, ti ho riscritto tutto il sorgente, prima di inserirlo nella tua pagina, leggilo perbene e comprendilo, è semplice ma almeno sai bene come funziona e come metterci le mani.
Ps. Se fai copia e incolla l'indentazione dovrebbe vedersi correttamente anche se qui si vede da schifo.
 
Discussioni simili
Autore Titolo Forum Risposte Data
E Creare un testo trasparente dietro un div HTML e CSS 5
F Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni? Javascript 0
M Accordion menu e posizione div HTML e CSS 0
P jquery refresh div non funziona Javascript 0
P refresh div + scrittura/lettura dal db Javascript 1
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2
A Javascript Nascondere Div con id numerico dinamico Javascript 18
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
paloppa Div che appare appena due form sono compilati jQuery 16
S [javascript] visualizzare/nascondere div Javascript 3
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
G [HTML] Modificare ordine dei div in mobile responsive HTML e CSS 5
D [HTML] Frameset e Div HTML e CSS 8
G [HTML] Impostare dimensione immagini in un div HTML e CSS 2
L php - pulsante premuto che mostra #div PHP 3
S [HTML] Div visibile o nascosto al passaggio del mouse HTML e CSS 3
C [Javascript] Mostrare un div cliccando una checkbox Javascript 0
M Ottenere i valori di una proprietà su un array di oggetti (es. DIV) in JavaScript Javascript 7
C Nascondere un div al click di una casella Ajax 1
S [HTML] Distanza esatta tra due div HTML e CSS 7
G [HTML] Posizionamento testo in un div HTML e CSS 5
trattorino css solo se richiama un class di un div HTML e CSS 1
G [HTML] Bordo bianco sotto immagine in un Div HTML e CSS 1

Discussioni simili