Ir para conteúdo

POWERED BY:

Arquivado

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

DackAle

Barra horizontal e centralização do site

Por , em Desenvolvimento frontend

Recommended Posts

DackAle    0

DackAle
Postado

Fala pessoal

 

Seguinte, está sendo projetado um site com uma "experiência" diferente na disposição do site, antes de mais nada, será testado com diversos usuários para ver a aceitação e a facilidade de navegação.

 

Mas neste site haverá uma barra de rolagem HORIZONTAL e o site estará no meio da tela, o problema é quando entramos no site, começa na esquerda e não no MEIO, como fazer para falar para o navegador "olha, quero que voce mostre no meio da tela" e inclusive colocar âncoras nas laterais para voltar para o meio?

 

Qualquer ajuda é muito bem vindo.

 

Abração

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

em HTML você pode usar HASH

mas é dificil d+ aplica-lo

 

exemplo:

<a href="#nome">link</a>
<a name="nome">nome</a>

URL: www.site.com/index.html#nome

 

use javascript que é mais pratico(va na sessão de js caso seja isso o que você queira)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Use hash. Não é necessário criar necessariamente um link com o atributo name para tal, pode usar o id de qualquer elemento.

 

Também pode usar javascript, função scrollTo(x,y)

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

e para capturar as dimensões você pode usar:

obejto.clientWidth;
(objeto é uma indicação ao elemento q você deseja pegar a largura)

vai ter um pouco de matematica

 

aconselho a criar um elemento PAI e um filho

o PAI vai ter a barra de rolagem e o filho o conteudo

você captura a largura faz um pouco de matematica e aplica

 

scrollTo(X,Y);

melhor mover pra JS né?

acho q ja saimos quase totalmente de HTML ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

maclaw    0

maclaw
Postado

Olá cara...

 

Feliz natal ho ho ho http://forum.imasters.com.br/public/style_emoticons/default/natal_noel.gif

 

Nada substitui a utilização de tabless...

 

Mas...

 

Como ocorreu comigo... Eu não tinha como mudar o layout pois o site ja estava no ar.

 

http://forum.imasters.com.br/public/style_emoticons/default/excl.gif SOLUÇÃO (centralizar o layout em tempo de execução):

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="br" xml:lang="br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titulo da página</title>

<script  language='javascript' type='text/javascript'>

function changeBody() {
	   var tamanhoDoSeuLayout = 779;
	   var tamanhoTela = document.documentElement['clientWidth'];
	   var sobra = tamanhoTela - tamanhoDoSeuLayout;
	   var margem = Math.floor(sobra / 2);	 
	   margem = margem + "px";
	   document.write("<body style=\"margin-left:" + margem + "\" onresize=\"adjustBody();\">");
}

function adjustBody() {
	var tamanhoTela = document.documentElement['clientWidth'];
	var sobra = tamanhoTela - tamanhoDoSeuLayout;
	var margem = Math.floor(sobra / 2);	 
	margem = margem + "px";
	
	document.body.style.marginLeft = margem;
}
</script>
</head>
<script  language='javascript' type='text/javascript'>

changeBody();

</script>
</body>
</html>

PS.:

http://forum.imasters.com.br/public/style_emoticons/default/natal_mad.gif Não me chinguem... Tambem não achei correto, mas... resolveu meu problema.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

@maclaw:

O quê diabos isso tem a ver com o problema do DackAle??? http://forum.imasters.com.br/public/style_emoticons/default/natal_sad.gif

 

[]'s

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