problema centratura immagine piccola nella galleria

[blekm]

prendendo spunto da una galleria di cssplay.co.uk, andate qua

http://blekm.altervista.org/gallery.html

siccome mi creerò le immagini piccole tramite php in maniera dinamica, avrei bisogno di una cosa:

le ultime 4 thumbnail sono una orizzontale e tre verticali, vorrei sapere come fare per centrarle nel quadratino piccolo nero... adesso invece mi si ripetono... le mie immagini avranno diverse proporzioni:

immagine orizzontale
larghezza 75 altezza in proporzione

immagine verticale
altezza 75 larghezza in proporzione

a prescindere dalle dimensioni, vorrei centrare le immagini piccoline nel quadratino nero...

[H5N1_Aviaria]

Provato con text-align:center nel parent (quadratino nero) e margin:0 auto nell'immagine?

[blekm]

Originariamente inviato da H5N1_Aviaria
Provato con text-align:center nel parent (quadratino nero) e margin:0 auto nell'immagine?

#container 
{
	position:relative;
	width:360px;
	height:500px;
	background: #b0b0b0;
	border:1px solid #000;
	margin:1px auto;
}

a.gallery, a.gallery:visited
{
	display:inline;
	text-decoration:none; 
	border:1px solid #000;
	width:75px;
	height:75px; 
	float:left;
	margin:1px 6px; 
	position:relative;
	cursor:default;
        text-align: center;
}
a.slidea {background:url(sph1.jpg);}
a.slideb {background:url(sph2.jpg);}
a.slidec {background:url(sph3.jpg);}
a.slided {background:url(sph4.jpg);}
a.slidee {background:url(sph5.jpg);}
a.slidef {background:url(spv1t.jpg);}
a.slideg {background:url(spv2t.jpg);}
a.slideh {background:url(spv3t.jpg);}

a.gallery span 
{
	visibility:hidden;
	display:block;
	position:absolute; 
	width:360px; 
	height:310px;
	text-align:center; 
	font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
	cursor:default;
}
a.slidea span {left:-13px; top:180px;}
a.slideb span {left:-102px; top:180px;}
a.slidec span {left:-191px; top:180px;}
a.slided span {left:-280px; top:180px;}
a.slidee span {left:-13px; top:100px;}
a.slidef span {left:-98px; top:89px;}
a.slideg span {left:-187px; top:89px;}
a.slideh span {left:-276px; top:89px;}

a.gallery:hover
{
	white-space:normal;
	border:1px solid #fff;
	z-index:100;
}
a.gallery:hover span 
{
	visibility:visible;
	z-index:100;
}
a.gallery:hover span img
{
	margin:10px;
	border:1px solid #000;
	position:relative;
	z-index:100;
}
a.gallery:active, a.gallery:focus
{
	border:1px solid #c00;
	z-index:10;
}
a.gallery:active span, a.gallery:focus span
{
	visibility:visible;
	z-index:10;
}
a.gallery:active span img, a.gallery:focus span img
{
	border:1px solid #000;
	position:relative;
	margin:1px;
	z-index:10;
}

ho impostato text-align: center; al tag a.gallery, a.gallery:visited
ma dove devo impostare il margin: 0 auto? :master:

[H5N1_Aviaria]

Ho notato che usi un posizionamento indipendente per ogni immagine.
Se vuoi centrare l'immagine in basso (a span img) e fare in modo che non si "sposti" al click (come avviene adesso devi impostare lo stesso stile che usi per hover anche per active e focus:

a.gallery:active span img, a.gallery:focus span img
{
	margin:10px;
	border:1px solid #000;
	position:relative;
	z-index:100;
}

[blekm]

Originariamente inviato da H5N1_Aviaria
Ho notato che usi un posizionamento indipendente per ogni immagine.
Se vuoi centrare l'immagine in basso (a span img) e fare in modo che non si "sposti" al click (come avviene adesso devi impostare lo stesso stile che usi per hover anche per active e focus:

a.gallery:active span img, a.gallery:focus span img
{
	margin:10px;
	border:1px solid #000;
	position:relative;
	z-index:100;
}

grazie per questa correzione. Pensi che esista una maniera per rendere il posizionamento delle immagini grandi centrato senza usare posizionamenti indipendenti?

Comunque, rimango sempre col problema del posizionamento della thumbnail più piccola...

[H5N1_Aviaria]

Le immagini nel "quadratino" vengono visualizzate come sfondi.

a.slidea {background:url(sph1.jpg) 50% 50% no-repeat;}
a.slideb {background:url(sph2.jpg) 50% 50% no-repeat;}
a.slidec {background:url(sph3.jpg) 50% 50% no-repeat;}
a.slided {background:url(sph4.jpg) 50% 50% no-repeat;}
a.slidee {background:url(sph5.jpg) 50% 50% no-repeat;}
a.slidef {background:url(spv1t.jpg) 50% 50% no-repeat;}
a.slideg {background:url(spv2t.jpg) 50% 50% no-repeat;}
a.slideh {background:url(spv3t.jpg) 50% 50% no-repeat;}

dovrebbe risolvere.

[blekm]

Originariamente inviato da H5N1_Aviaria
Le immagini nel "quadratino" vengono visualizzate come sfondi.

a.slidea {background:url(sph1.jpg) 50% 50% no-repeat;}
a.slideb {background:url(sph2.jpg) 50% 50% no-repeat;}
a.slidec {background:url(sph3.jpg) 50% 50% no-repeat;}
a.slided {background:url(sph4.jpg) 50% 50% no-repeat;}
a.slidee {background:url(sph5.jpg) 50% 50% no-repeat;}
a.slidef {background:url(spv1t.jpg) 50% 50% no-repeat;}
a.slideg {background:url(spv2t.jpg) 50% 50% no-repeat;}
a.slideh {background:url(spv3t.jpg) 50% 50% no-repeat;}

dovrebbe risolvere.

grande, cosi funziona.

Avrei un'ultima domanda per te, abuso della tua gentilezza

questo è l'originale

http://www.cssplay.co.uk/menu/gallery.html

quando clicchi su una foto, rimane quella (visualizzata grande, intendo) e poi quando passi il mouse sopra un altra foto appare quella nuova.

Invece nel mio caso, se clicco, rimane una foto attiva grande, e anche quando faccio HOVER su un altra foto, quella precedente mi rimane fissata.. come mai? :master: è lo stesso codice..

prova con un clic, e poi hover per cambiare foto...

[H5N1_Aviaria]

Perchè nel caso di Stu c'è uno sfondo nello span conteitore che copre l'immagine sottostante

[blekm]

Originariamente inviato da H5N1_Aviaria
Perchè nel caso di Stu c'è uno sfondo nello span conteitore che copre l'immagine sottostante

e io allo sfondo ho cambiato colore..

grazie ancora, davvero

[H5N1_Aviaria]

Imposta un qualsiasi colore (anche lo stesso del container) per a.gallery span e risolvi