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!

Anúncios

Filed under: informática, web 2.0, webdesign, , , ,

setembro 2019
S T Q Q S S D
« jul    
 1
2345678
9101112131415
16171819202122
23242526272829
30