[Resolvido] Listagem miniaturas em uma galeria

Não aplique na img, mas sim no container, no LI

e lembre-se de por um display: inline, para evitar as margins duplicadas do IE.

Agora, pergunta minha.. pq esses max- ? crie logo um container de dimensões bem definidas.

#galerias_minis li {

 float: left;
 width: 100px;
 height: 100px;
 margin: 2px;
 display: inline;
 border: 2px solid #f90;
 overflow: hidden;
}

Respondendo à sua pergunta sobre o "max-", eu coloquei pq a minha galeria de fotos terá exatamente no máximo 100px de altura ou 100px de largura, vai depender da posição como a foto se encontra (horizontal ou vertical).

Pra eu não botar 100x100, pois pode ocorrer de uma linha completa da minha galeria estar com fotos na horizontais, então a altura dele será de 75px, e se eu definir como 100px fixo, vou fazer a página ficar mais comprida a toa, me entende?

Eu apliquei as mudanças que você me informou, mas agora a borda da imagem está toda incorreta, principalmente na parte superior e inferior.

Eu queria que ficasse como estava antes o efeito, normal com borda laranja (#F90) e "hover" com borda branca.

Quanto ao alinhamento das imagens agora estão corretos! :)

>
Eu apliquei as mudanças que você me informou, mas agora a borda da imagem está toda incorreta, principalmente na parte superior e inferior.

?? não to conseguindo adivinhar ainda..

>
Eu queria que ficasse como estava antes o efeito, normal com borda laranja (#F90) e "hover" com borda branca.

uai...

#galerias_minis li:hover{

 border:2px solid #FFF;
}

Olha só como está ficando:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img33.imageshack.us/img33/8767/galeria3e.jpg&key=927d78d3aea5aa704ee7aaafe9c7ed90a7b8ef62e9a5e30a75878de636dddefd" alt="Imagem Postada" />

CSS:

#galerias_minis{
	width:760px;
	margin:0 auto;
	list-style:none;
}

#galerias_minis li{

	float:left;
	max-width:100px;
	max-height:100px;
	margin:2px;
	display: inline;
	overflow:hidden;
	border:2px solid #F90;
}

#galerias_minis li:hover{

 border:2px solid #FFF;
}

Você está utilizando um Doctype? :mellow: Se não estiver, provavelmente terá problemas...

E se você trabalhar com max-height, provavelmente terá problemas por causa dos elementos flutuados... Faça um teste, pegue uma foto, apenas uma, e defina uma altura diferente das demais e veja o que acontece... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

Outra coisa, para que o efeito de alterar a cor da borda funcione corretamente, faça assim:

ul#galerias_minis{

 width:760px;
 margin:0 auto;
}

ul#galerias_minis li {

 display:inline;
 float:left;
 max-width:104px; /* ==> Observe que adicionei 4px aqui, justamente para poder caber as bordas aplicadas nos a's */
 max-height: 104px; /* ==> Mesma observação acima */
 margin:2px;
}

ul#galerias_minis li a {

 display:block;
 border:2px solid #F90;
}

ul#galerias_minis a:hover{

 border:2px solid #FFF;
}

Volto a repetir: tenho quase certeza que terá problemas por causa dos max-etc (não pude testar... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif ) . Prefira trabalhar com medidas fixas...

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Testei tanto com o "max" como sem, e continua o mesmo problema! :P

Substitui completamente pelo seu código e não funcionou também.

Fiz umas leves alterações e o resultado foi esse:

#galerias_minis{
	width:760px;
	margin:0 auto;
	list-style:none;
}

#galerias_minis li{

	display:inline;
	float:left;
	max-width:104px;
	max-height: 104px;
	margin:2px;
}

#galerias_minis li a img {

	border:2px #F90 solid;
}

#galerias_minis li a:hover img {

	border:2px #FFF solid;
}

Muito obrigado aos 2 que me ajudaram! :)

Estarei abrindo outro tópico sobre um problema deste meu layout, espero que possam me ajudar tbm! :P

Abraços!