Criar menu sprite em css para por no fórum

[claudemir.santossilva]

Qual é minha questão:
Ola a todos, eu montei as imagens separadas e juntei elas também, mas não sei como por o menu no fórum, o template do meu fórum ja veio com um menu porém varias opções do menu estão desordenadas e sem imagem, não sei porque mas ja veio assim, eu vi que menu sprite é mais leve.
Como eu ja disse eu ja tenho uma imagem com todas as opções do menu, tanto as opções quando o mouse esta fora quanto as opções quando o mouse esta sobre a opção. Eu também não sei indicar as posições de cada opção do menu na imagem. Eu vi algo no google sobre mostrar o X e o Y.


Link da imagem: https://2img.net/r/ihimizer/img571/633/menusprite.jpg



Endereço do meu fórum:
http://clanbalakent.forumeiros.com

Versão do fórum:
PHPBB3

[BrunoH.]

Olá!
Para que o mesmo resulte, o senhor deve criar as imagens do menu separadas, o senhor criou elas juntas, separadas eu digo: Uma imagem para o botão Iniciar, outro para o Site, outra para o Recrutamento, e etc.. entende?

Até mais.

[claudemir.santossilva]

Bom no menu sprite css que também pode ser criado em flash e de outras formas, usa apenas de uma imagem onde une todas as opções do menu assim deichando o menu mais leve, de uma lida neste link http://www.richardbarros.com.br/blog/design/usando-css-sprites-para-fazer-seu-site-carregar-mais-rapido.
Por favor alguém me ajuda

[claudemir.santossilva]

Alguém?

[Holmes]

Saudações,

Painel de controle ► Visualização ► Cores ► Folha de estilo CSS

Esse código deve ser colado no final de sua Folha de estilo CSS:

#page-header .navbar .linklist.navlinks{text-align:left}#page-header .navbar .linklist.navlinks li a{display:inline-block;background:transparent url(https://2img.net/r/ihimizer/img571/633/menusprite.jpg) top left}#page-header .navbar .linklist.navlinks li a img{margin:0px!important;position:static!important;vertical-align:top;opacity:0;height:45px;min-width:50px;float:none!important}

Clique no botão "Salvar".

Agora para ajustar os botões:

#page-header .navbar .linklist.navlinks a.mainmenu[href="LINK"]{width:50px;background-position:0px 0px}

Para identificar cada botão que você vai modificar, substitua LINK pelo link daquele botão.
Modifique "50" para mudar a largura do botão.
Modifique "0" para encontrar a imagem do botão na imagem que tem todos botões juntos.

Como você disse, você quer fazer CSS sprite e para fazer CSS sprite você deve configurar cada botão.

Assombrosamente.