centralizar site quase pronto

[guidomoraes 0]

Pessoal, desculpem criar um tópico tantas vezes discutido como este, mas é que li vários tutoriais e vários tópicos e não consegui resolver o problema.

Eu gostaria de centralizar este site que estou fazendo: http://www.caee.ufsc.br/principal.htm , que está todo em camadae e não consigo de jeito nenhum.

Comecei aprendendo diretamente na interface grafica do dreamweaver, e logicamente agora nao entendo a linguagem css para resolver. Tentei até criar um site do zero só usando CSS mas também não consegui entender como funciona os scripts de centralização, o máximo que consegui foi centralizar uma camada, e aí as outras camadas que usei nao centralizavam de acordo.

Vocês poderiam me ajudar a centralizar este site que mandei?

Muito obrigado pela atenção,

Guido

[Ramael 0]

Acho que você abusou muito nos divs. Por exemplo: No caso do menu esquerdo, você poderia ter o mesmo efeito com somente um DIV e uma classe no CSS.

 

Abusou demais também do posicionamento absoluto. Os seus div’s estão todos com esse posicionamento, então não importa o tamanho da tela ele ficará absolutamente naquela posição.

 

Enfim..... acho que não tem uma forma de centralizar sem mexer muito no seu CSS, afinal tudo está com posicionamento absoluto.

 

Pra centralizar, você poderia reposicionar o site, construindo-o dentro de um div container e depois posicionando absolutamente esse div container com um “left: 50%”, ou menos, pois o 50% é medido da ponta do div e não do meio, então ele vai ficar fora de centro.

 

“Eu acho”, que pra centralizar direitinho, sem se importar com a proporção e o tamanho da tela, o melhor seria uma pequena (bem minúscula mesmo) função em JavaScript. Você pegaria a largura da tela, menos a largura do seu div container, dividiria esse valor por dois, então usaria esse valor para o posicionamento absoluto.

 

Posso dar outras dicas ???

Rsssss mals.

 

Não é necessário declarar a classe “style2” em todos os divs. Você poderia ter declarado esse estilo, que corresponde a fonte do documento, diretamente na tag body do CSS, o mesmo principio vale para o border das imagens, ou o text-decoration dos links, você pode declarar tudo que for usado no site todo diretamente na tag, assim toda vez que você utilizar aquela tag, não precisará escrever “class” nela.

 

Outra coisa, você só declara um estilo com ID, se associado ao estilo está alguma outra função (javascript, por exemplo), que necessita que o elemento seja único no documento todo. Se é só um estilo propriamente dito, declare-o como CLASS, usando um “ponto” ao invés do “jogo da velha”.

 

Falando do z-index, não é necessário declara-lo em todo o estilo. Você só o usa quando for sobrepor elementos.

 

Tenta dar uma enxugada no código.....e validá-lo de acordo com a W3C também é muito bom.

 

 

 

 

T+

Ramael

 

ps.: Droga, não consigo escrever pouco... eu tentei, juro.

[guidomoraes 0]

Muito obrigado Ramael.

Então, todas esses "abusos" no código, como o jogo da velha, o style2, o z-index, saõ porque eu fiz o site usando a interface grafica, e pouco do css mesmo. E aí só "clicando" o dreamweaver já faz coisas como essas automaticamente.

O que não entendi é como eu faço para que a minha div container contenha as outras? Criar uma div dentro da outra somente nao resolvia meu problema, pois eu só conseguia centralizar uma delas. Tambem usei todas as posições como absolute porque esse é o automatico que a interface gráfica cria, e lendo os tutoriais por aí eu não consegui entender como usar a posição relative e a absolute, qual em cada caso.

Podes continuar me ajudando com mais essas dúvidas?

Muito obrigado pela atenção,

Guido

[JCMais 75]

Muito obrigado Ramael.

Então, todas esses "abusos" no código, como o jogo da velha, o style2, o z-index, saõ porque eu fiz o site usando a interface grafica, e pouco do css mesmo. E aí só "clicando" o dreamweaver já faz coisas como essas automaticamente.

O que não entendi é como eu faço para que a minha div container contenha as outras? Criar uma div dentro da outra somente nao resolvia meu problema, pois eu só conseguia centralizar uma delas. Tambem usei todas as posições como absolute porque esse é o automatico que a interface gráfica cria, e lendo os tutoriais por aí eu não consegui entender como usar a posição relative e a absolute, qual em cada caso.

Podes continuar me ajudando com mais essas dúvidas?

Muito obrigado pela atenção,

Guido

 

 

Aplicar estilo a todos os filhos de uma div:

 

div > * {
}

 

Centralizar usando css:

 

Declare o body com uma largura de 100%:

body {
width:100%;
}

 

depois crie uma div container, assim como o amigo mencionou, e defina uma largura para ela e aplique margin:0 auto:

#container {
margin:0 auto;
width:XXXpx;
}

 

Estude mais sobre seletores e o efeito em cascata, se você for construir os seus projetos utilizando a interface gráfica do Dreamweaver, você terá muitas decepões, começando por esta. B)

[Ramael 0]

...não tem jeito.... a melhor forma de explicar as coisas é mostrando....^^

Montei um pequeno exemplo de como pode ser feito, é só um exemplo, e pra fazer esse mesmo layout poderíamos usar uma infinidade de outras maneiras.

 

HTML

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="pt">
 <head>
<title>Site de teste</title>
<link rel="stylesheet" href="teste.css" type="text/css" media="screen" />
 </head>
 <body>
<div class="container">
	<div class="head">
		Aqui fica o banner e o menu superior do meu site.
	</div>
	<div class="menuEsq">
		Aqui fica o menu a esquerda do meu site.
	</div>
	<div class="menuDir">
		Aqui fica o menu a direita do meu site.
	</div>
	<div class="conteudo">
		Aqui fica todo o conteúdo do meu site.
	</div>
</div>
 </body>
</html>

 

CSS

 body {
font: 12px arial, verdana, helvetica, sans-serif;
background: #fff;
margin: 0;
font-weight: bold;
}

.container {
position: relative;
margin: 30px auto;
width: 700px;
height: 500px;
text-align: center;
border: 1px dotted black;
}

.head {
background: red;
height: 100px;
}

.menuEsq, .menuDir, .conteudo  {
position: absolute;
left: 0;
top: 100px;
width: 100px;
height: 400px;
background: green;	
}

.menuDir {
left: 600px;
background: blue;
}

.conteudo {
left: 100px;
width: 500px;
background: yellow;
} 

 

Fiz um DIV container, nele usei dimensões exatas e dentro dele construí o “site” todo com posicionamento absoluto. Mas isso é só um modelinho teste pra você entender o que quis dizer no meu outro post.

 

…o margin auto foi uma boa lembrança ^^

 

espero que ajude.

 

 

T+

Ramael

[fonor 0]

olá amigo, vi que o site já esta com a div centralizada, você utilizou uma técnica muito boa, permite que o site funcione em diversos dispositivos, porém não funciona no IE7, sugiro que você crie um CSS diferente para o IE7, e aplique a seguinte técnica:

div {
  width: 300px;
  left: 50%;
  margin-left: -150px;
}

Espero ter ajudado

[guidomoraes 0]

JCmais muito obrigado pela ajuda. Ramael, mais uma vez muito obrigado também. Era isso que estava precisando, um código limpo para eu começar a aprender do zero a partir do CSS e não da interface gráfica. Estou primeiro estudando seu exemplo, para depois tentar refazer meu site. Aí se pintar mais alugma dúvida eu pergunto, mas acho que com essa aula não terei mais dúvidas não.

Muito obrigado pessoal.

Guido

[Ramael 0]

Testei essa solução (margin: auto) nos browsers atuais (IE8, FF, Chrome, Opera) e funcionou muito bem, por isso indiquei. Mas realmente não pude testar com browsers mais antigos (Ie6 e Ie7), aí não tenho como comprovar sua funcionalidade.

 

...de repente, a solução de utilizar um pequeno javascript seja mais robusta e adequada.

 

A idéia é essa mesmo Guido: Pegar o auxílio aqui do fórum e utilizar como ponto de partida pro aprendizado. Se você se interessar pelo assunto, recomendo, além do iMasters, o site do Maujor, que é muito bom.

 

 

 

 

Bons estudos,

T+

Ramael

[Evandro Oliveira 331]

olá amigo, vi que o site já esta com a div centralizada, você utilizou uma técnica muito boa, permite que o site funcione em diversos dispositivos, porém não funciona no IE7 ...

 

A solução apresentada funciona perfeitamente até mesmo no IE6, desde que declarado um doctype válido.