BlogAlex, sed Alex

Ícone

quem faz yoga não bloga

Wry tocando “Some Candy Talking” do Jesus & Mary Chain

Clique e ouça. Disponibilizado pelo site Bloody Pop

Wry – \”Some candy talking\”

Anúncios

Filed under: música, , , ,

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!

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

5 resoluções de Ano Novo que você NÃO VAI ver por aí

1. Aprender a fazer a barba
Com tanta coisa importante para preencher a lista – visitar a sogra, carpir o quintal, aprender a cantar, não espiar a vizinha etc. -, quando que o mandrião vai se lembrar que fazer a barba é uma arte não suficientemente explorada até agora? Hein, como? Ah, você não tem barba ou fazer a barba lhe é (lhe é… 2009 vai longe… ) uma moleza? Posta aí umas dicas, amigão!

2. Não olhar para o bumbum de quem não esteja se relacionando comigo
Aplicável a outras partes do corpo, claro. Para resumir, eu me ative à preferência nacional (atenção googlers: ATIVE, eu me ative… não escrevi ativo, não!)

3. Não ler um único livro
Gibi liberado, claro, mesmo que seja versão encadernada ou coisas mais cabeças – o que não inclui Groo, sorry. Mas mesmo assim; o cidadão pode até prometer acessar menos o Orkut, ficar menos no msn, mas ninguém promete ler menos. Até porque em alguns casos isso seria impossível.

4. Ler bula de remédio e ler qualquer documento, até o fim, antes de assinar
Embora uma resolução das mais úteis, deveras improvável.

5. Dar um fora na Gisele Bündchen
Admito; nesse, eu me superei. Impossível, meeeeeesmo, alguém ter prometido essa.

Existem outras resoluções quase tão remotamente possíveis: beber mais, ser ainda mais burro, deixar de jogar pôquer pelado na net, ficar com uma barriga maior (para homens, só para homens!), adotar o penteado do Borat -dentre outros, meio porn ou escatológicos e que eu jamais postaria-… mas são bem prováveis de aparecer em listas de um maluco ou outro. Se tem uma coisa que eu aprendi foi não subestimar o ser-humano, principalmente para baixo.

Em tempo: essa não é a minha lista.

Filed under: 5 coisas, comportamento

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