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, , , ,

Problemas com foto no MSN para Mac? Que tal usar o aMSN?

Há algum tempo, escrevi um post sobre como colocar fotos próprias (sem ser aquelas predefinidas que vêm com o programa) para exibição no MSN, o nosso comunicador instantâneo mais popular da atualidade. 

Quem leu o breve post deve ter percebido que, embora a operação pareça simples para alguns, nem todos conseguem. A versão para Mac do Messenger da Microsoft é bem simples e serve para pouco mais que simples conversas – esqueça conferências em vídeo e áudio!

Embora não muito superior, ao menos o aMSN, outrora um cliente bem tosco que só rodada em Linux, em sua versão 0.97.2 para Mac (clique aqui e baixe; o programa tem 10.5MB) é bem mais simples e funcional para a tarefa de alterar a imagem de exibição. Vejamos:

Abra uma janela de conversa e clique na sua foto de exibição. Clique agora na pequena janela “Mudar imagem de exibição…” que apareceu sobreposta à foto. 

Agora clique em “Pesquisar…”  (ou em “Foto da webcam “. Tire a foto, salve etc.). Escolha a foto que quer exibir, clique no botão “Open”. 

É bem possível que a imagem escolhida não tenha o tamanho padrão (96×96 pixels), então vai aparecer uma nova janela, agora perguntando “com que tamanho você gostaria que a imagem ficasse?” Pela minha experiência, eu aconselho marcar a opção “padrão”. Clique em “Ok”. “Ok” de novo e lá está sua foto, prontinha para ser admirada pelos seus contatos do MSN!

Filed under: apple, informática, , , , ,

janeiro 2009
S T Q Q S S D
« out   mar »
 1234
567891011
12131415161718
19202122232425
262728293031