Lista de seções na home page

Qual é sua questão:
Bom pessoal, não sei se posso chamar de "antiga área forumeiros e você", mas vou explicar melhor:

Entre nesse fórum: http://fest-gunz.forumeiros.com/forum

Está vendo onde está escrito: "Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!"

Eu quero fazer aquilo! Eu já ví isso aqui na FdF mas não lembro onde.

Que medidas você tomou para corrigir o problema:
Vim ao FdF!

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

Versão do fórum:
PUNBB

Olá,

Leia este tópico:
https://ajuda.forumeiros.com/t15944-

Atenciosamente!

tutorial.
Se alguem souber centralizar tudo agradeço. (:

Olá Cristian 95,

Experimente seguir o tutorial e, assim que conseguir arranjar o código completo, tente somente adicionar esse comando "<center>...</center>", por exemplo assim:

<script>
jQuery(function() {
jQuery('.img_list_hp img').mouseover(function() {
jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
}).mouseout(function() {
jQuery('#img_list_alt').html('Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!');
});
});
</script>
<center>
<div class="img_list_hp"><a href="/portal.forum?pid=2"><img height="59" src="https://2img.net/i/fa/fdf/questions.png" alt="Uma vasta gama de tutoriais para compreender das funções do fórum e também deixá-lo cada vez melhor e com a sua cara."><span>Tutoriais e astúcias</span></a></div><div class="img_list_hp"><a href="/-c2/"><img height="59" src="https://2img.net/i/fa/fdf/nuage.png" alt="Temos um ótimo serviço de suporte, com equipe capacitada para lhe atender da melhor forma."><span>Ajuda e suporte</span></a></div><div class="img_list_hp"><a href="/-f71/"><img height="59" src="https://2img.net/i/fa/fdf/peindre.png" alt="Gostaria de ter um tema mais personalizado mas não leva jeito com design? Temos uma equipe pronta para ajudar-lhe!"><span>Criações gráficas</span></a></div><div class="img_list_hp"><a href="/-f24/"><img height="59" src="https://i.servimg.com/u/f30/11/14/55/92/images10.png" alt="O <a href='http://pt.hitskin.com'>Hitskin</a> é um serviço para compartilhar temas Forumeiros."><span>Hitskin</span></a></div><div class="img_list_hp"><a href="/-c9/"><img height="59" src="https://i.servimg.com/u/f62/12/62/55/38/voix1010.png" alt="Gostaria de tornar seu fórum mais conhecido, encontrar novos membros para a equipe ou fazer parcerias?"><span>Publicidade</span></a></div><div class="img_list_hp"><a href="/-f50/"><img height="59" src="https://i.servimg.com/u/f60/11/40/70/67/review10.png" alt="Gostaria de saber o que pensamos do seu fórum e o que nele achamos que pode ser melhor?"><span>Análises</span></a></div><div class="img_list_hp"><a href="/-f15/"><img height="59" src="http://www.criarumblog.com/rsc/img/logo_blog.png" alt="Criou um blog Criarumblog? Não fique perdido, também ofeceremos suporte!"><span>Criarumblog</span></a></div><div style="clear: both" id="img_list_alt">Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!</div>
</center>

Compreendeu a lógica? Resultou assim?

Att, Needke

Cristian 95 escreveu:tutorial.
Se alguem souber centralizar tudo agradeço. (:

Ihaaaaaaaaaaaaaaaaaaaaaaaaa.... Deu certinho, mas:

"Quando passamos o Mouse sobre uma imagem, não aparece a descrição!"


Alguém me ajuda?

Mas mesmo assim agradeço muito Cristian 95,

Mas ainda Preciso disso!

@JosedaPM, você editou algo??

@Needke ficou só as letras ao meio, o resto ficou no canto esquerdo

Cristian 95 escreveu:@JosedaPM, você editou algo??

@Needke ficou só as letras ao meio, o resto ficou no canto esquerdo

Editei só o que pedia, se quiser pode conferir:

Código:

<script>
jQuery(function() {
jQuery('.img_list_hp img').mouseover(function() {
jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
}).mouseout(function() {
jQuery('#img_list_alt').html('Passe o mouse sobre uma das imagens e conheça mais sobre a mesma!');
});
});
</script><div class="img_list_hp">
<a href="http://pokemestre.forumeiros.com/t4-regras-de-bom-uso-do-forum#6">
<img height="59" src="http://i48.servimg.com/u/f48/16/38/63/03/veja_n10.jpg"
 alt="Veja nossas Regras!"><span>Regras</span></a>
</div><div class="img_list_hp">
<a href="http://pokemestre.forumeiros.com/f41-faqs-e-tutorials">
<img height="59" src="http://i48.servimg.com/u/f48/16/38/63/03/faqs_e11.jpg"
 alt="Descrição"><span>FAQs e TUTORIALs dos Usuários!</span></a></div><div class="img_list_hp">
<a href="http://pokemestre.forumeiros.com/f43-seja-da-equipe">
<img height="59" src="http://i48.servimg.com/u/f48/16/38/63/03/seja_d10.jpg"
 alt="Descrição"><span>Seja da Equipe da PM!</span></a></div><div class="img_list_hp">
<a href="http://pokemestre.forumeiros.com/f42-ultimas-news">
<img height="59" src="http://i48.servimg.com/u/f48/16/38/63/03/asltim10.jpg"
 alt="Descrição"><span>Veja as últimas Novidades do Fórum aqui!</span>
</a></div><div style="clear: both" id="img_list_alt">
Passe o mouse sobre uma das imagens e conheça mais sobre a seção!</div>


Se houver algo errado, por favor me diga e me perdoe por dizer que não tinha algo errado!

Olá,

Leia este tópico: https://ajuda.forumeiros.com/t42932-

Até mais!

Oi josedaPM,

Não dá para alinharmos ao centro perfeitamente, mas eu desenvolvi um pequeno código CSS que move o bloco da sua mensagem da home page da esquerda, criando uma margem. Abaixo o código em questão e onde adicioná-lo:

#imglists {
text-align: center !important;
padding-left: 13%;
}

1. Painel de controle
2. Visualização
3. Cores
4. Folha de estilos CSS

Já o código HTML, deverá ser substituído, adicionando uma DIV a mais para que a mesma desempenhe a função que o nosso código CSS propõe.

Código:

<div id="imglists">  <script>
jQuery(function() {
jQuery('.img_list_hp img').mouseover(function() {
jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
}).mouseout(function() {
jQuery('#img_list_alt').html('Passe o mouse sobre uma das imagens e conheça mais sobre a mesma!');
});
});
</script><center><div class="img_list_hp">
<a href="http://pokemestre.forumeiros.com/t4-regras-de-bom-uso-do-forum#6">
<img height="59" src="http://i48.servimg.com/u/f48/16/38/63/03/veja_n10.jpg"
 alt="Veja nossas Regras!"><span>Regras</span></a>
</div><div class="img_list_hp">
<a href="http://pokemestre.forumeiros.com/f41-faqs-e-tutorials">
<img height="59" src="http://i48.servimg.com/u/f48/16/38/63/03/faqs_e11.jpg"
 alt="Descrição"><span>FAQs e TUTORIALs dos Usuários!</span></a></div><div class="img_list_hp">
<a href="http://pokemestre.forumeiros.com/f43-seja-da-equipe">
<img height="59" src="http://i48.servimg.com/u/f48/16/38/63/03/seja_d10.jpg"
 alt="Descrição"><span>Seja da Equipe da PM!</span></a></div><div class="img_list_hp">
<a href="http://pokemestre.forumeiros.com/f42-ultimas-news">
<img height="59" src="http://i48.servimg.com/u/f48/16/38/63/03/asltim10.jpg"
 alt="Descrição"><span>Veja as últimas Novidades do Fórum aqui!</span>
</a></div><div style="clear: both" id="img_list_alt">
Passe o mouse sobre uma das imagens e conheça mais sobre a seção!></div></center></div>

Se você tiver alguma dúvida, por favor nos avise. Obrigado por usar Forumeiros!

Supero escreveu:Oi josedaPM,

Não dá para alinharmos ao centro perfeitamente, mas eu desenvolvi um pequeno código CSS que move o bloco da sua mensagem da home page da esquerda, criando uma margem. Abaixo o código em questão e onde adicioná-lo:

#imglists {
text-align: center !important;
padding-left: 13%;
}

1. Painel de controle
2. Visualização
3. Cores
4. Folha de estilos CSS

Já o código HTML, deverá ser substituído, adicionando uma DIV a mais para que a mesma desempenhe a função que o nosso código CSS propõe.

Código:

<div id="imglists">  <script>
jQuery(function() {
jQuery('.img_list_hp img').mouseover(function() {
jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
}).mouseout(function() {
jQuery('#img_list_alt').html('Passe o mouse sobre uma das imagens e conheça mais sobre a mesma!');
});
});
</script><center><div class="img_list_hp">
<a href="http://pokemestre.forumeiros.com/t4-regras-de-bom-uso-do-forum#6">
<img height="59" src="http://i48.servimg.com/u/f48/16/38/63/03/veja_n10.jpg"
 alt="Veja nossas Regras!"><span>Regras</span></a>
</div><div class="img_list_hp">
<a href="http://pokemestre.forumeiros.com/f41-faqs-e-tutorials">
<img height="59" src="http://i48.servimg.com/u/f48/16/38/63/03/faqs_e11.jpg"
 alt="Descrição"><span>FAQs e TUTORIALs dos Usuários!</span></a></div><div class="img_list_hp">
<a href="http://pokemestre.forumeiros.com/f43-seja-da-equipe">
<img height="59" src="http://i48.servimg.com/u/f48/16/38/63/03/seja_d10.jpg"
 alt="Descrição"><span>Seja da Equipe da PM!</span></a></div><div class="img_list_hp">
<a href="http://pokemestre.forumeiros.com/f42-ultimas-news">
<img height="59" src="http://i48.servimg.com/u/f48/16/38/63/03/asltim10.jpg"
 alt="Descrição"><span>Veja as últimas Novidades do Fórum aqui!</span>
</a></div><div style="clear: both" id="img_list_alt">
Passe o mouse sobre uma das imagens e conheça mais sobre a seção!></div></center></div>

Se você tiver alguma dúvida, por favor nos avise. Obrigado por usar Forumeiros!

Olha Supero, com todo respeito, mas houve um engano, Eu não quero mover a lista de seções para o centro, mas sim fazer aparecer a descrição da seção quando passamos o mouse sobre a mesma!

Oi josedaPM,

Primeiro de tudo, peço desculpas pelo erro.

Eu apliquei o seu código num fórum de testes e funcionou perfeitamente o efeito da descrição da seção. Poderia nos informar se o erro persisti para você ?

Obrigado.

Supero escreveu:Oi josedaPM,

Primeiro de tudo, peço desculpas pelo erro.

Eu apliquei o seu código num fórum de testes e funcionou perfeitamente o efeito da descrição da seção. Poderia nos informar se o erro persisti para você ?

Obrigado.

Hahahahahaaa.. Erros acontecem cara!

PS: "O erro ainda persiste, pena que não adianta espancar o computador... isso não saiu direito..."

Olá,

JosedaPM, por favor leia este tutorial: https://ajuda.forumeiros.com/t32787-
Nele é dito o código que creio eu solucionará sua questão.

Abraços!

Jeffrey escreveu:Olá,

JosedaPM, por favor leia este tutorial: https://ajuda.forumeiros.com/t32787-
Nele é dito o código que creio eu solucionará sua questão.

Abraços!

Eu já li este Tutorial Jeffrey, na verdade foi lá que aprendi e coloquei a Lista de Seções em meu fórum!

Continua o Problema...

Oi novamente josedaPM,

O código foi aplicado num fórum meu de testes e funcionou perfeitamente o efeito da descrição. Mais há um detalhe: eu já tinha o CSS desse efeito aplicado em minha folha de estilos CSS, o que foi inserido de diferente foi o código HTML com JavaScript. Por esse motivo, acredito que o motivo do problema seja o CSS. Remova o CSS atual e adicione o CSS que está no tutorial e o problema será resolvido.

Se você tiver alguma dúvida, por favor nos avise. Obrigado por usar Forumeiros!

Supero escreveu:Oi novamente josedaPM,

O código foi aplicado num fórum meu de testes e funcionou perfeitamente o efeito da descrição. Mais há um detalhe: eu já tinha o CSS desse efeito aplicado em minha folha de estilos CSS, o que foi inserido de diferente foi o código HTML com JavaScript. Por esse motivo, acredito que o motivo do problema seja o CSS. Remova o CSS atual e adicione o CSS que está no tutorial e o problema será resolvido.

Se você tiver alguma dúvida, por favor nos avise. Obrigado por usar Forumeiros!

Qual CSS que está no Tutorial? Me desculpe pois perdi o Fio da Meada ! Por enquanto estou assim:

Oi josedaPM,

Os códigos CSS que me refiro são os abaixo. Eles devem ser adicionados em sua folha de estilos CSS e os anteriores devem ser removidos (os códigos CSS que dizem respeito ao tutorial e não os outros que dão outros efeitos em seu fórum):

Código:

.img_list_hp {
border: 1px solid #0372BE;
padding: 0;
float: left;
color: #FFF !important;
width: auto;
font-size: 11px;
text-align: center;
margin: auto 10px auto auto;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

.img_list_hp:hover {
background-color: #DCEAF5;
}

.img_list_hp img {
padding: 8px 15px;
}

.img_list_hp span {
background-color: #0372BE;
color #FFF;
display: block;
padding: 0 10px;
}
.img_list_hp a {
color: #FFF !important;
text-decoration: none;
}
#img_list_alt {
background-image: url(http://i21.servimg.com/u/f21/11/81/27/88/arrow_10.png);
background-repeat: no-repeat;
background-position: 20px 0;
padding-top: 13px;
padding-left: 55px;
}

1. Painel de controle
2. Visualização
3. Cores
4. Folha de estilos CSS

Se você tiver alguma dúvida, por favor nos avise. Obrigado por usar Forumeiros!

Supero escreveu:Oi josedaPM,

Os códigos CSS que me refiro são os abaixo. Eles devem ser adicionados em sua folha de estilos CSS e os anteriores devem ser removidos (os códigos CSS que dizem respeito ao tutorial e não os outros que dão outros efeitos em seu fórum):

Código:

.img_list_hp {
border: 1px solid #0372BE;
padding: 0;
float: left;
color: #FFF !important;
width: auto;
font-size: 11px;
text-align: center;
margin: auto 10px auto auto;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

.img_list_hp:hover {
background-color: #DCEAF5;
}

.img_list_hp img {
padding: 8px 15px;
}

.img_list_hp span {
background-color: #0372BE;
color #FFF;
display: block;
padding: 0 10px;
}
.img_list_hp a {
color: #FFF !important;
text-decoration: none;
}
#img_list_alt {
background-image: url(http://i21.servimg.com/u/f21/11/81/27/88/arrow_10.png);
background-repeat: no-repeat;
background-position: 20px 0;
padding-top: 13px;
padding-left: 55px;
}

1. Painel de controle
2. Visualização
3. Cores
4. Folha de estilos CSS

Se você tiver alguma dúvida, por favor nos avise. Obrigado por usar Forumeiros!

Ainda não deu certo...

PS: "Eu removi o código anterior e coloquei este, mas não obtive resultados"

Oi josedaPM,

Desculpe julgá-lo mais o Senhor não trocou o código HTML pelo que eu havia sugerido. Eu encontrei o problema no seu código. Você realizou uma quebra de linha desnecessária no código jQuery e isso fez com que o código parasse de funcionar corretamente. Veja abaixo um esboço do correto (deverá substituir o anterior pelo citado mais abaixo):

Código:

<script>
jQuery(function() {
jQuery('.img_list_hp img').mouseover(function() {
jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
}).mouseout(function() {
jQuery('#img_list_alt').html('Passe o mouse sobre uma das imagens e conheça mais sobre a seção!');
});
});
</script>

1. Painel de controle
2. Visualização
3. Geral

Se você tiver alguma dúvida, por favor nos avise. Obrigado por usar Forumeiros!

Supero escreveu:Oi josedaPM,

Desculpe julgá-lo mais o Senhor não trocou o código HTML pelo que eu havia sugerido. Eu encontrei o problema no seu código. Você realizou uma quebra de linha desnecessária no código jQuery e isso fez com que o código parasse de funcionar corretamente. Veja abaixo um esboço do correto (deverá substituir o anterior pelo citado mais abaixo):

Código:

<script>
jQuery(function() {
jQuery('.img_list_hp img').mouseover(function() {
jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
}).mouseout(function() {
jQuery('#img_list_alt').html('Passe o mouse sobre uma das imagens e conheça mais sobre a seção!');
});
});
</script>

1. Painel de controle
2. Visualização
3. Geral

Se você tiver alguma dúvida, por favor nos avise. Obrigado por usar Forumeiros!

Você poderia me dizer onde está essa quebra de linha?

Oi josedaPM,

Terei o maior prazer em lhe explicar qual é o erro, pois assim você aprenderá e não cometerá o erro outra vez. O código anterior era o seguinte:

<script>
jQuery(function() {
jQuery('.img_list_hp img').mouseover(function() {
jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
}).mouseout(function() {
jQuery('#img_list_alt').html('
Passe o mouse sobre uma das imagens e conheça mais sobre a seção!');
});
});
</script>

Já o código novo e corrigido, é o seguinte:

<script>
jQuery(function() {
jQuery('.img_list_hp img').mouseover(function() {
jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
}).mouseout(function() {
jQuery('#img_list_alt').html('Passe o mouse sobre uma das imagens e conheça mais sobre a seção!');
});
});
</script>

Observe o local marcado em negrito em ambos os códigos. No primeiro, houve uma quebra de linha após o que foi marcado em negrito, e no segundo, já não houve. No jQuery ou no próprio Javascript, se há uma quebra de linha ou uma vírgula se quer errada em um código nosso, tudo para de funcionar, no caso, quando se passava o cursor do mouse sobre as caixas na mensagem da home page, já não aparecia a descrição.

Espero que essa mensagem lhe ajude. Sinta-se livre para entrar em contato conosco novamente se tiver outras consultas ou preocupações.

Obrigado e tenha um bom fim de semana!

Supero

Supero escreveu:Oi josedaPM,

Terei o maior prazer em lhe explicar qual é o erro, pois assim você aprenderá e não cometerá o erro outra vez. O código anterior era o seguinte:

<script>
jQuery(function() {
jQuery('.img_list_hp img').mouseover(function() {
jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
}).mouseout(function() {
jQuery('#img_list_alt').html('
Passe o mouse sobre uma das imagens e conheça mais sobre a seção!');
});
});
</script>

Já o código novo e corrigido, é o seguinte:

<script>
jQuery(function() {
jQuery('.img_list_hp img').mouseover(function() {
jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
}).mouseout(function() {
jQuery('#img_list_alt').html('Passe o mouse sobre uma das imagens e conheça mais sobre a seção!');
});
});
</script>

Observe o local marcado em negrito em ambos os códigos. No primeiro, houve uma quebra de linha após o que foi marcado em negrito, e no segundo, já não houve. No jQuery ou no próprio Javascript, se há uma quebra de linha ou uma vírgula se quer errada em um código nosso, tudo para de funcionar, no caso, quando se passava o cursor do mouse sobre as caixas na mensagem da home page, já não aparecia a descrição.

Espero que essa mensagem lhe ajude. Sinta-se livre para entrar em contato conosco novamente se tiver outras consultas ou preocupações.

Obrigado e tenha um bom fim de semana!

Supero

Agora eu entendi, e corrigi, mas:

"Ainda não deu certo"...

Oi novamente,

Por favor, remova os anteriores (tanto o CSS quando o HTML da mensagem da home page) e refaça tudo novamente, com base neste tutorial.

O código funciona em diversos fóruns e é impossível que não venha a funcionar no seu. Além do mais, terá de fazer por conta própria, pois nós só editamos os códigos, não criamos nada do zero! Por último, se não adiantar, remova o seguinte código (caso também não resolva seu problema, sinto muito mais não sei como ajudá-lo):

<script>
jQuery(document).ready(function() {
msg = '© 2011 Todos os direitos reservados a PM. Não copie, crie!';
jQuery('#pun-foot').html(jQuery('#pun-foot').html() + msg);
});
</script>

Obrigado,
Supero.