Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 7
Nome: Leandro G.
Localização: Anápolis-GO

Css Sprites x Firefox

08-09-2009 07:25

Boa noite pessoal,
na tentativa de otimizar um site, utilizei a técnica "Css Sprites" em varia imagens, como sempre utilizo o Opera 10, havia testado somente nele, e funcionou perfeitamente bem.
Ao testar no IE 8, tambem funcionou, alias, com um "erro" estranho, abaixo segue o link com o screen, mas pelomenos funcionou, sob a imagem aparece um icone...

http://img171.imageshack.us/img171/6582/imagemkc.jpg


No FF 3.5 não funciona, simplismente, as imagens não carregam.

Já verifiquei todo o codigo, e não encontrei nada que considero como errado.
Alguem já teve esse problema, e conseguiu solucionar.

Se houver a necessidade de postar o codigo, posto sem problemas...


vlws...
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17663
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Css Sprites x Firefox

08-09-2009 07:31

O que seria CSS Sprites? Se possível posta o script funcionando em seu site.
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 7
Nome: Leandro G.
Localização: Anápolis-GO

Css Sprites x Firefox

08-09-2009 11:19

CSS Sprite é uma técnica que usa um Sprite para fazer uma "troca de imagem", ou seja, o deslocamento de posição do mapa de imagem. Essa técnica permite que utilizemos várias imagens em uma só, assim economizamos número de requisições no servidor e quantidade de imagens.

Utilizando a propriedade background-position é possível "navegar" na imagem, e escolher qual imagem devera aparecer.

Segue o exemplo do codigo CSS que estou utilizando:

/* DEFINIÇÕES - CSS SPRITES - BANNER II */ .BANNER-II_01 {background: url(../imagens/sprite-banner2.jpg) no-repeat top left; background-position: 0 0;} .BANNER-II_02 {background: url(../imagens/sprite-banner2.jpg) no-repeat top left; background-position: 0 -195px;} .BANNER-II_03 {background: url(../imagens/sprite-banner2.jpg) no-repeat top left; background-position: 0 -390px;} .BANNER-II_04 {background: url(../imagens/sprite-banner2.jpg) no-repeat top left; background-position: 0 -585px;} .BANNER-II_05 {background: url(../imagens/sprite-banner2.jpg) no-repeat top left; background-position: 0 -780px;} .BANNER-II_06 {background: url(../imagens/sprite-banner2.jpg) no-repeat top left; background-position: 0 -975px;} .BANNER-II_07 {background: url(../imagens/sprite-banner2.jpg) no-repeat top left; background-position: 0 -1170px;} .BANNER-II_08 {background: url(../imagens/sprite-banner2.jpg) no-repeat top left; background-position: 0 -1365px;} .BANNER-II_09 {background: url(../imagens/sprite-banner2.jpg) no-repeat top left; background-position: 0 -1560px;} .BANNER-II_10 {background: url(../imagens/sprite-banner2.jpg) no-repeat top left; background-position: 0 -1755px;} .BANNER-II_11 {background: url(../imagens/sprite-banner2.jpg) no-repeat top left; background-position: 0 -1950px;} .BANNER-II_12 {background: url(../imagens/sprite-banner2.jpg) no-repeat top left; background-position: -409px 0;} .BANNER-II_13 {background: url(../imagens/sprite-banner2.jpg) no-repeat top left; background-position: -409px -195px;}

Ou seja, tenho uma única imagem, nomeada de "sprite-banner2.jpg", nela tenho + 13 imagens pequenas, no meu caso, montando um banner.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17663
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Css Sprites x Firefox

08-09-2009 15:49

Não seria o mesmo citado nesse post?

http://www.codigosnaweb.com/forum/viewt ... f=4&t=1858
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 7
Nome: Leandro G.
Localização: Anápolis-GO

Css Sprites x Firefox

09-09-2009 01:19

Otimo, segui o link, era +/- o que eu queria, consegui adaptar para minha realidade.

CSS:
.photo { width:294px; height:175px; background:url(../imagens/sprite-imgs.jpg); background-repeat:no-repeat; background-position: 0px -106px; border: 1px dashed #000000; }

HTML:
<div class="photo"></div>


Vlwwwwwws.... :D
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17663
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Css Sprites x Firefox

09-09-2009 09:53

Boa :-)
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado