BlogAlex, sed Alex

Ícone

quem faz yoga não bloga

CSS: Layout centralizado. Como centralizar todo o conteúdo do layout com CSS

 Se você faz parte do que o ex-ministro Magri chamaria de imensa minoria e usa a internet além do MSN, YouTube, Orkut e chats, já deve ter notado que os layouts alinhados à esquerda saíram de moda. 

Notadamente sites adeptos da metodologia CSS-XHTML usam designs centralizados. Por quê? Simples: imagina que o sujeito (webdesigners, ao contrário do que eles próprios pensam, são sujeitos, não são adjetivos!) faz um site baseado num monitor com resolução de 800×600. Se alinhado à esquerda, o conteúdo parecerá uma coluna de jornal em forma de tira caso o visitante tenha um monitor supermaneiro de 21 polegadas e resolução de 8.000×6.000!

Exagerei, claro; nesse caso, até mesmo o layout centralizado teria a aparência de tira vertical. A razão de centralizar o layout é harmonizar a proporção, os espaços. 

Pois bem. Usando CSS é possível centralizar o layout sem apelar para <center> … </center>

Basta definir os atributos text-align e margin em três DIVs. Aproveitando HTML e BODY, é só criar uma nova DIV, geralzona, e pronto. Essa DIV geral vai se chamar container – nome bem popular, aliás. As duas primeiras DIVs vão usar text-align: center e margin: 0 auto. A terceira, margin: 0 e text-align: left (do contrário todos os elementos ficarão centralizados; aí só falta setar o fundo cinza e a fonte como Times New Roman para voltarmos à época da web 0.001!). 

Assim, nosso CSS será parecido com isso:

 

html {
margin: 0 auto;
text-align: center;
}

body {
text-align: center;
background: url(i/centralbackao.jpg) repeat-x;
margin: 0 auto;
}

#container {
text-align: left;
background: url(i/centralback.png) repeat-y;
width: 880px;
height: 600px;
margin: auto;
}

#h2texto {
font-family: Georgia, Garamond, "Lucida Sans", Verdana;
font-size: 1.9em;
color: #fcb;
}

E o nosso HTML:

<div id=”container”>

                           <div id=”h2texto”>

                            Ahá!      Aqui vai o seu maravilhoso texto:

                           …..

                           </div>

</div>

 
Pronto! Se você seguiu tudo certinho, seu navegador exibirá uma tela bem parecida com a figura abaixo.

 

preview do layout

preview do layout

 

Ficou bem diferente? Calma. Respira. E deixa o livro de HTML quieto lá na estante. Aproveitando o ensejo, setei dois fundos para o nosso exemplo. Para o fundo de BODY, criei um arquivo de 1200×5 pixels (no Fireworks mesmo) e abusei do gradiente; salvei como .jpg e, no CSS, repeti horizontalmente (repeat-x). Já em #container, embora tenha usado uma cor só, usei gradiente na transparência. Salvei como .png, para aproveitar a transparência, e repeti o arquivo de fundo verticalmente (repeat-y).

É bom lembrar que nem a transparência e nem o fundo em .png funciona no digníssimo IE6. Então aproveite e diga adeus a esse vovozinho internético (tem mais de sete anos!). 

Também setei o conteúdo de #h2texto em uma DIV para controlar melhor margens etc. 

 

PS: repare que eu não mencionei o rodapé. E talvez você tenha alguma dificuldade em diagramá-lo neste layout centralizado. Voltaremos ao assunto!

Arquivado em:informática, web 2.0, webdesign, , , ,

One Response

  1. Junior disse:

    Legal. Mas o que eu procurava mesmo era centralizar todo o texto dentro de uma div, tanto horizontal quanto verticalmente. Isto porque eu estava examinando o código css de um template e notei que o rodapé na verdade não continha o texto centralizado exatamente, e sim usaram um truque para centralizar o texto. Para entender de vez isto, bastaria aumentar a altura da div do rodapé e revelamos que o texto está mais no topo. Desde então, minha curiosidade é descobrir se este é o jeito certo de fazer ou se há uma forma apropriada que garante a centralização do texto dentro da div.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: