[Resolvido] Album de Fotos!

[bobmarley 0]

eai galeraaaa

blzzzz?

tpww..

eu fiz um album de fotos aqui.. usando css.. seguindo um tutorial q tem no maujor..

 

http://www.maujor.com/tutorial/galeria-fotos.php

 

 

e o exemplo do album funcionando está nesse link:

 

http://www.maujor.com/tutorial/galeria-fotos/final.html

 

 

a duvida é a seguinte..

qdo você passa o mouse em cima da foto... ela amplia e aparece uma legenda embaixo da foto..

no q eu fiz aqui... aparece um sublinhado AZUL... nd av.. nao sei de onde saiu isso..

até mudando a cor do texto da legenda.. esse sublinhado azul.... continua azul...

tentei colocar text-decoration: none; e nao deu certo tb.... continou o sublinhado azul..

deve ser moh coisa babaca.. e eu to boiando aqui.. =/

os codigos estao iguais... do q eu fiz aqui.. e do exemplo.. por isso nem vou postar aqui.. mas deem uma olhada no exemplo ai

 

valeu galeraaaaaa

abraçoooooosss http://forum.imasters.com.br/public/style_emoticons/default/natal_happy.gif

[Carlos Designer 0]

se o seu esta diferente os códigos não estao iguais!

 

posta ai pra gente analizar o seu!

 

pq no do maujor a gente não vai ter nenhum erro pra procurar ja que o mesmo funciona!

[Roosevelt Franklin 2]

Amigo isso ai tah parecendo akela maldita borda azul de imagem que o IE faz sozinho...

 

Adicione isso no seu css:

 

img{ border:none;}

 

e depois vê se some.

 

Abraços,

Roosevelt

[bobmarley 0]

adicionei essa linha nao mudou nd nao =/

mas tpw. nao é a borda... ele fica um sublinhado na legenda.. pior q é um sublinhado azul.. nem é a mesma cor da letra

 

o código do css..

 

.galeria {
	width:680px; 
	margin:0 auto;
	text-align:left;
		text-decoration:none; 
	}

.img-aqui { 
	background: #fff url('motocross.jpg') center no-repeat; 
	width:500px; 
	height:375px; 
	position:relative; 
	float:right; 
	border:1px solid #fff;
	}

ul.fotos {
	position:relative;
	list-style:none;  
	width:162px;
	padding:1px;
	background:#CCC;
	margin:0; 
	padding:0; 
}

.fotos:after {
	display: block;
	content: ".";
	height: 0;
	font-size:0; 
	visibility: hidden;
	clear: both;
	}

ul.fotos li {
	width:75px;
	height:50px;
	float:left; 
	border:2px solid #CE1245;
	margin:1px; 
}

ul.fotos li img {
	border:none; 
	width:75px;
	height:50px;
}

ul.fotos li span img {
	border:none;
	width:500px;
	height:375px;
	height:auto;
}

ul.fotos a {
	display: block;
	} 

ul.fotos a span {
	display: none;
}

ul.fotos a:hover span.legenda {
	display: block;
	text-align:center; 
	width:500px;
	position:absolute;
	top:375px;
	left:-2px;
}

ul.fotos a:hover span {
	display: block;
		position: absolute; 
	top:-5px; 
	left: 177px; 
	background:#fff;
	border:2px solid #ccc;
   }

ul.fotos a:hover span.legenda {
		text-decoration: none;
	padding:5px 0px;
	color:#c25478; 
}

 

valeu galeraa...

[bobmarley 0]

eu tava vendo aqui... eu abri o do maujor pelo IE.. e aparece o tal sublinhado azul.. no meu ele aparece no firefox tb =/

sera q nao da mesmo pra tirar isso?

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

 

http://www.maujor.com/tutorial/galeria-fotos/final.html

[Roosevelt Franklin 2]

Cara, tenta ai

 

a{ text-decoration:none;}

 

Talvez seja isso

 

Boa sorte!

[bobmarley 0]

NOOOOOOOOOOOH

deu certo caraaaa

agora sim ficou firmezaaa

ehauehuaeh

valeuuuuuu mesmo veeeei

abraçooooooooo

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

[bobmarley 0]

aproveitando o topico...

 

nesse tutorial... tem os hacks pro internet explorer

mas aqui nao funcionou nao viu =//

 

http://img255.imageshack.us/img255/7035/erroielm4.jpg

 

ai oh.. como ta no ie.. no firefox ta perfeito... sem erros

no internet explorer..

a primeira flechinha da esquerda... é q embaixo de toda foto pequena tem um risco cinza.. no firefox nem ta =/

e na outra flechinha ta desalinhado...

e o album inteiro ta no canto esquerdo =//

isso só ta no internet explorer

 

alguem sabe como arrumo isso??

 

valeuuuuuu galeraa

abraçooos

[William Bruno 1501]

Coloca um link para o site cara..

precisamos sempre ver o código mais atual..

[bobmarley 0]

entao cara..

nao entendo.. pq la do maujor fica tudo certinho =~~

 

.galeria {
	width:680px; 
	margin:0 auto;
	text-align:left;
		text-decoration:none; 
	}

.img-aqui { 
	background: #fff url('motocross.jpg') center no-repeat; 
	width:500px; 
	height:375px; 
	position:relative; 
	float:right; 
	border:1px solid #fff;
	}

ul.fotos {
	position:relative;
	list-style:none;  
	width:162px;
	padding:1px;
	padding 2px 0 1px;
	background:#CCC;
	margin:0; 
	padding:0; 
}

.fotos:after {
	display: block;
	content: ".";
	height: 0;
	font-size:0; 
	visibility: hidden;
	clear: both;
	}

ul.fotos li {
	width:75px;
	height:50px;
	float:left; 
	border:2px solid #CE1245;
	margin:1px; 
	margin-top:0;


}

ul.fotos li img {
	border:none; 
	width:75px;
	height:50px;
}

ul.fotos li span img {
	border:none;
	width:500px;
	height:375px;
	height:auto;
}

ul.fotos a {
	text-decoration:none;
	display: block;
	} 

ul.fotos a span {
	display: none;
}

ul.fotos a:hover span.legenda {
	display: block;
	text-align:center; 
	width:500px;
	position:absolute;
	top:375px;
	left:-2px;

}

ul.fotos a:hover span {
	display: block;
		position: absolute; 
	top:-5px; 
	left: 177px; 
	background:#fff;
	border:2px solid #ccc;
   }

ul.fotos a:hover span.legenda {
		text-decoration: none;
	padding:5px 0px;
	color:#c25478; 
}

 

mas eu nao sei onde coloca os hacks pro ie

como faço isso?

=~~

valeuuuuuuuu veei

abraçoooo