Top rated never dies » Desenvolvimento

CSS – Centralizando conteúdo verticalmente

Domênico Citrângulo — Fri, 09 Oct 2009 12:58:07 +0000

Geralmente o que se quer é centralizar uma div ou imagem e é bastante comum ver esse tipo de layout em páginas de aviso, disclaimer e em páginas de sites “em construção”. Segue então uma solução que costumo usar:

.centralizado {
width: 600px;
height: 300px;
position: absolute;
top: 50%;
margin: -150px 0 0 0;
}

Entenda o que fizemos em cada uma das linhas:

width: 600px : configuramos a largura do elemento que queremos centralizar;
height: 600px : configuramos a altura do elemento que queremos centralizar;
position: absolute : deixamos o elemento posicionado absolutamente na página;
top: 50%; : posicionamos o topo do elemento no meio da página, verticalmente;
margin: -150px 0 0 0; : para compensar, colocamos uma margem superior com a metade da altura;

Pronto, basta adicionar a classe “centralizado” ao seu elemento e ele ficará posicionado no centro vertical da sua página.
E claro, você pode usar o mesmo princípio se quiser centralizar também na horizontal, basta fazer duas pequenas alterações no código, colocando a propriedade left e alterar a margem esquerda. Veja:

.centralizado {
width: 600px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -300px;
}

O que alteramos do código anterior:

left: 50% : posicionamos a borda esquerda do elemento no meio da página, horizontalmente;
margin: -150px 0 0 -300px : para compensar, colocamos uma margem esquerda com a metade da largura;

É isso aí, agora o elemento ficará posicionado bem no centro da página, horizontalmente e verticalmente. Veja aqui o exemplo publicado.

Classes condicionais – Seu layout perfeito em todos os browsers com apenas um CSS e sem hacks

Domênico Citrângulo — Tue, 21 Oct 2008 01:51:36 +0000

Os comentários condicionais costumam ser uma das maneiras mais aceitas e bem vistas de se encarar o problema. Com eles é possível entregar o layout perfeito, sem erros, mantendo o CSS limpo, sem hacks e válido à um custo razoável: o uso um arquivo CSS adicional para o Internet Explorer. Pra quem ainda não conhece, funciona assim:

 





conteúdo do site....

Tudo o que estiver dentro das tags e será interpretado apenas pelo Internet Explorer 6. Dessa forma você pode escrever o seu CSS sem nenhum hack, com código 100% válido, e colocar todas as correções em um outro arquivo específico para o IE. A desvantagem é ter 2 arquivos CSS ao invés de um, o que pode ser prejudicial em termos de atualização e manutenção.

Ok, nenhuma grande novidade até aqui.

Mas e se, ao invés de usar os comentários condicionais para linkar um novo CSS, os usássemos para fazer o seguinte:

 







conteúdo do site....

Entendeu? Isso faz com que a classe “ie” [class="ie"] seja aplicada apenas quando o browser utilizado é o Internet Explorer 6 [if IE 6]. Caso contrário o fica sem nenhuma classe [o sinal "!" significa "não igual"]. Assim, podemos escrever nosso CSS da seguinte maneira:

div#menu { color: inherit; } /* linha interpretada por todos os browsers */
.ie div#menu { color: #ff8000; } /* linha interpretada apenas pelo IE 6 */

Ou seja, podemos colocar todas as correções precedidas pelo seletor de classe “.ie”, dessa forma apenas o IE 6 irá interpretá-las. Eliminamos assim a necessidade de um segundo arquivo e ficamos livres também dos hacks, podendo então escrever CSS 100% válido.

Veja o exemplo

Como melhorar seu site: dicas simples que dão resultado

Domênico Citrângulo — Thu, 25 Sep 2008 23:32:03 +0000

Todo mundo sabe que a concorrência entre blogs e sites é ferrenha e nessa guerra por visitas e pageviews até os pequenos detalhes podem fazer diferença. Por isso, quando sobra um tempinho, é sempre bom dar aquela revisada no código da sua página e tentar melhorá-la. Quando for fazer isso experimente usar o Website Grader, uma ferramenta online que analisa várias características do seu site e dá algumas dicas simples e interessantes de como melhorá-lo. Veja algumas delas:

Ajustes nas metatags description e keywords.

O website Grader analisa as metatags de descrição e palavras-chave e, se houver alguma coisa errada, exibe um aviso para que você corrija o problema. Geralmente os problemas mais comuns são o excesso de texto na descrição e o excesso de keywords, ou até a ausência dessas tags.

Estrutura de títulos ou ‘headers’.

Outro ponto interessante analisado pela ferramenta é a estrutura de títulos: H1, H2, H3, etc. É importante manter uma estrutura de títulos bem definida, usando as tags corretamente e distribuindo os títulos conforme sua relevância.

Quais palavras-chave usar?

Uma das dicas mais valiosas que você pode tirar da análise feita é a lista de palavras, baseada nas keywords encontradas no seu site, que mostra os termos que têm o maior volume de buscas e a posição em que você aparece nos resultados do Google. Assim você pode ter uma idéia melhor sobre quais palavras valem mais a pena serem trabalhadas.

Passou de ano?

O relatório também dá uma ‘nota’ para o seu site, de 0 a 100 pontos, que mostra como você se saiu quando comparado a todos os outros sites que já passaram por esta análise. Como uma parte da nota refere-se a quantidade de links externos que apontam para o seu site, nem todo o poder está nas suas mãos, mas se o seu código estiver bem feito dá pra passar de ano.

Website Grader

PSD2CSS – Converta seu layout PSD em HTML e CSS

admin — Wed, 16 Apr 2008 16:33:37 +0000

É exatamente isso que você está pensando! No PSD2CSS você faz o upload do seu layout no formato PSD [PhotoShop Document] e… voila! O site o converte automaticamente para HTM e CSS!!
Ok, ok… o resultado não chega a ser perfeito. Todo o layout é montado com imagens, cada layer é transformada num arquivo PNG. Máscaras não funcionam muito bem e as layers de texto não são reconhecidas, o que é uma pena. O código gerado é parecido com o que se obtém usando a exportação diretamente no Photoshop, mas não igual.

Como disse, o resultado não é ideal, está longe ainda do que se espera de uma página bem estruturada semanticamente e CSS bem escrito. Mas ainda assim, talvez em alguns casos possa ser útil, pra alguém que está começando a aprender a escrever HTML e CSS ou até para layouts bastante simples por exemplo.