Ir para conteúdo

POWERED BY:

Arquivado

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

lais lol

Site com âncora e scroll na horizontal

Por , em Desenvolvimento frontend

Recommended Posts

lais lol    0

lais lol
Postado

Bom dia,

Estou no desenvolvimento de um projeto que tem deslizamento horizontal, consigui fazer os movimentos e tal, mas estou enfrentando problemas na hora de clicar na âncora. pois ele deveria carregar no centro da tela, de qualquer resolução.

se puderem me ajudar, derem uma olhada no meu cod. eu agradeço.

 

[css]

body {background:url(img/repeat.jpg) top center repeat-x #000;font-family:Arial, Helvetica, sans-serif;font-size:13px;}
.main {background:url(img/bg.jpg) bottom left repeat-x;width:12000px;height:700px;display:table;overflow-x:hidden;}
#site {width:1045px;height:auto;background:url(img/fundo-capa.jpg) top no-repeat;float:left;margin:0 10em;overflow-x:hidden;}
#int_site {width:980px;height:auto;display:table;margin:auto;padding:0 0 0 20px;}
.iframe {background:url(img/blank.gif)}
#logo {width:321px;height:auto;float:left;}
#meno {width:520px;height:55px;float:left;margin:0 0 0 35px;}
#carrossel {width:600px;height:auto;float:left;}
#tels {width:170px;height:187px;float:left;background:url(img/bar-capa.png) top right no-repeat;margin-top:40px;}
#loc {width:150px;height:auto;float:left;margin-top:40px;}
#clientes {width:600px;height:auto;float:left;margin-left:35px;}
.thumbs {width:118px;height:34px;padding:10px 0;background:url(img/bg-clientes.gif);line-height:54px;float:left;text-align:center;margin:10px 1px;_margin:10px 0px;}
#portifolio{width:1045px;height:515px;float:left;background:url(img/fundo-internas.jpg) top no-repeat #fff;}
#int_port {width:980px;height:auto;margin:auto;}
#conheca {width:1045px;height:515px;float:left;background:url(img/fundo-internas.jpg) top no-repeat #fff;}
#int_conheca {width:980px;height:auto;margin:auto;}
#esq {width:210px;height:auto;float:left;margin-left:40px;_display:inline;}
#solucoes {width:1045px;height:515px;float:left;background:url(img/fundo-internas.jpg) top no-repeat #fff;}
#int_solucoes {width:980px;height:auto;margin:auto;}
#teclien{width:1045px;height:515px;float:left;background:url(img/fundo-internas.jpg) top no-repeat #fff;}
#int_teclien {width:980px;height:auto;margin:auto;}
#contatos{width:1045px;height:515px;float:left;background:url(img/fundo-internas.jpg) top no-repeat #fff;}
#int_contatos {	width:980px; height:auto; margin:auto;}
.esp-clientes {width:105px; height:73px; text-align:center; padding:10px; background:url(img/thumb-clientes.png) top no-repeat; float:left; margin:2px 2px;}
#conteudo {width:670px; height:auto; float:left; margin-left:40px; _display:inline; padding:50px 0 0 20px; _padding:50px 0 0 10px;}
#header {width:1500px; float: left; }
#container {position: absolute;width: 12000px; margin: 0;}
.box {width:1500px; margin:0 75px; float: left; display:table; }

 

 

 
<body>
<div class="main">
  <div id="header">
    <!-- PÁGINA INICIAL --->
    <div id="site"><a name="home"></a>
      <Div id="int_site">
        <div id="logo"><a href="#home"><img src="img/logo.png" width="321" height="221" /></a><br />
          <div align="left"><br />
          texto</div>
          <Div id="tels">telefones </Div>
          <div id="loc"> <img src="img/localizacao.gif" /> endereco</div>
        </div>
<%server.Execute("modulos/menu.asp")%>
        <div id="carrossel"><img src="img/carrosel.png" /> </div>
        <Div id="clientes"><strong>texto</strong><br />
          detalhes<br />
          <div class="thumbs"><img src="img/clientes/thumbs.gif" /></div>
          <div class="thumbs"><img src="img/clientes/thumbs.gif" /></div>
          <div class="thumbs"><img src="img/clientes/thumbs.gif" /></div>
          <div class="thumbs"><img src="img/clientes/thumbs.gif" /></div>
          <div class="thumbs"><img src="img/clientes/thumbs.gif" /></div>
        </Div>
      </Div>
    </div>
  </div>
   <div id="box1" class="box">
    <!-- INICIO CONHEÇA A EMPRESA -->
    <div id="conheca"><a name="conheca"></a>
      <div id="int_conheca">
        <Div id="esq"> <a href="#home"><img src="img/logo_int.png" alt="conheca" class="conheca" width="210" height="84" /></a> <br />
          <br />
          <h4>titulo</h4>
          <ul id="menubv">
            <li>menu</li>
            <li>menu</li>
            <li>menu</li>
          </ul>
        </Div>
<%server.Execute("modulos/menu.asp")%>
        <Div id="conteudo">
          <iframe src="modulos/frame_conheca.asp" name="cont" width="680" allowtransparency="true" class="iframe"  height="500" frameborder="0"></iframe>
        </Div>
      </div>
    </div>
  
  </div>
  </body>



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
GabrielFerrari
			  

	
		
	
			 41
	
		
	

		

		

			


	
		GabrielFerrari
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

A Ancora vai ter esse problema mesmo.



Ela só vai até onde é necessário.


 



Para fazer o que você quer recomendo esse link:



http://www.screencaster.com.br/jquery-smooth-%3Cspan%20class=


 



É simples e fácil!


 



Qualquer problema torne a postar =)



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
					
					
					






					
				
					
					
					






					
				
					
					
					






					
				
					
					
					







	

	

		

			
T.Colucci
			  

	
		
	
			 33
	
		
	

		

		

			


	
		T.Colucci
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Bem, você pode fazer isso com javascript, acredito que será mais facil e rápido de se fazer isso.


 


Mas existem várias formulas para centralizar o elemento:


 





#elemento{
     margin: 0 auto
}

/* Ou ainda esse, as vezes eu prefiro usar, pois é bem garantido, nunca me deixou na mão */

#elemento{
   position: absolute;
      width: 200px;
       left: 50%;
margin-left: -100px;




Nesse último caso, tem que ver se o elemento pode usar o position: absolute;


A formula funciona assim: o margin-left será a METADE DA LAGURA DO ELEMENTO, MAS NEGATIVO (se a largura for 200px, entao será -100px; se a largura for 1000px, será -500px... e assim por diante).


 


 


Testa ai, qlq problema volte a postar. ;P



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
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