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

Chato 2.0 ou Webchato

Pode reparar, os chatos nessa época de internet apresentam todos ou a maioria dos seguintes comportamentos: 

– MSN sempre “ocupado”. Interessante como alguém pode ficar no msn e ocupado ao mesmo tempo durante todo o dia. Isso quando não fica offline o tempo todo. 

– Email com confirmação de leitura. Grandes chances de que venha marcado como alta prioridade. Mesmo que o conteúdo seja um arquivo .pps ou  alguma piada que  perdeu a graça em 1998.

– Perfil vazio no Orkut, só para fuçar sem ser visto. Agora, que muita gente bloqueia o conteúdo apenas para amigos, os webchatos desabilitam a opção do bina. Só para não serem detectados. Claro, o que mais frustra um webchato é não poder reclamar que tanta gente fuça seu perfil e ele, ‘tadinho, nunca vê o perfil de ninguém.

– Ainda sobre Orkut, uma curiosidade sobre os comprometidos: se for homem, a foto do avatar traz o casal abraçado e com cara de vou-fazer-um-teste-em-Malhação; se for mulher, uma foto de lado, à la Gisele, ou como se tivesse sido tirada na seleção de Brazil’s Next Top Model.

 

– Frase extraída de sublivros que tentaram imitar “O Pequeno Príncipe”, de alguma letra do Jota Quest ou de algum artista (?!?) de gosto igualmente duvidoso.

– Manda pedido de atenção no MSN.

– Usa o BuddyPoke e ainda faz campanha para os amigos usarem também, mas ignora Facebook e twitter. Envia recado com imagem ou animação (principalmente com musicas de, digamos, artistas citados acima). Abusa de sites que mandam mensagens coletivas.

– Pega um novo vírus numa base semanal e então infesta fóruns, comunidades e MSNs perguntando como desinfectar.

– Tem um blog, envia o link para todos a todo momento e comenta em vários outros blogs, só para fazer propaganda  do seu próprio blog. Pede que todo amigo (ou nem tanto) “deixe um recado”. Versões mais perigosas têm fotologs e/ou videoblogs. Curiosamente, webchatos não têm podcasts  😉

– Trata o Google como preservativo ou cinto de segurança: sabe que é necessário e que funciona, mas raramente usa.

Pode ter certeza, você chegou até aqui por meio de algum webchato.

Filed under: comportamento, informática, papo-furado, The Observer, web 2.0, ,

Divagações breves e promoção do BR-Linux

Navegando pelo blogódromo, acabei caindo no Café com Gelo -no qual acabei lendo, de novo, sobre a promoção do BR-Linux.org (já havia lido no MeioBit, via Netvibes). A promoção visa, além de sortear prêmios, angariar fundos e/ou mais acessos para sites que disponibilizam conteúdo free, grátis, digraça, sem ônus para o visitante-internauta.

Eu também quero participar, então aí vai:

Ajude a sustentar a Wikipédia e outros projetos, sem colocar a mão no bolso, e concorra a um Eee PC!
…e também a pen drives, card drives, camisetas geeks, livros e mais! O BR-Linux e o Efetividade lançaram uma campanha para ajudar a Wikimedia Foundation e outros mantenedores de projetos que usamos no dia-a-dia on-line. Se você puder doar diretamente, ou contribuir de outra forma, são sempre melhores opções. Mas se não puder, veja as regras da promoção e participe – quanto mais divulgação, maior será a doação do BR-Linux e do Efetividade, e você ainda concorre a diversos brindes!

Mas, aproveitando o ensejo e o post, gostaria de desovar uma frase que vem me martelando a cabeça durante minhas caminhandas imaginárias nas manhãs mais imaginárias ainda.

Antes: você é autor? Como assim “como assim?”?? Direto do dicionário Schreibélio:

autor – substantivo masculino. Aquele que cria ou produz conteúdo. Exemplos: escritor de livro; redator de artigo, manchete, headline, twit, post ou slogan; compositor de música; cineasta de película, screencast, vídeo para youtube ou faustocassetada. Etc.

Então. Você é autor(a)? Sonha ser um(a)? Sinto em lhe dizer, mas o seu conteúdo não é mais seu. Ou não apenas seu. Todo o conteúdo é de todos.

Voltarei ao tema.

Filed under: comportamento, informática, web 2.0

Colocando links em DIVs com fundo PNG transparente

Se o título do post lhe parece grego, não entre em pânico; leia os outros – sobre economia, futebol etc. Ou faça um dos quizzes, ou divirta-se com as frases e momentos José Simão.

Uma das coqueluches atuais no webdesign é usar imagens de fundo com bordas arredondadas. Dá um ar de modernidade.

O problema é que navegadores mais antigos, como o Internet Explorer 6 (e seus primos mais arcaicos ainda), só aceitam transparência em arquivos GIF. Sim, eu ouço o seu pensamento, você que está sentado aí na última fila. Por que usar transparência? Imagina que o site tem o azul como cor de fundo. Mesmo usando o fundo com código RGB hexa idêntico no Fireworks (ou Photoshop, Illustrator etc.), dá uma diferença no browser. Então, para sites que não têm fundo branco, é necessária a transparência.

(Espero que nenhum de vocês, meus leitores e minhas leitoras, tenha perdido noites de sono nem deixado de ver capítulos de novela, ou finais de Libertadores, tentando aplicar transparência em sites com fundo branco!)

Usar JPG em vez de GIF, além de aumentar significativamente o tamanho do arquivo, não resolve o problema da visualização em navegadores antigos. A alternativa então é usar um filtro da própria Microsoft em imagens PNG.

Class ou id?

Não há diferença significativa entre class ou id para este caso, de modo que usarei id nos exemplos.

CSS:

#fundo {
float: left;
margin-bottom: 3px;
background-image:url(‘imagemdefundo.png’);
background-repeat:no-repeat center center;
_background:none!important;
width:400px;
height:400px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=’imagemdefundo.png’,sizingMethod=’scale’);
}

HTML:

<div id=”fundo”>

</div>
</code>

É importante que a DIV do fundo transparente não tenha sua position definida se a mesma tiver links. Links?

Links

Tudo muito bom, tudo muito certo. A não ser que haja links na DIV de fundo transparente. Funciona de forma correta no Firefox e demais geckos -aqueles navegadores que usam a tecnologia do Firefox e do Opera-, mas, adivinhe, dá problema no Explorer. Qualquer um deles. O navegador do tio Bill interpreta os links como uma camada abaixo do fundo, de forma que o mouse não os alcança devido a uma barreira. Isso explica muita coisa, inclusive um filme com o nome “Kill Bill”!

Para tornar clicáveis os links, é preciso acrescentar uma DIV com posição relativa. Vamos lá:

a.fundo {
position: relative;
}

Agora fica evidente a importância de não se colocar position:relative na DIV da imagem de fundo.

Filed under: informática, web 2.0, webdesign

(X)HTML?

Se você é mais um entusiasta da web semântica, XHTML estrito (?!),  core CSS… ok, estou inventando, mas você entendeu. Voltando, se és daqueles que acham coom (o cúmulo do cool) ter uma div chamada container, sugiro a leitura deste artigo.

Aliás, há atualmente uma saudável discussão na webosphera sobre o radicalismo na adoção ou no abandono de certas ferramentas e tecnologias (como o uso, ou não, do Photoshop).

Via http://www.jeffcroft.com

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

Zip! Zip! Hurra!

Mais ou menos retirado diretamente do site: “você acabou de zipar as fotos incríveis do seu último feriado prolongado e mandou aos amigos. Alguns deles, contudo, não sabem como abrir arquivos no formato .zip (ou .rar). O que fazer?”

Pois é, o que fazer? Mande junto o endereço http://www.wobzip.org para seus amigos. Wobzip é mais uma bênção 2.0: dezipa (?!) seus arquivos. E não zó .zip e .rar (deixa de ser preguiçoso acesse o site e veja todos os formatos dezipáveis).

Não é todo mundo que tem software dezipador (?!!) no comp (eu ia falar WinZip, mas aí os Brazips e WinRARs da vida ficariam enciumados!). Você também não tem? Visite o WobZip, oras.

Filed under: informática, web 2.0

outubro 2019
S T Q Q S S D
« jul    
 123456
78910111213
14151617181920
21222324252627
28293031