Topo fixo e link interno

Rodrigo Aparecido Alves · Dezembro 2, 2013

Boa tarde! Estou criando um site e gostaria de fazer igual a esse http://neemu.com/ site de página única com menu fixo e ao clicar a página rolar e ir até o link solicitado. Porém não estou conseguindo alguém pode me ajudar?

William Bruno · Dezembro 2, 2013

O que vc não está conseguindo ?

Qual a sua dúvida ? E oque vc já fez ? Deu erro ? Qual ?

Keven Jesus_164006 · Dezembro 2, 2013

faz a div normal dessa parte de cima e só acrescenta um position:fixed; ja eras ...

Rodrigo Aparecido Alves · Dezembro 2, 2013

Oi William.

Esse eo HTML:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div id="quem_somos" class='divlink'><p><a href="#quem-somos">QUEM SOMOS</a></p></div>

<div id="servicos" class='divlink'><p><a href="#b_servicos">SERVIÇOS</a></p></div>

<div id="clientes" class='divlink'><p><a href="#b_clientes">CLIENTES</a></p></div>

<div id="contatos"class='divlink'><p><a href="#b_contatos">CONTATOS</a></p></div>

</div>

</header>

<div id="quemsomos"><a id=quem-somos><h1>QUEM SOMOS</h1></a></div>

<div id="b_servicos"><h1>SERVIÇOS</h1></div>

<div id="b_clientes"><h1>CLIENTES</h1></div>

<div id="b_contatos"><h1>CONTATOS</h1></div>

</body>

</html>

e esse é o CSS

@charset "utf-8";

/* CSS Document */

body{background-color:#242a31;}

header{width:1345px; height:170px; margin: -8px 0px -8px -8px; position:fixed; background-color:#242a31;}

#menu{width:500px; height:40px; background-color:ffee09; margin: 70px 0px 0px 0px;float:right;}

.divlink a{color: #fff;}

.divlink a:hover{color: #ffee09;}

a:link{text-decoration:none;}

#quem_somos{width:auto height:auto; margin: 0px 0px 0px 100px; float:left;}

#servicos{width:auto height:auto; margin: 0px 0px 0px 10px; float:left;}

#clientes{width:auto height:auto; margin: 0px 0px 0px 10px; float:left;}

#contatos{width:auto height:auto; margin: 0px 0px 0px 10px; float:left;}

p{font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;}

#banner{width:1345px;height:570px; background-color:#fff; margin: -8px 0px 0px -8px;}

#body{width:auto; height:2000px;}

#quemsomos{width:1345px; height:400px; margin:0px 0px 0px 0px;}

#b_servicos{width:1345px; height:400px; margin:0px 0px 0px 0px;}

#b_clientes{width:1345px; height:400px; margin:0px 0px 0px 0px;}

#b_contatos{width:1345px; height:400px; margin:0px 0px 0px 0px;}

footer{height:30px; width:auto; background-color:#313b45; margin: 0px -8px -8px -8px;}

Quando clico no link no menu e faço ele descer para a div referente embaixo, a parte não encaixa certa embaixo do header e sim atrás dele e tambem não consigo dar o efeito de scroll, para quando clicar a página ter o efeito que "rolou" para o lugar desejado.

Keven,

Se você reparar no HTML que coloquei acima já fiz coloquei essa ordem

Rodrigo Aparecido Alves · Dezembro 2, 2013

faz a div normal dessa parte de cima e só acrescenta um position:fixed; ja eras ...

O que vc não está conseguindo ?

Qual a sua dúvida ? E oque vc já fez ? Deu erro ? Qual ?

Oi William.

Esse eo HTML:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div id="quem_somos" class='divlink'><p><a href="#quem-somos">QUEM SOMOS</a></p></div>

<div id="servicos" class='divlink'><p><a href="#b_servicos">SERVIÇOS</a></p></div>

<div id="clientes" class='divlink'><p><a href="#b_clientes">CLIENTES</a></p></div>

<div id="contatos"class='divlink'><p><a href="#b_contatos">CONTATOS</a></p></div>

</div>

</header>

<div id="quemsomos"><a id=quem-somos><h1>QUEM SOMOS</h1></a></div>

<div id="b_servicos"><h1>SERVIÇOS</h1></div>

<div id="b_clientes"><h1>CLIENTES</h1></div>

<div id="b_contatos"><h1>CONTATOS</h1></div>

</body>

</html>

e esse é o CSS

@charset "utf-8";

/* CSS Document */

body{background-color:#242a31;}

header{width:1345px; height:170px; margin: -8px 0px -8px -8px; position:fixed; background-color:#242a31;}

#menu{width:500px; height:40px; background-color:ffee09; margin: 70px 0px 0px 0px;float:right;}

.divlink a{color: #fff;}

.divlink a:hover{color: #ffee09;}

a:link{text-decoration:none;}

#quem_somos{width:auto height:auto; margin: 0px 0px 0px 100px; float:left;}

#servicos{width:auto height:auto; margin: 0px 0px 0px 10px; float:left;}

#clientes{width:auto height:auto; margin: 0px 0px 0px 10px; float:left;}

#contatos{width:auto height:auto; margin: 0px 0px 0px 10px; float:left;}

p{font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;}

#banner{width:1345px;height:570px; background-color:#fff; margin: -8px 0px 0px -8px;}

#body{width:auto; height:2000px;}

#quemsomos{width:1345px; height:400px; margin:0px 0px 0px 0px;}

#b_servicos{width:1345px; height:400px; margin:0px 0px 0px 0px;}

#b_clientes{width:1345px; height:400px; margin:0px 0px 0px 0px;}

#b_contatos{width:1345px; height:400px; margin:0px 0px 0px 0px;}

footer{height:30px; width:auto; background-color:#313b45; margin: 0px -8px -8px -8px;}

Quando clico no link no menu e faço ele descer para a div referente embaixo, a parte não encaixa certa embaixo do header e sim atrás dele e tambem não consigo dar o efeito de scroll, para quando clicar a página ter o efeito que "rolou" para o lugar desejado.

Keven,

Se você reparar no HTML que coloquei acima já fiz coloquei essa ordem

O que vc não está conseguindo ?

Qual a sua dúvida ? E oque vc já fez ? Deu erro ? Qual ?

Esse eo HTML:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div id="quem_somos" class='divlink'><p><a href="#quem-somos">QUEM SOMOS</a></p></div>

<div id="servicos" class='divlink'><p><a href="#b_servicos">SERVIÇOS</a></p></div>

<div id="clientes" class='divlink'><p><a href="#b_clientes">CLIENTES</a></p></div>

<div id="contatos"class='divlink'><p><a href="#b_contatos">CONTATOS</a></p></div>

</div>

</header>

<div id="quemsomos"><a id=quem-somos><h1>QUEM SOMOS</h1></a></div>

<div id="b_servicos"><h1>SERVIÇOS</h1></div>

<div id="b_clientes"><h1>CLIENTES</h1></div>

<div id="b_contatos"><h1>CONTATOS</h1></div>

</body>

</html>

e esse é o CSS

@charset "utf-8";

/* CSS Document */

body{background-color:#242a31;}

header{width:1345px; height:170px; margin: -8px 0px -8px -8px; position:fixed; background-color:#242a31;}

#menu{width:500px; height:40px; background-color:ffee09; margin: 70px 0px 0px 0px;float:right;}

.divlink a{color: #fff;}

.divlink a:hover{color: #ffee09;}

a:link{text-decoration:none;}

#quem_somos{width:auto height:auto; margin: 0px 0px 0px 100px; float:left;}

#servicos{width:auto height:auto; margin: 0px 0px 0px 10px; float:left;}

#clientes{width:auto height:auto; margin: 0px 0px 0px 10px; float:left;}

#contatos{width:auto height:auto; margin: 0px 0px 0px 10px; float:left;}

p{font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;}

#banner{width:1345px;height:570px; background-color:#fff; margin: -8px 0px 0px -8px;}

#body{width:auto; height:2000px;}

#quemsomos{width:1345px; height:400px; margin:0px 0px 0px 0px;}

#b_servicos{width:1345px; height:400px; margin:0px 0px 0px 0px;}

#b_clientes{width:1345px; height:400px; margin:0px 0px 0px 0px;}

#b_contatos{width:1345px; height:400px; margin:0px 0px 0px 0px;}

footer{height:30px; width:auto; background-color:#313b45; margin: 0px -8px -8px -8px;}

Quando clico no link no menu e faço ele descer para a div referente embaixo, a parte não encaixa certa embaixo do header e sim atrás dele e tambem não consigo dar o efeito de scroll, para quando clicar a página ter o efeito que "rolou" para o lugar desejado.

faz a div normal dessa parte de cima e só acrescenta um position:fixed; ja eras ...

Esse eo HTML:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div id="quem_somos" class='divlink'><p><a href="#quem-somos">QUEM SOMOS</a></p></div>

<div id="servicos" class='divlink'><p><a href="#b_servicos">SERVIÇOS</a></p></div>

<div id="clientes" class='divlink'><p><a href="#b_clientes">CLIENTES</a></p></div>

<div id="contatos"class='divlink'><p><a href="#b_contatos">CONTATOS</a></p></div>

</div>

</header>

<div id="quemsomos"><a id=quem-somos><h1>QUEM SOMOS</h1></a></div>

<div id="b_servicos"><h1>SERVIÇOS</h1></div>

<div id="b_clientes"><h1>CLIENTES</h1></div>

<div id="b_contatos"><h1>CONTATOS</h1></div>

</body>

</html>

e esse é o CSS

@charset "utf-8";

/* CSS Document */

body{background-color:#242a31;}

header{width:1345px; height:170px; margin: -8px 0px -8px -8px; position:fixed; background-color:#242a31;}

#menu{width:500px; height:40px; background-color:ffee09; margin: 70px 0px 0px 0px;float:right;}

.divlink a{color: #fff;}

.divlink a:hover{color: #ffee09;}

a:link{text-decoration:none;}

#quem_somos{width:auto height:auto; margin: 0px 0px 0px 100px; float:left;}

#servicos{width:auto height:auto; margin: 0px 0px 0px 10px; float:left;}

#clientes{width:auto height:auto; margin: 0px 0px 0px 10px; float:left;}

#contatos{width:auto height:auto; margin: 0px 0px 0px 10px; float:left;}

p{font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;}

#banner{width:1345px;height:570px; background-color:#fff; margin: -8px 0px 0px -8px;}

#body{width:auto; height:2000px;}

#quemsomos{width:1345px; height:400px; margin:0px 0px 0px 0px;}

#b_servicos{width:1345px; height:400px; margin:0px 0px 0px 0px;}

#b_clientes{width:1345px; height:400px; margin:0px 0px 0px 0px;}

#b_contatos{width:1345px; height:400px; margin:0px 0px 0px 0px;}

footer{height:30px; width:auto; background-color:#313b45; margin: 0px -8px -8px -8px;}

Quando clico no link no menu e faço ele descer para a div referente embaixo, a parte não encaixa certa embaixo do header e sim atrás dele e tambem não consigo dar o efeito de scroll, para quando clicar a página ter o efeito que "rolou" para o lugar desejado.

Denis.Santos · Dezembro 4, 2013

Boa tarde!

É bem fácil fazer uma estrutura deste tipo, basta você colocar isso em todo link:

<a href="#contato">

Por exemplo, vc tem um trecho da página que é para contato, ao invés de vc colocar uma URL para acessar este trecho vc colocará dentro da href o id referente ao trecho da página que você quer ir.

Entrar

Arquivado

Topo fixo e link interno

Recommended Posts

Rodrigo Aparecido Alves 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Keven Jesus_164006 39

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rodrigo Aparecido Alves 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rodrigo Aparecido Alves 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Denis.Santos 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante