[Resolvido] Centralizar Página

jrotta · Janeiro 8, 2010

Bom, meu site estava centralizado em uma table de 760px

Mas devido a alguns problemas, removi a table, e não consigo centralizar ele pelo css.

(o site deve ter o comprimento de 760px, ficando no meio da página. E o texto do site deve ficar na esquerda.)

já tentei isso, obtive sucesso no firefox, mas n funciona no ie.

#wrapper
{
	width: 760px;
	content-align: center;
	border-left: 3px solid #CEA663;
	border-right: 3px solid #CEA663;
	padding: 0px 0px 0px 0px;
	height: 100%;
	background: url("../images/pin.jpg");
}

Paulo de Tarso F. M. · Janeiro 8, 2010

content-align? :mellow: Essa propriedade não existe... Ou estou desatualizado?

Bom, para centralizar, você deve trabalhar com margin no #wrapper. Você tem duas opções:

1) Aplicar um margin:0 auto

2) Aplicar um margin-left:auto e margin-right:auto.

Esse segundo exemplo seria caso o #wrapper tenha herdado o margin de algum outro elemento e então você alteraria apenas as margens laterais.

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

ORisonho · Janeiro 8, 2010

Veja como esta a hierarquiva de sua DIV(provavelmente o que você est usando).

Tipo o correto é você ter algo mais ou menos assim:

<div id="pai">
  <div id="filho"></div>
</div>

Nessa pequena demosntração você tem aplicar regras na div "pai" para que a div "filho" possa herdar as informaçõs do pai e assim trabalhar com elas, num adianta você colocar (por exemplo) width="700" na div "pai" sendo que a div "filho" tem width="1000", pois ao contrario das regras de tabelas, trabalhando com div você sempre terá respeitar essas condições.

Rezumindo, aplique as configurações que você já conhece do css, mas respeitando essa regra, verifique em seu cógio se você esta fazendo isso, se não estiver, infelizmente não conseguirá ter resultados significativos em seu projeto.

jrotta · Janeiro 8, 2010

Olha, eu sou péssimo em css, meu negócio é php ^^

mas tenho que aprender né =S

Eu fiz assim:

<div id="prewrapper">
<div id="wrapper">
conteudo do site
</div>
</div>

#prewrapper
{
	width: 100%;
	margin:0 auto
	height: 100%
}

#wrapper
{
	width: 760px;
	margin:0 auto
	border-left: 3px solid #CEA663;
	border-right: 3px solid #CEA663;
	height: 100%;
	background: url("../images/pin.jpg");
}

Sem funcionar =s

Paulo de Tarso F. M. · Janeiro 8, 2010

1) Pra que essa div #prewrapper? :mellow:

2) Não esqueça de colocar ; após o margin:0 auto, ficando assim: margin:0 auto;

3) Você está utilizando um Doctype?

4) Nos mostre o que já fez até aqui, preferencialmente nos disponibilize um link para que possamos acessar a página e analisar o todo

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Desnickadu · Janeiro 8, 2010

se você coloca width: 100% na #prewrapper como ela vai ficar centralizada ? ela ocupa o espaço todo, não tem como ficar centralizada.

o que você pode fazer é :

1- eliminar a #prewrapper e passar esse margin: 0 auto; pro #wrapper

o que faria ele ficar centralizado.

ou

2- eliminar a #wrapper e colocar a width: 760px; [eliminando o width: 100%;] na #prewrapper

o que faria com que ele ficarsse centralizado

não é necessário ter 2 containers ;)

William Bruno · Janeiro 8, 2010

Esta usando algum DOCTYPE ? qual?

já tentei isso, obtive sucesso no firefox, mas n funciona no ie.

provavelmente eh por causa do 'modo preguicoso' do IE.

Ele nao renderiza conforme as recomendacoes, se você nao colocar DOCTYPE.

provavelmente seu documento esta assim:

<html>
<head>

certo?

troque por:

<!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-br" lang="pt-br"> 
<head>

:lol:

Evandro Oliveira · Janeiro 8, 2010

troque as bordas "3px solid etc" por um arquivo de 766px de largura, 1px de altura contendo a sua borda...

aqui na dica vamos chamá-lo de bordas.jpg

html {
  background: url('bordas.jpg') center top repeat-y;
}

body {
  background: url("../images/pin.jpg");
  left: 50%;
  margin-left: -380px;
  min-height: 100%;
  position: absolute;
  width: 760px;
}

mais XBrowser que isso eu não consigo.

provavelmente a dica acima causará rolagens verticais em quase tds os browsers... caso ocorra, troque: min-height: 100%; por:

  bottom: 0;
  overflow: visible;
  top: 0;

---

alguns detalhes importantes a serem mencionados:

- você irá sumir com seus wrapper e prewrapper

o site ficaria assim:

<!DOCTYPE html PUBLIC "[VERSÃO DO (X)HTML AQUI]" "[DTD DO ARQUIVO AQUI]">
<html>
  <head>
    [CABEÇALHO]
  </head>
  <body>
    conteudo
  </body>
</html>

- O conteúdo da página, inicialmente herdará a largura padrão de 760px. Se por um acaso, qualquer elemento dentro de Body exceder a largura de 760px, você perderá borda direita do site.

Paulo de Tarso F. M. · Janeiro 8, 2010

O que é isso? Background no html? Position absolute no body?

Meu caro Evandro Oliveira, definir um posicionamento absoluto seria uma solução para centralização tanto na vertical quanto na horizontal. Como o jrotta não especificou se queria vertical também, nós acreditamos que seja horizontal apenas, que é o "padrão". Mas aplicar position absolute no body? No máximo seria na div#wrapper, não?

http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

Evandro Oliveira · Janeiro 8, 2010

O que é isso? Background no html? Position absolute no body?

Meu caro Evandro Oliveira, definir um posicionamento absoluto seria uma solução para centralização tanto na vertical quanto na horizontal. Como o jrotta não especificou se queria vertical também, nós acreditamos que seja horizontal apenas, que é o "padrão". Mas aplicar position absolute no body? No máximo seria na div#wrapper, não?

http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

bg no HTML e absolute no BODY

não é mencionada nenhuma proibição nas normas da W3C... e funciona em TODOS os browsers, inclusive IE6

como nada é perfeito... o único "bug" que ocorre no IE é quanto ao tratamento de posicionamento relativo à DTD utilizada

sem DTD aparece de um jeito, xhtml transitional e frameset aparece de outro e html4, xhtml1strict e xhtml1.1 aparecem de outro. por isso a menção quanto à rolagem vertical...

sim... existe uma declaração de height no post original dele:

Bom, meu site estava centralizado em uma table de 760px

Mas devido a alguns problemas, removi a table, e não consigo centralizar ele pelo css.

(o site deve ter o comprimento de 760px, ficando no meio da página. E o texto do site deve ficar na esquerda.)

já tentei isso, obtive sucesso no firefox, mas n funciona no ie.

#wrapper

{

width: 760px;

content-align: center;

border-left: 3px solid #CEA663;

border-right: 3px solid #CEA663;

padding: 0px 0px 0px 0px;

height: 100%;

background: url("../images/pin.jpg");

}

sem contar que o IE dá bug com margin: 0 auto

por fim.. mas não menos importante:

Paulo de Tarso F. M. · Janeiro 8, 2010

Esses erros não seriam exibidos porque na verdade não existem erros. O que o validador avalia é se as propriedades estão corretas, e todas elas estão. Ele não avalia se o background foi aplicado ao body ou ao html ou a qualquer outro elemento, pois eu poderia fazer isso aqui:

minhatag { color:#fc0; }

Ele irá mostrar que é válido! Oras, não há erros com o CSS...

Entenda: não é porque funciona que está correto. Podemos pensar assim: que bom que funciona, pois poderíamos ter uma série de problemas, mas pense no seguinte, que sentido faz aplicar um background na tag html? Oras, essa tag é a que envolve todo o documento, isso significa que você está "aplicando uma imagem de fundo também no head"... Esquisito não? Se a parte do documento que é afetada pelo CSS é o body e o que está dentro dele, se concentre então nele...

E outra: ele declarou uma altura de 100%, isso mostra que ele não quer que esteja centralizado verticalmente, mas sim que ocupe toda a extensão vertical... São coisas diferentes, e o que ele precisa é centralizar, logo, focamos na questão horizontal.

Ah! E meu caro jrotta, para que tudo funcione corretamente, é necessário definir um Doctype, como nosso amigo William Bruno reforçou. Então, faça isso antes de tentar solucionar...

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Evandro Oliveira · Janeiro 8, 2010

concordo 100% com você. mas vamos debater um pouco...

a validação também mostra se tal propriedade PODE ser aplicada a um elemento X.. uma vez que não utilizei de classes ou Id's, o validador SABE qual elemento está recebendo a devida propriedade.

a questão de aplicar as propriedades à html/body é mais pra geração de uma marcação mais limpa..

ao invés de

<div class="div_exclusivo_para_aplicar_as_bordas_laterais">
  <div class="div_exclusivo_para_aplicar_o_plano_de_fundo">
    conteudo
  </div>
</div>

podemos entrar diretamente com o que interessa depois da tag <body>

entenda que o bg no html pode ser considerado como um hack para podermos utilizar múltiplos backgrounds - até o contrato de suporte do IE6 (2014) e a oficialização da CSS3 (indeterminado).

nada impede de transportar as regras de

html{*}
body{*}

para

.div1{*}
.div2{*}

sou teimoso e não abro mão do posicionamento absoluto mesmo que não desejemos centralizar verticalmente...

só quem ja ralou muito com margin: 0 auto; no IE sabe do que eu to falando.

E aqui, temos uma vantagem... nós SABEMOS a largura ABSOLUTA do elemento.. o que facilita muito na centralização... tanto XBrowser como XResolution

EDIT:

E outra: ele declarou uma altura de 100%, isso mostra que ele não quer que esteja centralizado verticalmente, mas sim que ocupe toda a extensão vertical... São coisas diferentes, e o que ele precisa é centralizar, logo, focamos na questão horizontal.

isso aqui passou meio despercebido..

quando declaramos um posicionamento absoluto, o elemento perde sua altura padrão (no caso do Body, 100%).

não sei se você percebeu mas há um background url(../images/pin.jpg) que deve ser repetido até o fim da página.

A menos que este background seja aplicado em body (aí precisaríamos definir um WIDTH para body), o elemento que o carregar precisará receber a declaração de altura... pelo menos em min-height como 100%

ok, vamos supor que você me convenceu a não utilizar mais background no HTML e absolute no BODY pra deixar essa parte da discussão de lado...

vamos ao alinhamento horizontal e preenchimento vertical...

acredito que o resultado que ele espera seja algo do tipo:

e temos alguns pontos a serem abordados..

a borda, se for feita com propriedade "border" causará distinção entre IE(X) e Navegadores de verdade...

o IE renderiza a borda DENTRO do elemento, enquanto os navegadores a renderizam FORA...

em se tratando de 3px de cada lado... dentro do IE ele terá 754px para trabalhar, e não 760 como previsto, por isso a recomendação em fazer a borda com imagem... dependendo do editor e qualidade da imagem (que pode ficar na mínima) o arquivo não chega a ter 115BYTES... é quase o mesmo tanto de caracteres que são utilizados pra criar as bordas.

essas bordas serão o background do elemento de 766px que estará alinhado horizontalmente [que no meu caso era o HTML]

depois vem o background do preenchimento da página, propriamente dita... que ao se extender por um HEIGHT: 100% traz consigo as bordas;

sem aplicar o bg ao HTML, a menor marcação possível a ser gerada é a seguinte:

<body>
  <div class='wrapper'>
    conteudo
  </div>
</body>

analisemos a possibilidade de margin: 0 auto e posicionamento absoluto;

a margem.. deverá ser aplicada no .wrapper... que por sua vez é automática, e causa uma expansão flexível tanto para a direita quanto para a esquerda caso algum elemento exceda o limite de 760px;

em navegadores, isso seria facilmente resolvido setando max-width: 760px;

nem preciso te recordar que DIV's não possuem height definida... o que a faria crescer conforme o conteúdo que, se por um acaso, em monitores fullHD de 1280p não chegasse até o final... teríamos um desconfortável espaço em branco sobrando ao rodapé da página.

faz-se obrigatório o uso de min-height: 100% em .wrapper por questões estéticas.. e não de alinhamento vertical.

até agora temos:

body {
  background: url('borda.jpg') repeat-y center top;
  margin: 0;
}

.wrapper {
  background: url(../images/pin.jpg);
  margin: 0 auto;
  max-width: 760px;
  min-height: 100%;
  width: 760px;
}

volto a insistir no ponto em que algum elemento ultrapassa a largura... perderíamos as duas bordas. Claro que isso é responsabilidade do diagramador cuidar, mas...

é possível amenizar o problema fazendo com que apenas a borda direita se perca... e dependendo de alguns casos (display do elemento) nem mesmo a direita.

isso é feito com posicionamento absoluto \o/

William Bruno · Janeiro 8, 2010

o IE renderiza a borda DENTRO do elemento, enquanto os navegadores a renderizam FORA...

De qual versao do IE estamos falando?

Os browsers mais recentes já não apresentam problemas com as boxes e apresentam-nas de forma correcta, ou seja Opera 6+, Firefox, Internet Explorer 5 para Mac, o Internet Explorer 6 (se o Document Type Definition estiver especificado de forma correcta) e o Internet Explorer 7+.

O problema existe realmente devido ao Internet Explorer 5 que em vez de considerar apenas a largura do conteúdo, utiliza a propriedade largura como a soma da largura do conteúdo, padding e border. Ou seja no exemplo anterior o browser iria considerar que a largura total da box seria de 240 pixels, pois identificava os atributos padding e border como fazendo parte dos 200 pixels, ou seja retira espaço ao conteúdo em vez de somar.

Fonte: http://www.brunocarlos.com/2008/04/22/o-modelo-de-caixas-box-model-em-css/

PS:

<div class='wrapper'>

prefira usar aspas duplas para delimitar atributos HTML. Se ja trabalhou com formularios com alguma linguagem server-side, deve ter notado o motivo disso.

Evandro Oliveira · Janeiro 8, 2010

não quero poluir mais o tópico por isso vou parando por aqui.

peço ao jrotta que teste a minha primeira solução postada e nos diga se resolve o problema dele...

peço também que o restante da comunidade se pronuncie a respeito do alinhamento com margem automática ou posicionamento absoluto.

apenas pra que ninguém diga que eu não tentei.. vai aqui um source utilizando os métodos adotados como 'padrão' neste tópico e seu resultado no amado causador de bugs da internet

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>teste</title>
<style type="text/css" media="all">
* {
margin: 0
}

.wrapper {
background: blue;
border-left: 3px solid black;
border-right: 3px solid black;
color: white;
height: 100%;
margin: 0 auto;
width: 760px;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum ipsum id urna euismod in rutrum nibh tincidunt. Sed ac tortor facilisis turpis dapibus eleifend. Nullam pulvinar mollis tellus non iaculis. Quisque rutrum arcu ac mauris consectetur at commodo felis convallis. Vestibulum viverra elementum commodo. Sed ac volutpat massa. Pellentesque convallis odio nec sapien ornare iaculis. Aliquam rhoncus placerat blandit. Vestibulum mattis convallis ipsum, in fermentum sapien gravida eget. Cras sit amet augue arcu, non congue justo. Phasellus consequat, massa ut porta tincidunt, nulla odio tincidunt lorem, ut condimentum neque urna a felis. Ut dapibus mattis molestie. Curabitur fringilla eros eget ante mattis sagittis. Nam ipsum turpis, dapibus sed semper at, tincidunt vitae odio. Aliquam tristique ultricies nunc vel blandit. Nam sodales rutrum condimentum. Maecenas in erat ut nunc ullamcorper consectetur. In erat nunc, luctus at ornare id, tempor sit amet lacus. Sed leo urna, consectetur euismod mollis sed, hendrerit sit amet mauris. Sed aliquet, risus ut porttitor pellentesque, eros metus pharetra diam, vitae rhoncus purus nisi vel magna.</p>
<p>Suspendisse convallis, nibh a laoreet vulputate, justo sapien adipiscing dolor, nec imperdiet tellus ante vel purus. Aenean sed est velit. Fusce eget rutrum felis. Quisque luctus lobortis urna, sed luctus lacus porttitor eu. Vivamus commodo, lacus et venenatis blandit, ipsum magna varius metus, et dapibus metus nibh in erat. Maecenas venenatis lectus non massa ultricies rhoncus. Sed tincidunt sollicitudin nibh non commodo. Aliquam dolor risus, ultricies sit amet aliquam sed, commodo quis lectus. Maecenas pharetra tristique elit ut luctus. Quisque iaculis convallis sodales. Ut tristique dictum mauris, euismod varius odio tempor dapibus. Aliquam lobortis ipsum in velit interdum id varius magna pulvinar. Nulla mattis pretium accumsan. Phasellus in ligula ut metus placerat convallis. Phasellus mollis pellentesque turpis, nec fringilla elit accumsan vitae. In augue turpis, adipiscing a adipiscing vel, adipiscing at nisl. Phasellus mollis consequat sagittis. Quisque vitae lectus sed velit interdum lobortis. Nam vehicula mollis faucibus.</p>
<p>Mauris scelerisque augue ut est interdum sit amet hendrerit nibh rhoncus. Pellentesque aliquet tortor at enim ullamcorper ac tincidunt nunc ornare. In hac habitasse platea dictumst. Integer nisi lectus, accumsan vitae lobortis vitae, tincidunt vehicula quam. Nullam ac massa vel ante vulputate rhoncus id nec dolor. Pellentesque quis purus et eros eleifend faucibus. Nullam vitae rutrum metus. Fusce ante lorem, interdum vitae interdum id, tempor et augue. Aenean diam purus, volutpat quis vehicula nec, condimentum eu erat. Quisque rhoncus leo orci, et porttitor enim. In sapien lectus, lobortis vel hendrerit hendrerit, blandit at justo. Sed tincidunt neque tortor. Fusce risus augue, euismod id eleifend sed, interdum a turpis. Aenean interdum tincidunt felis at consequat. In hac habitasse platea dictumst. Pellentesque at ante sapien. Mauris diam tortor, cursus ut dapibus a, aliquam at ante. Quisque iaculis tortor eu elit malesuada scelerisque id sit amet risus.</p>
<p>Sed eget quam neque. Maecenas in erat quis dui vulputate eleifend. Morbi tempor mi at quam ultrices bibendum. In tellus arcu, cursus sit amet venenatis ac, sollicitudin ut enim. Donec sed nunc erat, id fringilla mauris. Aliquam vitae lacus interdum nibh molestie pellentesque. Quisque hendrerit pharetra leo, id tempor mauris lobortis non. Nam eu molestie est. In hac habitasse platea dictumst. Quisque interdum, urna ut ornare sodales, ipsum sem faucibus urna, tristique mattis dolor odio vel tortor. Sed nisi odio, gravida vel pulvinar sit amet, venenatis non lacus. Nam mollis eros a quam ultricies hendrerit. Nulla et facilisis lectus. Aenean faucibus iaculis libero nec condimentum. Phasellus egestas blandit metus, ac malesuada ipsum imperdiet porttitor.</p>
<p>Pellentesque lacus quam, rutrum vel auctor a, ornare quis est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus semper hendrerit enim et mollis. Nullam augue turpis, commodo quis tincidunt tempor, posuere sed turpis. Suspendisse ut interdum lectus. Mauris sit amet mi non massa pretium cursus at at orci. Ut a nisi dolor. Fusce luctus nisl ac massa condimentum molestie. Cras ac odio vitae risus pulvinar fermentum. Duis a egestas ligula. Nulla fermentum, tellus ac tempor vestibulum, nunc sapien dapibus metus, eu viverra lacus tellus quis dolor. Duis dolor sapien, pulvinar ornare pharetra eu, mollis nec nibh. Aenean mi ipsum, commodo ut volutpat condimentum, accumsan vitae orci. Sed at nisi et felis pellentesque mattis eu at mauris. Morbi ac ornare elit.</p>
</div>
</body>
</html>

Bruno, a aspa simples foi "ganho de tempo". Acredito que toda a marcação em HTML neste tópico seja apenas para fins didáticos... o que interessa mesmo é o CSS

William Bruno · Janeiro 8, 2010

A questao, eh:

se o criador do topico estiver se preocupando com o IE6

basta ate no seu codigo de exemplo, trocar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

por:

<!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-br" lang="pt-br"> 
<head>

Que ele vai funcionar melhor, deixando de renderizar no chamado: quirks mode pra tentar chegar mais perto dos padroes.

A questao, eh que se for 'so isso', todo esse malabarismo com position absolute e tal que você fez para resolver, pode ser substituido, por apenas: 'declarar um DOCTYPE mais rigido'.

A ideia do forum eh debater ideias, movimentar a comunidade, expondo solucoes. Te convido a fazer o teste que você sugeriu com esse DTD que aqui colei ^_^

Agora, eh so aguardar o interessado na questao retornar.

Evandro Oliveira · Janeiro 8, 2010

Nice one(y)!

aprendi mais uma hehehe...

apesar de ser contra declarar um DTD xhtml e um MIMEType text/html... são coisas q o IE nos obriga a fazer

e não há nada de mal em aplicar propriedades a nível HTML http://forum.imasters.com.br/public/style_emoticons/default/natal_dry.gif

bom.. vou ficando por aqui.. a compilação total do fórum que soluciona o problema tá dentro da tag <style> do exemplinho lá junto com um DTD de xhtml transicional 1.0

ele só não vai poder esquecer de fechar as tags curtas ;)

posso aproveitar o tpc pra tirar uma dúvida? alguém mais já teve problemas com o Chrome apresentar erro de entidade com ?????

jrotta · Janeiro 8, 2010

olha só:

o problema não é no doctype.

Evandro Oliveira, copiei esse exemplo que você postou no spoiler. Ele faz exatamente oque eu quero no firefox, mas no maldito ie continua descentralizado.

eis o meu site centralizando com uma table: link

as soluções para centralizar com div estão fracassando =S

parece que o margin:0 auto; n funciona no ie.

alguem sabe de um metodo eficass em ambos navegadores?

William Bruno · Janeiro 8, 2010

Faca isso:

Ele nao renderiza conforme as recomendacoes, se você nao colocar DOCTYPE.

provavelmente seu documento esta assim:
<html>
<head>
certo?

troque por:
<!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-br" lang="pt-br"> 
<head>
:lol:

E depois arrume os erros de HTML:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.oconfronto.kinghost.net%2F

Mas por 'desencargo' de conciencia, (falo por experiencia, pois ja codei muitos sites com margin: 0 auto), coloca o DOCTYPE Strict como indiquei, e deixe o margin: 0 auto; la..

se ainda nao funcionar, nao remova, mas retorne aqui, depois de ter validado o documento.

E ai vamos analisar melhor oque pode estar acontecendo.

posso aproveitar o tpc pra tirar uma dúvida? alguém mais já teve problemas com o Chrome apresentar erro de entidade com ?????

melhor criar um topico especifico para a sua duvida.

Eu nunca tive esse problema nao.

Paulo de Tarso F. M. · Janeiro 8, 2010

Poste um exemplo com um Doctype Strict conforme sugeriu o William, só para compararmos...

Adicionado:

E outra, também por experiência, seu layout não deveria estar lhe trazendo tantos transtornos assim, sua estrutura é extremamente simples! http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

jrotta · Janeiro 8, 2010

=o to me sentindo perdido.

olha só, eu adicionei isso no lugar do <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" xml:lang="pt-br" lang="pt-br">

e agora meu site está:

<!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-br" lang="pt-br"> 
<head>
</head/>
<body>
<div id="wrapper">
conteudo
</div>
</body>
</html>

Não sei oque colocar no css do wrapper, todo mundo deu uma dica differente e estou confuso.

tudo que eu quero é uma página com width: 760px; / height: 100%; / Cor de fundo 000000 (depois eu edito) / border-left: 3px solid #CEA663; / border-right: 3px solid #CEA663; / e que esteja centralizada no firefox e no ie.

só estou obtendo isso:

Imagem Postada

Arquivado

[Resolvido] Centralizar Página

Recommended Posts

jrotta 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo de Tarso F. M. 24

Compartilhar este post

Link para o post

Compartilhar em outros sites

ORisonho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

jrotta 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo de Tarso F. M. 24

Compartilhar este post

Link para o post

Compartilhar em outros sites

Desnickadu 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo de Tarso F. M. 24

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo de Tarso F. M. 24

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

jrotta 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo de Tarso F. M. 24

Compartilhar este post

Link para o post

Compartilhar em outros sites

jrotta 0