alguém consegue centralizar esse site?

vini_loock · Dezembro 20, 2009

Bom dia pessoal eu tenho que finalizar um projeto, só falta centralizar.

alguém tem a solução, não precisa ser css, porque eu acho que já tentei tudo no css.

<html>
<head>
<title></title>
<style type="text/css">
body{
background: #666666;
}

#global{
background: #ffffff;
width: 900px;
position: absolute;
left: 50%
margin: 0 0 0 -500px;
text-align: left;
}

#topo{
background: #00ccff;
width: 890px;
height: 130px;
float: left;
margin: 5 0 0 5;
}

#menu_topo{
background-color: #00ccff;
width: 890px;
height: 30px;
float: left;
margin: 5 0 0 5;
}

#navbar{
background-color: #00ccff;
width: 130px;
height: 700px;
float: left;
margin: 5 0 0 5;
}

#conteudo{
background-color: #00ccff;
width: 620px;
height: 700px;
float: left;
margin: 5 0 0 5;
}

#rodape{
background-color: #00ccff;
width: 890px;
height: 50px;
float: left;
margin: 5 5 5 5;
}

</style>
</head>
<body>

<div id="global">
    <div id="topo"></div>
    <div id="menu_topo"></div>
    <div id="navbar"></div>
    <div id="conteudo"></div>
    <div id="navbar"></div>
    <div id="rodape"></div>
</div>

</body>
</html>

Thelon · Dezembro 21, 2009

criei uma div pegando tudo e inseri um css dando 100% de altura e a largura necessária

depois usei o margin: 0 auto; para centralizar =)

pronto:

<html>
<head>
<title></title>
<style type="text/css">
body{
background: #666666;
}

#all{
    width: 900px;
    height: 100%;
    margin: 0 auto;
}

#global{
background: #ffffff;
width: 900px;
position: absolute;
left: 50%
margin: 0 0 0 -500px;
text-align: left;
}

#topo{
background: #00ccff;
width: 890px;
height: 130px;
float: left;
margin: 5 0 0 5;
}

#menu_topo{
background-color: #00ccff;
width: 890px;
height: 30px;
float: left;
margin: 5 0 0 5;
}

#navbar{
background-color: #00ccff;
width: 130px;
height: 700px;
float: left;
margin: 5 0 0 5;
}

#conteudo{
background-color: #00ccff;
width: 620px;
height: 700px;
float: left;
margin: 5 0 0 5;
}

#rodape{
background-color: #00ccff;
width: 890px;
height: 50px;
float: left;
margin: 5 5 5 5;
}

</style>
</head>
<body>
<div id="all">
<div id="global">
    <div id="topo"></div>
    <div id="menu_topo"></div>
    <div id="navbar"></div>
    <div id="conteudo"></div>
    <div id="navbar"></div>
    <div id="rodape"></div>
</div>
</div>
</body>
</html>

fercosmig · Dezembro 21, 2009

testei aqui no no FF e funcionou de boa.. testa ae

<script language="javascript" type="text/javascript">
<!--
window.onload = function(){
    div = 900;
    tamanho = window.outerWidth;
    sobra = tamanho - div;
    margin = sobra/2;
    document.getElementById('global').style.left = margin;
}
-->
</script>

----- edited -----

putz... de acordo o w3schools só funciona no FF

http://www.w3schools.com/jsref/obj_window.asp

vini_loock · Dezembro 21, 2009

Thelon.

Eu já tinha feito assim, nem precisaria criar essa nova div, seria apenas eu trocar o:

position: absolute;
left: 50%
margin: 0 0 0 -500px;

por:

height: 900px;
margin: 0auto;

Mas o problema é que eu queria centralizar sem definir uma altura padão, porque vai ter várias páginas que vão abrir na div conteudo, e tem algumas páginas que tem pouco conteudo, dai ficaria estranho eu deixar uma página com 2000px de altura com um texto de 20 linhas.

E... fercosmig.

Não funcionou no ie, então não resolve muito, porque acho eu que a maioria das pessoas usam o ie, por ele já vir instalado no windows.

Se alguém tiver a slução posta ai.

Vlw

Matheus Matos · Dezembro 21, 2009

Vini_loock, é como o Thelon disse, crie uma div geral e englobe tudo, com position absolute coloque 50% de distância da esquerda, e margin-left sendo a metade do width da div.

Assim:

position:absolute;
left:50%;
width:960px;
margin-left:-480px;

Asim funciona de certeza.

Vlw

Matheus Matos

vini_loock · Dezembro 21, 2009

Hm sim agora que eu vi.

É que o layout original ta em 1000 de widht, eu só deixei esse em 900 para ficar mais facil de visualizar em 1024

Vou testar em casa qualquer coisa eu posto asi, mas acho que vai dar certo.

Vlw

Entrar

alguém consegue centralizar esse site?

Pergunta

vini_loock

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

Thelon

Link para o comentário

Compartilhar em outros sites

fercosmig

Link para o comentário

Compartilhar em outros sites

vini_loock

Link para o comentário

Compartilhar em outros sites

Matheus Matos

Link para o comentário

Compartilhar em outros sites

vini_loock

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades