Publicado em 11 de fev.

[Resolvido] não consigo centralizar meu site

Estou começando com css agora e só o topo do site fica centralizado , agora o corpo e o rodapé eu não consigo de nenhum jeito ¬¬

CSS

/ Inicio /

body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;}
#geral {margin:auto; width:1000px;}

/* background:url(imagens/bg.gif); /

/ Topo /

#logomarca span {display:none;}
#logomarca h1 {background:url(imagens/logomarca.jpg) no-repeat; width:151px; height:43px;}

/*
#lateral1 {background:url(imagens/topol.jpg) no-repeat; width:130px; height:100px; position:absolute;}
*/

#lateral1 {position:absolute; left:-35px; top:-460px;}
#lateral3 {position:absolute; left:744px; top:-460px;}

#lateral4 {background:url(imagens/lat2.jpg) repeat-y; position:absolute; width:15px; height:1020px; left:893px; top:196px; }
#lateral5 {background:url(imagens/lat1.jpg) repeat-y; position:absolute; width:15px; height:1020px; left:115px; top:196px;}

#topo {background:url(imagens/topom.jpg) repeat-x; height:100px; width:895px; position:absolute;}

#logomarca {position:absolute; width:151px; height:43px; left:200px; bottom:33px;}

/ Menu Principal /

#menup {position:absolute; width:480px; left:350px; bottom:28px;}
#menup ul {margin:0; padding:0;}
#menup li {float:left; list-style:none; margin:7px; padding-top:11px; padding-bottom:10px;}
#menup li a {text-transform:uppercase; color:#fff; font-size:12px; font-weight:bold; text-decoration:none; padding:5px;}
#menup li a:hover {background:url(imagens/fundo_menu.gif) repeat-x; color:#fff;}
#menup li a.current {background:url(imagens/fundo_menu.gif) repeat-x; color:#fff;}

/ --------------------------- /

#botaotopo {no-repeat; position:absolute; right:20px; top:4px;}
#botaotopo2 {no-repeat; position:absolute; right:133px; top:3.5px;}

#lateral2 {background:url(imagens/topor.jpg) no-repeat; width:130px; height:100px; position:absolute; right:-129px;}

#flash { no-repeat; position:relative; bottom:-100px;}

#corpo {position:absolute; left:300px; top:220px;}

/pag produtos/

#produtos {position:absolute; width:480px; left:450px; bottom:-50px; }
#produtos ul {margin:0; padding:0;}
#produtos li {float:left; list-style:none; margin:7px; padding-top:11px; padding-bottom:10px;}
#produtos li a {text-transform:uppercase; color:#fff; font-size:12px; font-weight:bold; text-decoration:none; padding:1px;}
#produtos li a:hover {background:url(imagens/fundo_menu2.gif) repeat-x; color:#fff;}
#produtos li a.current {background:url(imagens/fundo_menu2.gif) repeat-x; color:#fff;}

#produtos2 {position:absolute; width:480px; left:520px; bottom:-80px;}
#produtos2 ul {margin:0; padding:0;}
#produtos2 li {float:left; list-style:none; margin:7px; padding-top:11px; padding-bottom:10px;}
#produtos2 li a {text-transform:uppercase; color:#fff; font-size:12px; font-weight:bold; text-decoration:none; padding:1px;}
#produtos2 li a:hover {background:url(imagens/fundo_menu2.gif) repeat-x; color:#fff;}
#produtos2 li a.current {background:url(imagens/fundo_menu2.gif) repeat-x; color:#fff;}

#corpoprodutos1 {position:absolute; left:300px; top:-10px; font-size:11px;}
#corpoprodutos2 {position:absolute; left:300px; top:170px; font-size:11px;}
#corpoprodutos3 {position:absolute; left:300px; top:345px; font-size:11px;}
#corpoprodutos4 {position:absolute; left:300px; top:530px; font-size:11px;}
#corpoprodutos5 {position:absolute; left:300px; top:710px; font-size:11px;}

#corpo {position:absolute; margin:auto; left:300px; top:220px; }

/ rodape site /

#rodape {background:url(imagens/rodape.jpg) repeat-x; height:68px; width:770px; position:absolute; left:127px; bottom:-270px}
#rodape2 {background:url(imagens/rodape.jpg) repeat-x; height:68px; width:770px; position:absolute; left:127px; bottom:-620px}

#textorodape { font-family:"Comic Sans MS", cursive, cursive; color:#333333; font-size:12px; font-weight:600; position:absolute; left:150px; bottom:25px;}

#emilia {background:url(imagens/emilia.gif) no-repeat; width:60px; height:38px; position:absolute; right:190px; bottom:13px;}

#twitter {no-repeat; width:65px; height:46px; position:absolute; right:60px; bottom:8px; }

#youtube {no-repeat; width:92px; height:37px; position:absolute; right:10px; bottom:8px;}

/ fim rodape site /

/ fim site /

HTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="imagens/favicon.ico" type="image/x-icon" />
<title></title>

<link href="estilos.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="geral">

	<div id="topo">

 <div id="lateral1">
 </div>

 <div id="logomarca">
 <a href="index.htm" title="Página Principal"><img src="imagens/logomarca.jpg" border=0 /></a>
 </div>

 <div id="menup">

 <ul>
 <li><a href="empfilosofia.htm" title="">A Empresa</a></li>
 <li><a href="produtos.htm" title="Nossos Produtos">Produtos</a></li>
 <li><a href="clientes.htm" title="Nossos Clientes">Clientes</a></li>
 <li><a href="localizacao.htm" title="Localize a Nossa Loja">Localização</a></li>
 <li><a href="contato.htm" title="Entre em Contato Conosco">Contato</a></li>
 </ul>

 </div>

 <div id="botaotopo">
 <img src="imagens/botMapaSite.jpg" border=0 />
 </div>

 <div id="botaotopo2">
 <a id="botaotopo2" href="map.htm" title="Mapa do Site"><img src="imagens/bot2MapaSite.gif" border=0 /></a>
 </div>

 <div id="lateral2">
 </div>

 <div id="topodestaque1">
 <img src="imagens/topodestaque.jpg" border=0 />
 </div>

 <div id="topodestaquetexto">
 Linhas de Produtos
 </div>

 <div id="linhatexto">
 ___________________________________________________________________

 </div>

 <div id="produtos">

 <ul>
 <li><a href="prodMoveis.htm" title="Móveis">Móveis</a></li>
 <li><a href="prodIndustrial.htm" title="Industrial">Industrial</a></li>
 <li><a href="proLinhaInstitucional.htm" title="Linha Institucional">Linha Institucional</a></li>

 </ul>

 </div>

 <div id="produtos2">
 <ul>
 <li><a href="proLixeiras.htm" title="Lixeiras">Lixeiras</a></li>
 <li><a href="proOutros.htm" title="Outros">Outros</a></li>
 </ul>
 </div>

	</div>
 <div id="lateral4">
 </div>

 <div id="lateral5">
 </div>

 <div id="corpo">

 <a href="prodMoveis.htm" title="Móveis"><img src="imagens/moveis.jpg" border=0 width="250" height="130" /></a>
 <br />
 <br />
 <img src="imagens/barra.gif" border="0" width="700" />
 <br />
 <br />
 <a href="prodIndustrial.htm" title="Produtos Industriais"><img src="imagens/industrial.jpg" border=0 width="250" height="130" /></a>
 <br />
 <br />
 <img src="imagens/barra.gif" border="0" width="700" />
 <br />
 <br />
 <a href="proLixeiras.htm" title="Lixeiras"><img src="imagens/lixeiras.jpg" border=0 width="250" height="130" /></a>

 <br />
 <br />
 <img src="imagens/barra.gif" border="0" width="700" />

 <br />
 <br />
 <a href="proLinhainstitucional.htm" title="Linha Institucional"><img src="imagens/utilidades.jpg" border=0 width="250" height="130" /></a>
 <br />
 <br />
 <img src="imagens/barra.gif" border="0" width="700" />
 <br />
 <br />
 <a href="proOutros.htm" title="Outros"><img src="imagens/outros.jpg" border=0 width="250" height="130" /></a>
 <br />

 <img src="imagens/barra.gif" border="0" width="700" />

 <div id="corpoprodutos1">

 <p><font color="#0000CC" size="+1"><p>Móveis</p></font></p>

 <p>gdfgdfgdfgdg</b></p>

 </div>

 <div id="corpoprodutos2">

 <p><font color="#0000CC" size="+1"><p>Industrial</p></font></p>

 <p>dsdfsdf</p>

 </div>

 <div id="corpoprodutos3">

 <p><font color="#0000CC" size="+1"><p>Lixeiras</p></font></p>

 <p>ffsfsd</p>

 </div>

 <div id="corpoprodutos4">

 <p><font color="#0000CC" size="+1"><p>Linha Institucional</p></font></p>

 <p>dsadad</p>

 </div>

 <div id="corpoprodutos5">

 <p><font color="#0000CC" size="+1"><p>Outros</p></font></p>

 <p>Cone Sinalizador, Cesto Expositor e Suporte para Válvulas são</p>
 <p>os produtos que fazem parte desta linha.</p>

 </div>

 <br />
 <br />

 *Fotos Ilustrativas
 <br />
 <br />

 <img src="imagens/barra.gif" border="0" width="700" />

 <br />
 <br />
 <br />
 <br />

 </div>

 <div id="rodape2">

 <div id="textorodape">
 xcfgcgxvxcvxc
 </div>

 <div id="emilia">
 </div>

 <div id="twitter">
 <a id="twitter" href=""><img src="imagens/twitter.gif" border=0 ></img> </a>
 </div>

 <div id="youtube">
 <a id="youtube" href=""><img src="imagens/youtube.gif" border=0 ></img> </a>
 </div>

 </div>

</div>
</body>
</html>

Se alguma alma caridosa conseguir me dar uma luz , eu não quero que o site fique sem estar centralizado quando as resoluções estiverem diferentes

Discussão (17)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Diéssica· 11 de fev.

Tem bastante position aí... Tentei debugar no Firebug e o problema ou é no HTML ou é nos dois, já que o CSS parece estar certo.

Só que tá muito bagunçado. Pode postar a página online?

Felipe Quirino· 11 de fev.

tire os position:absolute; da sua div e coloque margin:0 auto;

semitico· 13 de fev.

é eu vi que usar position para diagramar o site não é a forma ideal , a outra propriedade que se usa para isso é o float ? só tem essas 2 então ?

Evandro Oliveira· 13 de fev.

>
é eu vi que usar position para diagramar o site não é a forma ideal , a outra propriedade que se usa para isso é o float ? só tem essas 2 então ?

position, float, clear, margin, padding, border, line-height, text-align, vertical-align, display...

Cada uma tem um propósito específico.

NetBoy16· 13 de fev.

float você usa pra alinhar as divs a esquerda ou direita e clear:both no rodape pra nao deixar nada ao lado do rodape, em geral um layout eh assim:

html(sem a estrutura basica<html>,<body>, etc...

 

<div id="container">
 <div id="topo">topo aki</div>
 <div id="conteudo">conteudoaki</div>
 <div id="rodape">rodape aki</div>
</div>

css

* {
padding:0
margin:0
}

body {
text-align:center / alinhar tudo no IE6 /
}

#container {
 text-align:left
 margin:auto
}

#topo{}
#conteudo{}

#rodape {
 clear:both
}

Lembrando que, so fiz a estilizacao necessaria pro exemplo, espero ter ajudado :)

Diéssica· 13 de fev.

* {
padding:0
margin:0
}

body {
text-align:center / alinhar tudo no IE6 /
}

#container {
 text-align:left
 margin:auto
}

#topo{}
#conteudo{}

#rodape {
 clear:both
}

Após determinar os valores, fecha as propriedades com ponto e vírgula (;). Não deixa seletores vazios e explica a utilização de um Reset CSS e essas gambiarras pra IE 6.

Caso contrário, só vai confundir mais quem tá começando :)

>
é eu vi que usar position para diagramar o site não é a forma ideal , a outra propriedade que se usa para isso é o float ? só tem essas 2 então ?

Usamos float na diagramação para que o elemento flutue para algum lado específico. É uma propriedade como todas as outras.

Um exemplo é um layout de duas colunas:

<div id="conteudo"></div>
<div id="sidebar"></div>

CSS:

#conteudo {
width:500px;
float:left;
}

#sidebar {
width:200px;
float:right;
}

A largura do meu site, no total, é 700 pixels. Determino 500 pixels para "conteudo" e 200 pixels para "sidebar".

Tenho a div do conteúdo que flutua na esquerda (float:left;) e a div do sidebar que flutua na direita (float:right;) ocupando toda essa largura.

Resultado:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i39.tinypic.com/xnx1ty.png&key=812634e7e77b6e771cfefa68b2da4a2bdcaac1198e20c005edc0ed2952639ede" alt="xnx1ty.png" />

Vê a tabela "Property Values" para entender quando usar a propriedade position:

:seta: http://www.w3schools.com/cssref/pr_class_position.asp

Vê a mesma tabela de valores da propriedade float:

:seta: http://www.w3schools.com/cssref/pr_class_float.asp

NetBoy16· 13 de fev.

>
Após determinar os valores, fecha as propriedades com ponto e vírgula (;). Não deixa seletores vazios e explica a utilização de um Reset CSS e essas gambiarras pra IE 6.

Ops, fiz na pressa e acabei esquecendo do essencial( ; ), foi mal, mas é isso ai que a diéssica disse :thumbsup:

soh me explica oque é css reset que nao sei oque é isso nao :S

Diéssica· 13 de fev.

>
soh me explica oque é css reset que nao sei oque é isso nao :S

* {
padding:0
margin:0
}

:seta: http://imasters.com.br/artigo/8505/css/conheca_e_use_o_css_reset/

semitico· 13 de fev.

obrigado pelas explicações galera , eu andei estudando mais sobre posicionamento e vi aonde eu errei , estou refazendo a estrutura do site por completo e centralizando pouco a pouco , topo , corpo , rodapé , o meu erro foi aprender o position absolute e sair colocando ele em tudo :thumbsup: !

NetBoy16· 13 de fev.

>
obrigado pelas explicações galera , eu andei estudando mais sobre posicionamento e vi aonde eu errei , estou refazendo a estrutura do site por completo e centralizando pouco a pouco , topo , corpo , rodapé , o meu erro foi aprender o position absolute e sair colocando ele em tudo :thumbsup: !

Dá nada, eu tb era assim, usava position pra tudo pois me ensinaram assim, mas o importante é aprender com o errado e fazer o certo ;D

G10· 23 de fev.

>
é eu vi que usar position para diagramar o site não é a forma ideal , a outra propriedade que se usa para isso é o float ? só tem essas 2 então ?

Cara muito pelo contrário , não há uma regra definida em relação a qual método utilizar

mas para utilizar Position:Absolute é nescessário definir uma div 'PAI' com algumas propriedas,e ai sim

estruturar todo o conteudo dentro dela com Position:absolute !

um exemplo de como utilizo seria assim

//CSS

<style>

#Center {
position: absolute;
width: 550px;
height: 1280px;
left: 50%;
top:0%;
margin-left: -300px;

}
</style>

//HTML

<div id="Center">
<div id="Teste" style="position:absolute; width:200px; height:115px; z-index:1; left: 172px; top: 14px;"><a href="#">INICIAL</a>
</div>
</div>

Desta forma todas as div's definidas com 'Position:absolute' que se encontram dentro da div PAI "CENTER"

serão exibidas de acordo como foram alinhadas !

é um processo um pouco mais manual pois voce terá que alinhar ao seu gosto layer por layer conforme for inserindo

as mesmas dentro da div PAI, a aceitação dos dos navegadores por esse método é 100% ,nunca tive problema

estruturando site dessa maneira.

voce pode também alinha uma div sobreposta a outra utilizando a propriedade "z-index"

sugiro que deixe elas sequenciais em cada div "z-index:1 , "z-index:2...

:thumbsup:

Diéssica· 23 de fev.

G10, apenas não é a forma ideal.

Pense semanticamente :)

NetBoy16· 23 de fev.

Nunca fiz layout por position absolute, antes sempre utilizava position relative, e tinha que alinhar div por div(top, left...), dava um trabalho e muitas vezes enquanto no GC, FF era de um jeito, no IE por incrivel que pareca, dava uma pequena(as vezes media/grande) diferenca de espaco, agora nao, eu faco da forma semanticamente correta, sem alterar o valor do position assim deixando o default(static),é susse e fica uma maravilha, quando o layout é só uma coluna(muito comum em sites institucionais) você nem precisa ficar alinhando, caso contrário, você só vai ter um pouco de trabalho pra mecher com floats e clear, e em casos de layout muito complexos você vai ter que mecher com margin(ai nesse caso é praticamente a mesma dificuldade que o alinhamento com top e left).

G10· 23 de fev.

>
G10, apenas não é a forma ideal.

Pense semanticamente :)

Sim concordo

semanticamente falando não é viavel !

mais como eu disse nao tem uma regra referente a isso

o que existe é uma semantica a ser seguida,ai vai do desenvolvedor

aplicar a semantica correta ou fazer do jeito que acha mais fácil !

NetBoy16· 23 de fev.

Isso eu concordo, é semanticamente correto mas nao obrigatorio, mas se você seguir os padroes web sua vida de desenvolvedor se tornará mais facil, acredite em mim, e eu acho bem mais facil deixando position default doque fazendo por absolute, faca um teste pra você ver.

Evandro Oliveira· 23 de fev.

Queridos, tenho minhas dúvidas se um tópico taggeado como [Resolvido] seria o melhor lugar mas, quero levantar uma questão:

Qual o conceito de semântica para vocês???

Pelo que eu entendo, nada tem a ver com CSS. Enfim, postem suas opiniões que eu me prontifico a rebatê-las.

Vinicius Ianni· 23 de fev.

Por favor, crie um novo topico com a sua duvida, será muito mais produtivo do que prosseguir com um assunto que foge do inicialmente proposto neste topico.