incastonare div per ottenere un effetto puzzle

M

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
 
secondo me hai sbagliato le lunghezze dei td, fai bene i conti (tra div immagine bordi ecc..) e prova

ciao
 
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.
 
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.
 
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: 525
  • cosa_voglio_ottenere.jpg
    cosa_voglio_ottenere.jpg
    98,5 KB · Visite: 556
Ultima modifica:
risultato.jpg
Jonn ha scritto:
Dai FLOAT: LEFT;
anche alle colonne.
Clicca per allargare...

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
 
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.
 
1000 grazie

jonn ha scritto:
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.
Clicca per allargare...
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

E
Creare un testo trasparente dietro un div
Risposte
5
Visite
3K
HTML e CSS
WmbertSea
WmbertSea
F
Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni?
Risposte
0
Visite
609
Javascript
fede12
F
M
Accordion menu e posizione div
Risposte
0
Visite
1K
HTML e CSS
miagy
M
P
jquery refresh div non funziona
Risposte
0
Visite
953
Javascript
psicona
P
P
refresh div + scrittura/lettura dal db
Risposte
1
Visite
812
Javascript
marino51
marino51
napuleone
  • Bloccata
div centrato alla pagina posto sopra ai contenuti
Risposte
1
Visite
2K
HTML e CSS
Max 1
Max 1
M
Unire 2 funzioni per l'invio di un form e con l'apertura di un div
Risposte
0
Visite
1K
Javascript
maxnegri2036
M
Cosina
Nascondere div di default
Risposte
2
Visite
3K
jQuery
Cosina
Cosina
napuleone
modificare il contenitore di un div
Risposte
2
Visite
1K
Javascript
napuleone
napuleone
napuleone
  • Bloccata
modificare il contenitore di un div
Risposte
1
Visite
881
Javascript
Max 1
Max 1
A
inserire variabile php colore in div html
Risposte
2
Visite
2K
PHP
AndreaCerre
A
J
Far comparire e scomparire un div con un select
Risposte
1
Visite
3K
Javascript
Max 1
Max 1
T
Far sparire dalla pagina div che saranno inseriti successivamente
Risposte
0
Visite
3K
jQuery
the_indios
T
E
Div che scompare con scroll jquery
Risposte
0
Visite
1K
Javascript
enzo7903
E
G
Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna
Risposte
5
Visite
3K
HTML e CSS
Max 1
Max 1
Stefano Migotto
Creazione di un div con php o js
Risposte
9
Visite
3K
PHP
Tommy03
Tommy03
felino
Bootstrap alert: usare lo stesso div per due messaggi consecutivi
Risposte
1
Visite
2K
jQuery
MarcoGrazia
MarcoGrazia
S
Visibilità div in PHP
Risposte
1
Visite
1K
PHP
otto9due
otto9due
L
[Javascript]Scorrere div con frecce avanti-indietro
Risposte
0
Visite
2K
Javascript
lazlo
L
P
[Javascript] Aprire Link in Div e pagina Dinamica
Risposte
0
Visite
2K
Javascript
pianeta0
P
Alto Basso