Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Meteora Design

[Resolvido] Ancora em HTML

Por , em Desenvolvimento frontend

Recommended Posts

Meteora Design    0

Meteora Design
Postado

Galera, preciso de um help!rs'

Estou fazendo um site na horizontal, com um menu alinhado a esquerda e FIXO. Porém os links desse menu só funcionam na "primeira página" do site. E quando clicamos em contato por exemplo, ele vai para contato, porém os links não sao mais clicáveis, ficam lá como uma imagem normal.

 

Se alguem souber me ajudar, teria como me passar os facebook ou algo do genero para podermos conversar?

 

Muito obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meteora Design    0

Meteora Design
Postado

Galera, eu descobri o problema! O problema é o alinhamento das DIVs, mas mesmo descobrindo qual é o problema eu não sei arrumar.

Estou postando abaixo o código de meu site, o HTML e o CSS.

 

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" media="screen" />
<title>Meteora Design</title>
</head>

<body>
<div id="fundo">

<div id="menu">
<ul>
<a href="#contato"><li>Contato</li></a>
<a href="#portfolio"><li>Portfólio</li></a>
<a href="#sobre"><li>Sobre</li></a>
<a href="#servicos"><li>Serviços</li></a>
<a href="#depoimentos"><li>Depoimentos</li></a>
</ul>
</div> <!--MENU-->

<div id="logotipo">
</div> <!--LOGOTIPO-->

</div> <!--FUNDO-->

<div id="informa">
<p>Em um mundo globalizado, onde a comunicação digital está sendo a melhor forma para divulgar seu produto, mas não a única, ter um site pode ser a solução para sua empresa crescer mais rapidamente. 
Desde 2010, o Meteora Design vem desenvolvendo páginas na internet com qualidade e ótimos preços. Faça um orçamento sem compromisso.</p>
</div> <!--INFORMA-->

<div id="contato">
<form name="form1" method="post" action="enviar.php">
<div id="esquerda">
<p><input name="nome" type="text" id="nome" size="45" placeholder="Seu Nome" style="width:300px;"></p>
<p> </p>
<p><input name="email" type="text" id="email" size="45" placeholder="Seu E-mail" style="width:300px;"></p>
<p> </p>
<p><input name="assunto" type="text" id="assunto" size="45" placeholder="Assunto" style="width:300px;"></p>
<p> </p>
<p><textarea name="mensagem" cols="50" rows="5" wrap="VIRTUAL" id="mensagem" placeholder="Digite sua Mensagem" style="width:300px;"></textarea></p>
<p> </p>
<p><input type="submit" name="Submit" value="Enviar" id="btnenvia" style="text-align:center; font-style:italic;"></p>
</div> <!--ESQUERDA-->
</form>
</div> <!--CONTATO-->


<div id="portfolio" align="right">
Aqui ficará os Trabalhos
</div> <!--PORTFOLIO-->

<div id="sobre" align="right">
Sobre o Site
</div> <!--SOBRE-->

<div id="servicos" align="right">
SERVICOS DO METEORA
</div> <!--SERVICOS-->

<div id="depoimentos" align="right">
Depoimentos do MD
</div> <!--DEPOIMENTOS-->

 <!-- The JavaScript -->
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>		
       <script type="text/javascript" src="jquery.easing.1.3.js"></script>
       <script type="text/javascript">
           $(function() {
               $('a').bind('click',function(event){
                   var $anchor = $(this);
                   /*
                   if you want to use one of the easing effects:
                   $('html, body').stop().animate({
                       scrollLeft: $($anchor.attr('href')).offset().left
                   }, 1500,'easeInOutExpo');
                    */
                   $('html, body').stop().animate({
                       scrollLeft: $($anchor.attr('href')).offset().left
                   }, 1000);
                   event.preventDefault();
               });
           });
       </script>

</body>
</html>

 

Agora o CSS

@charset "utf-8";
/* CSS Document */

*{
margin:0;
padding:0;
}

body{
background: url(../images/background.jpg) fixed;
width:100%;
height:100%;
}

#fundo{
width:500%;
height:400px;
margin-top:15%;
}

#menu{
background: url(../images/menu.png);
width:107px;
height:190px;
position:fixed;
float:left;
}

#menu li{
text-align:center;
width:107px;
height:40px;
font-size:21px;
color:transparent;
}

#menu a{
text-decoration:none;
}

#logotipo{
background:url(../images/Logotipo-Meteora-Design.png);
width:500px;
height:200px;
float:left;
margin-left:120px;
position:fixed;
}

#informa{
width:600px;
text-align:justify;
float:left;
color:#fff;
margin-left:650px;
margin-top:-300px;
padding-bottom:-300px;
font-family:Verdana,Arial,sans-serif;
   font-size:14px;
}

#contato{
position: absolute;
width: 70%;
left: 130%;
float:left;
margin-top:-300px;
color:#fff;
text-align:right;
}

#portfolio{
position:absolute;
width:100%;
left: 300%;
color:#fff;
}

#sobre{
position:absolute;
width:100%;
left: 400%;
color:#fff;
}

#servicos{
position:absolute;
width:100%;
left: 500%;
color:#fff;
}

#depoimentos{
position:absolute;
width:100%;
left: 600%;
color:#fff;
}

 

 

Se alguem puder me ajudar, eu agradeço demais em gente!

 

Acho que um bom exemplo de Web-Site na horizontal, mais ou menos como eu quero, é esse aqui http://www.artist-in-design.de/#index

 

 

Agradeço qualquer ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

ronal-gato    15

ronal-gato
Postado

maninho por que você num separo por paginas ? ta todo seu site aparecendo numa pagina so nunca tinha visto isso antes e o ruim de assim por que tem o risco da pagina fica muito pesada de carregar tente mudar isso e seu problema num intendi qual e o seu problema que erro esta dando ? você ta usando somente html e css no seu site ?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito