Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Entre para seguir isso  
Cora Coralina

Criação de Site Pessoal

Recommended Posts

Tenho procurado informações pela internet mesmo para tentar aprender um pouco de HTML e CSS. Minha intenção é desenvolver um site pessoal de página única com menus: Home, Sobre, Galeria e Contato. Na <div> galeria obviamente irei necessitar de algo em flash talvez.

Gostaria mesmo de fazer um curso... Mas não tenho recursos para pagar um por enquanto...

O que vocês me recomendam? Sou iniciante... Estou com algo muito básico montado (tudo desenvolvido em bloco de notas com HTML e CSS) e vejo que necessito melhorar a interface...

Alias, qual a diferença entre HTML e HTML5? E qual a diferença entre CSS e CSS3?

Alguma ajuda? Alguma indicação de site que possa me ajudar? Ou alguém de boa vontade que possa me dar dicas?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Cora Coralina,

Vamos por partes, como já dizia nosso famoso jack!

Você não precisa fazer um curso.. a internet dispõe muitas informações.. basta saber procurar!

A principal diferença do HTML e HTML 5 é a adição de novos recursos.. como por exemplo adição de novos elementos, novos atributos, total suporte ao CSS3, integração com vídeos e audios.. graficos em 2D e 3D, e etc..

Como a maioria( senão todos) ainda não suportam totalmente os recursos do html 5.. seu uso fica um pouco limitado.. mas isso não quer dizer que não possa usare até recomendo para certas ocasiões.

para saber mais sobre o HTML 5 veja este site: http://www.w3schools.com/html/html5_intro.asp

A distinção entre CSS e CSS 3 está nos novos atributos e a possibilidade de animações em keyframes.. Com css3 é possivel fazer coisas que antes só com action script( flash) daria para fazer.

Portanto, podemos abolir o flash pois é um plugin muito pesado..e trava constantemente. além disso, depende que, o usuário o tenha instalado..

Sobre onde estudar.. existem inúmeros sites bons de video aulas como por exemplo:

http://www.videoaulasbrasil.com.br/

http://www.mxmasters.com.br/

http://www.upinside.com.br/

Sites de apostilas

http://www.apostilando.com/

http://www.w3schools.com(inglês)

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • Autor do tópico
  • Existe outra dúvida... Estou usando bloco de notas para fazer as marcações html e os estilos css. E no momento em que renderizo a página o Internet Explorer 9 a interface não segue os comandos definidos no bloco de notas. Ou seja, um dos principais problemas são as colunas desalinhadas. O que posso fazer para solucionar o problema?

    abraços.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Recomendo você utilizar uma IDE boa para desenvolver seus códigos. alguns exemplos:

    Eclipse for php( helios)

    Notpad++

    Komodo Edit

    Sobre o erro.. o IE é um pouco problemático... no caso é só criar um css específico para o ie e coloca-lo em um comentário condicional.

    uma dica é colocar no css do ie somente aquilo que quer arrumar no ie.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Olá,

    Valeu pela dica dos programas. Antes de baixar o Komodo tive contato com o Dreamweaver. Gostaria de confirmar se o Komodo, assim como o Dreamweaver, possui visualizador de interface. Ao mesmo tempo em que se programa é possível visualizar as entidades de interface no Komodo?

    Obrigada de novo =D.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Olá, Acredito que não.

    Tanto como eclipse, notepad++ e komodo usam apenas o editor em código. De qualquer forma sugiro que abandone a ideia de fazer visualizar no programa.. geralmente eles dão resultados diferentes do que no navegador. A melhor maneira de visualizar é no navegador mesmo.

    Agora minha opinião pessoal:

    Dentro desses que citei, o eclipse dá de 10 a zero. sem contar que podes instalar extensões. Atualmente uso a versão mais recente do Eclipse(juno) com o plugin PDT que serve para o desenvolver em php.

    A melhor coisa você já está fazendo que é praticar seus códigos! A diferença é usar uma IDE só para agilizar o que você já sabe.. bem diferente do dreamweaver que FAZ as coisas por você e incentiva os usuários a dependerem de seus recursos.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Nooossa,

    :/ Nem o IE9, nem o Mozilla Firefox estão renderizando minha página corretamente. Tentei inserir código CSS, mas mesmo assim nada... :/. Será que estou fazendo todo errado?!

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Bom nesse caso, recomendo que poste aqui o código que está tentando fazer os navegadores interprertarem.

    Ps: Não esqueça de usar a tag CODE. Podes encontrar no painel de responder em modo avançado o botão é com o simbolo de "# " entre o QUOTE e o SPOILER

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • coloquei entre as tags <head></head> o seguinte:


    <style type="text/css" media="screen">
    @import "../_Resource/Css/topo.css";
    @import "../_Resource/Css/conteudo.css";
    @import "../_Resource/Css/coluna_relacional.css";
    @import "../_Resource/Css/coluna_menu.css";
    @import "../_Resource/Css/rodape.css";
    @import "../_Resource/Css/outros.css";
    </style>

    <!--[if lte IE 6]>
    <style type="text/css" media="screen">
    @import "../_Resource/Css/hacks_ie6.css";
    </style>
    <![endif]-->

    <!--[if IE 7]>
    <style type="text/css" media="screen">
    @import "../_Resource/Css/hacks_ie7.css";
    </style>
    <![endif]-->

    Mas não adiantou muita coisa :/.

    Achei um outro link que usa outros tipos de Hacks:

    http://www.cssnolanche.com.br/css-hacks-para-ie-firefox-opera-safari-konqueror/

    Se puderem dar uma olhada ;).

    Obrigada de novo =D

    Editado por dif
    Usar a tag CODE. Ela faz parte das regras.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    experimente trocar o import pelo caminho completo. exemplo:

    <link rel=StyleSheet href="arquivo.css" type="text/css" media="all">

    faça isso com todos seus arquivos css externos.

    Outra coisa, não recomendo você picotar seu css como está fazendo.. isso leva mais tempo para ser lido.. pois ele teria que carrega cada arquivo.. junte todos os css em um só que ficará melhor.. para questão de organização adote o uso dos comentários dentro do css.

    já para o IE está certo em utilizar comentários condicionais. Lembre-se de colocar apenas os atributos que quer que o IE renderize. deixe o resto para o CSS principal.

    seria interessante você postar o código html pode haver erros de sintaxe.. fazendo que o navegador não renderize completamente

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Agrupei todos os CSS em uma única referência externa. E para a renderização coloquei desta forma agora:



    <link rel=StyleSheet href="css/layout.css" type="text/css" media="all">/_Resource/Css/layout.css";


    <!--[if lte IE 6]>
    <style type="text/css" media="screen">
    <link rel=StyleSheet href="layout.css" type="text/css" media="all">/_Resource/Css/hacks_ie6.css";
    </style>
    <![endif]-->

    <!--[if IE 7]>
    <style type="text/css" media="screen">
    <link rel=StyleSheet href="layout.css" type="text/css" media="all"> /_Resource/Css/hacks_ie7.css";
    </style>
    <![endif]-->

    Mas não funcionou... Será que fiz alguma besteira?!:confused:

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    esta linha:

    <link rel=StyleSheet href="css/layout.css" type="text/css" media="all">/_Resource/Css/layout.css";

    isso não existe. retire a parte de: /_Resource/Css/layout.css";

    Acredito que você precisa estudar um poquinho mais sobre CSS externo, sintaxe html da chamada.. e etc.

    Outra coisa que está errada:


    <!--[if lte IE 6]>
    <style type="text/css" media="screen">
    <link rel=StyleSheet href="layout.css" type="text/css" media="all">
    </style>
    <![endif]-->

    se você já está chamando um css externo... não há necessidade de colocar o <style>

    se estas usando media="screen", não use media="all" juntos.. ou é um ou é outro..

    tente deixar desta forma:


    <link rel=StyleSheet href="css/layout.css" type="text/css" media="all">


    <!--[if lte IE 6]>
    <link rel=StyleSheet href="layout_ie6.css" type="text/css" media="all">
    <![endif]-->

    <!--[if IE 7]>
    <link rel=StyleSheet href="layout_ie7.css" type="text/css" media="all">
    <![endif]-->

    note que eu nomei os css de acordo com o comentário condicional.. nesse caso, como se trata de navegadores diferentes.. podes usar mais de um css.

    Lembre que no layout.css vai TODO seu css. e no layout_ie6.css contém apenas as linhas de atributos para arrumar o layout para o IE 6.. e por aí vai..

    Recomendo postar seu código HTML para obter respostas mais eficientes.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Aí vai o HTML:


    <html>

    <head>

    <link rel=StyleSheet href="css/layout.css" type="text/css" media="all">/_Resource/Css/layout.css";

    <!--[if lte IE 6]>
    <style type="text/css" media="screen">
    <link rel=StyleSheet href="layout.css" type="text/css" media="all">/_Resource/Css/hacks_ie6.css";
    </style>
    <![endif]-->

    <!--[if IE 7]>
    <style type="text/css" media="screen">
    <link rel=StyleSheet href="layout.css" type="text/css" media="all"> /_Resource/Css/hacks_ie7.css";
    </style>
    <![endif]-->

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">// <![CDATA[
    $(document).ready(function() {
    function filterPath(string) {
    return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
    }
    $('a[href*=#]').each(function() {
    if ( filterPath(location.pathname) == filterPath(this.pathname)
    && location.hostname == this.hostname
    && this.hash.replace(/#/,'') ) {
    var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
    var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
    if ($target) {
    var targetOffset = $target.offset().top;
    $(this).click(function() {
    $('html, body').animate({scrollTop: targetOffset}, 300);
    return false;
    });
    }
    }
    });
    });
    // ]]></script>


    <title>Aba Exemplo • Portifolio</title>

    <meta name="author" content="Nome do Autor">
    <meta name="description" content="Meta Tags - assunto">
    <meta name="keywords" content="palavras">
    <meta http-equiv="content-language" content="pt-br">
    <meta name="reply to" content="emailexemplo@gmail.com">

    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>

    </head>



    <body>

    <section id="menu centro">

    <div id="menu">

    <ul>
    <li><a href="#index.html">home</span></a></li>
    <li><a href="#sobre.html">sobre</span></a></li>
    <li><a href="#galeria.html">galeria</span></a></li>
    <li><a href="#contato.html">contato</span><a/></li>
    </ul>

    </div>



    <div id="principalA">

    <h2>

    <a name="home.html">Home</a>


    </h2>

    <p>All human beings are born free and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood. ll human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood.ll human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood. ll human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood.ll human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood</p>

    </div>



    <div id="principalA">

    <h2>

    <a name="sobre.html">Sobre</a>


    </h2>

    <p>All human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood. nd should act towards one another in a
    spirit of brotherhood. ll human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood.ll human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood. ll human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood.ll human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood</p>
    </div>



    <div id="principalA">

    <h2>

    <a name="galeria.html">Galeria</a>


    </h2>

    <p>All human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood. nd should act towards one another in a
    spirit of brotherhood. ll human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood.ll human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood. ll human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood.ll human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood</p>

    </div>



    <div id="principalA">

    <h2>

    <a name="contato.html">Contato</a>

    </h2>

    <p>All human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood. nd should act towards one another in a
    spirit of brotherhood. ll human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood.ll human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood. ll human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood.ll human beings are born free
    and equal in dignity and rights.
    They are endowed with reason and conscience
    and should act towards one another in a
    spirit of brotherhood</p>

    </div>



    <div id="principalA">
    <h4>Copyright © Autor </h4>
    </div>

    </section>

    </body>



    </html>

    Espero que não esteja tão ruim assim... rs...

    Obrigada de novo! :wacko:

    Editado por dif
    Como seu código é enorme, adicionar a tag SPOILER é uma boa pedida!

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Então. os erros estão nas chamadas do CSS como já comentei no meu post #12. ( importante) reforçando:

    retire:

    /_Resource/Css/layout.css"; da chamada dos CSS.

    Fora isso ainda existe mais um erro e uns detalhes:

    <section id="menu centro">

    não podes por espaço ali. Junte as palavras ou elimine uma.

    Outra coisa importante, é que não se usa dois ID, mas class pode ter mais de uma.

    Está faltando o DOCTYPE do HTML5 para isso adicione esta linha logo acima de tudo:

    <!DOCTYPE HTML>

    e falta o charset que podes adicionar esta linha:

    <meta charset="UTF-8"> pode ser adicionado dentro de <head>

    A respeito do charset, ao invés de ISO-8859-1, utlize o padrão universal é UTF-8 e acostume-se a usar sempre... evita muitos problemas de caracteres.. ainda mais se usar um banco de dados!

    Editado por dif

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Nossa! que legal! Muito obrigada mesmo!!!:D

    Só o fato de acertar os códigos já fez os navegadores (IE9 e Firefox) lerem a interface do mesmo jeito!

    Ficaram algumas dúvidas:

    - Por que será que o IE9 não lê o meu "favicon" na abinha la de cima? Só o Firefox está fazendo isso.. rs...

    - De acordo com sua explicação (dif) tentei alterar as ID para CLASS, mas acontece que os menus perdem as propriedades visuais do CSS, mesmo estando referenciado a partir do layout.css. Ao alterar para CLASS se estabelece uma listagem de links com marcadores. Você recomenda que eu realmente altere ID para CLASS? E se eu fizer isso, como fica a interface dos menus? Ela deve ser perdida mesmo?

    Muito obrigada. Beijos!:)

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Cora, em momento algum sugeri para trocar de ID para class!.

    Só alertei que com ID não é possivel ter duas palavras separadas. Já com class pode.

    No seu caso, se quiser não precisa trocar para class, basta juntar as duas palavras: <section id="menuCentro"> e no CSS fazer o mesmo:

    #menuCentro{ }

    Agora se tiver interesse em trocar para class, no CSS deve-se por ponto(.) ao invés de tralha(#). exemplo: .menuCentro{ }

    Explicação sobre classes:

    Quando se usa class, permitimos que o elemento possa assumir vários atributos. exemplo:

    css:


    .paragrafo{
    font-family: Arial;
    color: blue;
    }

    .diferente{
    font-size: 16pt;
    font-weight: bold;
    color: red !important;
    }

    html:


    <p class="paragrafo"> este é um parágrafo</p>
    <p class="paragrafo diferente"> este é mais um parágrafo, mas é diferente</p>

    Perceba no código html, que ambos paragrafos possuem a class paragrafo e o segundo possui além da classe paragrafo, possui a classe diferente.

    O resultado da renderização do exemplo seria:

    o paragrafo com apenas uma classe, mostraria a frase em azul com a letra arial.

    Já o segundo paragrafo, inicialmente teria a letra arial e seria azul. Mas como possui uma segunda class, ela recebe também o tamanho de letra em 16pt, negrito e sua cor ficaria vermelho, por causa do atributo !important que serve para sobrescrever uma regra padrão.

    De nada, sempre as ordens!

    Beijo para você.

    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Olá de novo! :confused:

    Estou concentrada em uma parte da marcação HTML. Mas não sei o que há errado com o menu. No final do link contato sobra um retângulo sem função, que deixa a delimitação do último link diferente dos demais. O editor de texto não esta marcando erros nem para o HTML e nem para o CSS. Será ainda um problema de decodificação do navegador?

    Linhas de código:



    <div id="menu">

    <ul>
    <li><a href="#index.html">home</span></a></li>
    <li><a href="#sobre.html">sobre</span></a></li>
    <li><a href="#galeria.html">galeria</span></a></li>
    <li><a href="#contato.html">contato</span><a/></li>
    </ul>

    </div>

    Desculpe a falta de entendimento em alguns momentos ;). Obrigada de novo!:)

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Seria interessante postar um print do problema... e o css do menu.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Olá!

    Desculpe de novo.. Sou nova no fórum... e também estou tentando aprender um pouco da linguagem agora... algo que ainda tenho muita dificuldade... e que o fórum está me ajudando muito mesmo. :D

    Eu fiz o print do menu... E tentei anexar a imagem aqui... Achei que seria igual ao que se faz em um e-mail comum... Mas o "Inserir uma Imagem" pede uma URL... Não sei como fazer isso :(.

    Obrigada! Beijos!

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Este tipo de anexo que estás tentando fazer, é para quando você hospedar suas imagens em site de terceiros como imageshack, picassa, photobucket.. então é necessário da url hospedada neles!

    Recomendo anexar aqui pelo nosso fórum que é mais fácil e melhor!

    Para anexar uma imagem, use painel no modo Avancado que fica do lado do "Enviar Resposta Rápida".

    Procure um ícone de "clips", depois quando abrir a janelinha, procure a imagem e clique em enviar, depois que terminar enviar podes fechar a janela e submeter sua resposta.

    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • O retângulo que "sobra" no menu está em cor marrom na imagem anexa.

    Encaminho também a parte do css que marca o estilo do menu. Caso seja necessário, posso encaminhar o código css inteiro.



    #menu{
    overflow:hidden;
    }

    #menu ul{
    list-style: none;
    float: left;
    position: relative;
    left: 50%;

    }

    #menu ul li{
    float: left;
    position: relative;
    right: 50%;
    margin: 0 1px;
    background:orange right top no-repeat;
    }

    #menu ul li a{
    font-family: 'Verdana';
    font-size: 12px;
    color: #000;
    padding: 10px 50px;
    display: block;
    }

    #menu ul li a:hover{
    background: #8B5A00;
    color: #fff;
    }

    #menu li a.active{background-color: #8B6914; color: #fff;}

    Obrigada!

    post-1023767-13884964653056_thumb.jpg

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Então,

    Analisando seus códigos e fazer um teste, aqui funcionou bem.

    Seu css está correto.

    Provavelmente seu erro está na estrutura do menu no html.

    Perceba que esqueceu de colocar a abertura da tag span em todas as Li's e a barra de fechamento da tag a em contato está invertida.

    Veja, em destaque em vermelho onde foi que você errou.


    <li><a href="#index.html">[COLOR="Red"]<span>[/COLOR]home</span></a></li>
    <li><a href="#sobre.html">[COLOR="red"]<span>[/COLOR]sobre</span></a></li>
    <li><a href="#galeria.html">[COLOR="red"]<span>[/COLOR]galeria</span></a></li>
    <li><a href="#contato.html">[COLOR="red"]<span>[/COLOR]contato</span>[COLOR="red"]</a>[/COLOR]</li>

    Ps: Na primeira vez que vi o código html me passou desapercebido.. notei quando coloquei na minha IDE que logo acusou o erro! rsrs

    Editado por dif
    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Olá de novo :)

    Tenho outra dúvida sobre o mesmo site. Encontrei um jQuery em um tutorial, que proporciona a rolagem suave do site de página única. Mas verifiquei que mesmo tendo-o inserido no código o efeito não aparece. Neste caso a programação já estava pronta. Será que existe algum problema com o código?

    Não consigo entender nada deste tipo de linguagem.:wacko:



    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">// <![CDATA[
    $(document).ready(function() {
    function filterPath(string) {
    return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
    }
    $('a[href*=#]').each(function() {
    if ( filterPath(location.pathname) == filterPath(this.pathname)
    && location.hostname == this.hostname
    && this.hash.replace(/#/,'') ) {
    var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
    var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
    if ($target) {
    var targetOffset = $target.offset().top;
    $(this).click(function() {
    $('html, body').animate({scrollTop: targetOffset}, 300);
    return false;
    });
    }
    }
    });
    });
    // ]]></script>

    Obrigada. Bjos!

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Crie uma conta ou entre para comentar

    Você precisar ser um membro para fazer um comentário

    Entre para seguir isso  





    Sobre o Clube do Hardware

    No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

    Direitos autorais

    Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

    ×