[Resolvido] Listagem miniaturas em uma galeria

[Diego Macêdo 6]

Estou com esse probleminha da foto no meu código. Alguém poderia me dizer o que seria?

 

HTML:

<div id="galerias_topo">
<span id="galerias_titulo">Baby Som</span> <span id="galerias_local">(Maikai Show Bar - 31/07/2009)</span><br /><br />
</div>

<ul id="galerias_minis">
	<li><a href="./eventos/maikai_show_bar/20090731/74_1_20090731_0v8z3696q700o9c.JPG" rel="shadowbox[74]" title="74_1_20090731_0v8z3696q700o9c"><img src="./eventos/maikai_show_bar/20090731//thumbs/74_1_20090731_0v8z3696q700o9c_thumb.JPG" /></a></li>
	<li><a href="./eventos/maikai_show_bar/20090731/74_1_20090731_119e4h9fzim699f.JPG" rel="shadowbox[74]" title="74_1_20090731_119e4h9fzim699f"><img src="./eventos/maikai_show_bar/20090731//thumbs/74_1_20090731_119e4h9fzim699f_thumb.JPG" /></a></li>
	<li><a href="./eventos/maikai_show_bar/20090731/74_1_20090731_1ycrtt4mm6het0x.JPG" rel="shadowbox[74]" title="74_1_20090731_1ycrtt4mm6het0x"><img src="./eventos/maikai_show_bar/20090731//thumbs/74_1_20090731_1ycrtt4mm6het0x_thumb.JPG" /></a></li>
	<li><a href="./eventos/maikai_show_bar/20090731/74_1_20090731_3tckxtes6pxa9f1.JPG" rel="shadowbox[74]" title="74_1_20090731_3tckxtes6pxa9f1"><img src="./eventos/maikai_show_bar/20090731//thumbs/74_1_20090731_3tckxtes6pxa9f1_thumb.JPG" /></a></li>
	<li><a href="./eventos/maikai_show_bar/20090731/74_1_20090731_3we153xhvacxdri.JPG" rel="shadowbox[74]" title="74_1_20090731_3we153xhvacxdri"><img src="./eventos/maikai_show_bar/20090731//thumbs/74_1_20090731_3we153xhvacxdri_thumb.JPG" /></a></li>
...
...
...
...
</ul>

CSS:

div#galerias_topo{
	width:750px;
	margin:2px 17px;
	padding-top:10px;
	background-color:#333;
	border:1px solid #FFF;
}

#galerias_titulo{
	padding:10px 0 0 16px;
	font-weight:bold;
	font-size:20px;
	color:#FFF;
}

#galerias_local{
	font-size:16px;
	color:#CCC;
	font-style:oblique;
}

#galerias_minis{
	width:760px;
	margin:0 auto;
}

#galerias_minis li img{
	float:left;
	max-width:100px;
	max-height: 100px;
	margin:2px;
	border:2px solid #F90;
}

#galerias_minis img:hover{
	border:2px solid #FFF;
}

[William Bruno 1501]

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;
}

[Diego Macêdo 6]

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! :)

[William Bruno 1501]

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;
}

[Diego Macêdo 6]

Olha só como está ficando:

 

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;
}

[Paulo de Tarso F. M. 24]

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

[Diego Macêdo 6]

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!