Blog Web Standards

Listagem horizontal com itens de mesma altura

linke — Fri, 13 Aug 2010 18:21:25 +0000

Listagem horizontal onde os itens de lista vão ficar sempre com tamanho igual (se baseando na altura do maior dos itens): utilizando somente HTML e CSS.

Seria uma listagem no modelo da Americanas.com e Submarino – Porém quando verifiquei o código desses sites vi que não era o ideal, pois utilizam um monte de ULs separadas para cada linha: sendo que deveria ser somente 1.

Pontos positivos – Lista com Display Inline-block

Todos itens da linha se adaptam ao tamanho do maior;
Sem float: sem preoupações com clear, contemfloat, etc;
Possível listar tudo utilizando somente uma UL;

Pontos negativos – Suporte

Hack para IE6;
Hack/script para IE7;

Veja o exemplo de como vai ficar: Listagem horizontal com itens de mesma altura.

Código HTML

Somente uma listagem UL com items LI contendo uma imagem e um parágrafo.

  
    
      
        
        Quadro em Aquarela 60x60px. Pode ser comprado em até 6x no cartão ou à vista com desconto de 50% - por Kasper Jeppesen, 2010
      
      
        
        Esse item é uma obra de arte fantástica em Aquarela 60x60px - por Kasper Jeppesen, 2010
      
      
        
        Obra em Aquarela

E o CSS:

  #limites ul { list-style: none; letter-spacing: -3px;}
  #limites ul li { display: inline-block; width: 100px; margin: 10px 0; padding: 20px; border-top: 1px #fff solid; text-align: center; vertical-align: top; letter-spacing: normal; zoom: 1; }
  #limites ul li p { text-align: left; }

Letter-spacing com valor negativo na UL, pois o display insere automaticamente alguns pixels de margem entre os elementos. Esse valor é zerado novamente no LI (normal).
Todos itens se alinham ao topo
Paddings com a borda simulam a união dos elementos

Se for testar nos IEs até agora, vai encontrar um BUG como esse:

Quebra de layout nos IEs

O quadro vermelho indica a quebra, pois esses navegadores não suportam o DISPLAY inline-block corretamente.

Não se preocupe – para concertar isso é só usar um hack para o IE6:

  * html #limites ul li { display: inline; }

E um ajuste para o IE7 – em um CSS separado (se não lembra como fazer, é bom dar uma lida em Conditional comments para Internet Explorer:

  #limites ul li { display: inline; }

Pronto.
Temos uma lista semanticamente correta onde cada linha se adapta ao conteúdo do maior elemento.

Cantos arredondados no Internet Explorer (sem imagens)

Carlitos — Tue, 09 Feb 2010 00:19:05 +0000

Com os recursos que temos atualmente, podemos fazer cantos arredondados diretamente pelo CSS para os browsers Firefox e Safari, graças a propriedades exclusivas de suas engines.

O CSS3 promete unificar tudo isso introduzindo a propriedade border-radius mas, até o momento, a melhor opção que temos é o DD_roundies, um script que possibilita fazermos bordas arredondadas sem imagens para os browsers mais populares: Internet Explorer 6, 7 e 8 além de Firefox e Safari (Google Chrome).

Explicação

Faça download do script DD_roundies e coloque o arquivo junto com o HTML. Caso o arquivo baixado esteja na mesma pasta que o arquivo HTML inclua esse js em seu HTML dentro da tag head:

...

  Exemplo
  

...

Agora para colocarmos canto arredondado em algum elemento siga o exemplo.

Coloque dentro da tag body uma div:

...

  Meu exemplo de canto arredondado

...

Logo abaixo do código que colocou antes no head, inclua também o código para fazer os cantos arredondados que desejar e um CSS para que veja o que fez:

...

  Exemplo
  
  

  

...

Esse código que colocou é apenas para fazer os cantos arredondados em qualquer div com um raio de 10 pixel e funcionar em todos navegados (true). Quando for usar em seu dia-a-dia mude conforme a necessidade, por exemplo:

...
DD_roundies.addRule('div.conteudo ol li', '20px', true);
...

ou assim, com cantos diferentes:

...
DD_roundies.addRule('div.topo .busca form', '20px 0 0 20px', true);
...

Essa ordem usada para deixar os cantos diferentes é a seguinte: Top-Left, Top-Right, Bottom-Left e Bottom-Right.

Veja o exemplo de pronto com cantos arredondados. Caso tenha uma dúvida, comente!

O interessante de usar essa técnica para todos os browsers (incluindo Firefox e Safari) é que mantemos nosso CSS limpo e sua aplicação mostrou-se muito eficaz, já que não se faz mais necessário o uso de imagens para fazer os cantos arredondados.

O único porém que percebi até o momento é no uso das bordas arredondadas para Internet Explorer 8, não mostrando a propriedade background-image caso utilizada.

Histórico de bugs: encontre soluções para aqueles bugs mais esquisitos!

Carlitos — Fri, 16 Oct 2009 14:15:49 +0000

Sabe aquele bug que você encontra em situações específicas e pede ajuda pra alguém e, um tempo depois, acaba esquecendo a solução?

Pensando nisso, criamos o Histórico de Bugs, um repositório que lista diversos tipos de erros e suas respectivas soluções. Você pode contribuir colocando seu comentário, aprimorando a solução, ou até enviar um novo bug (com sua solução, é claro!) através de nosso formulário de contato.

O objetivo, como sempre, é fazermos algo simples e direto.

Ordem dos atributos HTML

g3 — Thu, 15 Oct 2009 20:43:25 +0000

Incrementamos o conteúdo do Checklist para HTML.

Assim como temos definido a ordem das propriedades CSS, também documentamos uma ordem para os atributos de HTML.

Agora o Checklist para HTML possui a seção sobre Ordem dos atributos HTML.

Quebra de layout no email marketing IE6 e IE7

linke — Thu, 15 Oct 2009 19:16:27 +0000

Quando você terminar de fazer seu email marketing com HTML e partir para testar no Internet Explorer, o layout fica quebrado, com linhas entre as fatias (normalmente este problema acontece no Hotmail).

Veja um exemplo: Quebra de layout no email marketing.

[as divs com style que vocês irão ver, servem para corrigir um Bug de renderização no Hotmail, para evitar as linhas de quebra de layout]

Exemplo do Código HTML (ainda com defeito):

Deve estar igualzinho seu código, e tudo era para dar certo mas não deu? Veja o código que vai resolver seus problemas:

O IE interpreta o ENTER que você coloca para organizar seu código e indentação, como uma quebra de linha.

— RESUMO —
A solução é deixar o elemento e tudo que tem dentro, na mesma linha.

Gerador de e-mail marketing

Para facilitar o trabalho de inserção das medidas de cada imagem em sua célula-mãe e a criação de uma div envolvendo com sua altura correspondente, criamos o Gerador de e-mail marketing:

http://www.webstandards.blog.br/exemplos/gerador-email-marketing/

Imagens carregando só no Firefox?

Carlitos — Fri, 09 Oct 2009 13:51:43 +0000

Problema: Um bug extremamente estranho é a imagem que só funciona no Firefox, enquanto no Internet Explorer simplesmente não aparece!

Mágica? Não! Talvez o arquivo esteja corrompido.

Solução: Salvar a imagem novamente, para que funcione nos outros navegadores.

Nenhum artigo relacionado.

Novidades do Blog Web Standards!

Carlitos — Mon, 20 Jul 2009 19:59:50 +0000

Além de termos inaugurado nosso tema personalizado para o Blog Web Standards, vocês podem nos seguir no Twitter e acompanhar nossas últimas atualizações na caixa lateral do site.

Gostaríamos de agradecer os elogios que temos recebido e vários links, tudo isso pois temos o objetivo de ajudar os desenvolvedores a encontrar a solução de seus problemas!

Email marketing: usando HTML e CSS

linke — Thu, 18 Jun 2009 14:45:18 +0000

Sei que email marketing não tem muita ligação com Web Standards, mas todo mundo precisa saber que já existem projetos relacionados e também serve como um guia para produzir esse tipo de material.

Quais são os limites do email marketing utilizando HTML? O que podemos colocar de CSS também, levando em conta algo que funcione nos programas desktops e também nos webservices?

CSS

Pode ser utilizada a tag “style” no head ou no body (só não funciona no AOL MAC, Note 6, Gmail e Hotmail). Mas como no GMail isso não funciona, a dica é usar style inline. Como o Notes 6 tem um suporte mínimo, não levei ele em conta ok?

Propriedades CSS válidas para todos*:

Background-color:
Border;
Border-collapse;
Color;
Display, Float e Height(só não funciona no Outlook 07);
Font-family (não funciona no Gmail);
Font-size;
Font-style;
Font-weight;
Line height;
Table-layout;
Text-align;
Text-decoration;
Text-indent;
Text-transform;
Letter-spacing;
Padding;

* Todos testados (Yahoo antigo/novo, Gmail antigo/novo, Live Mail, Hotmail, AOL Web, MobileMe.) / (Outlook (2003 e 07), Windows Mail, Mac Mail, Entourage (2004, 2008), Thunder-bird 2, AOL (9, 10), Mac).

Existem pessoas focadas nos webstandards para os emails: os chamados e-mail standards. Eles mostram screenshots de cada browser como resultados de seus testes, além de dizer o que falta para cada Email Client ficar show para suportar os standars. Ex.: Para o Google Mail ainda é necessário suportar o CSS no header, e não utilizar mais a técnica inline.

Estrutura HTML / CSS

Resumindo: Como construir um e-mail marketing utilizando pelo menos um pouco de webstandards?

A estrutura deve ser em tabelas;
Utilizar as propriedades que todos os emails clients aceitem (ou pelo menos a maioria deles);
CSS inline (apesar de não ser standard, é o que podemos usar);
Layout com largura fixa até 580px e a altura pode ser variável (dependendo do layout).
Mesmo com todos os cuidados, é possível que o usuário veja a mensagem desconfigurada. Por isso um link do tipo “se você está vendo o email desconfigurado, acesse a outra versão.”

HTML: tags que devemos evitar

Tags HTML que não devem ser utilizadas, por não serem suportadas por muitos clientes de email: (segundo um HTML Email Guide que li).

DOCTYPE
HTML tag
BODY tag
Meta tags
Head tag
Base tag
Link tag
Script tag
Title tag
Applet tag
Frameset tag
Frame tag
IFrame tag
Comments

Template de E-mail Marketing HTML, utilizando o que falei nesse post. *No topo a mensagem para visualizar o outro formato do email, evitei usar o “clique aqui” por ser termos que são buscados para codificar como Spam.

. Esse template foi testado no GMail, Hotmail, YahooMail e no ThunderBird.

Se você tem dúvidas em quais clientes testar, pode dar preferência aos clientes que mais cresceram em 2009: iPhone, Apple Mail, Hotmail e Gmail – (fonte).

Link relacionado/fonte: Campaing Monitor.

Alinhamento vertical e horizontal com CSS

g3 — Wed, 22 Apr 2009 22:07:00 +0000

A forma seguinte de alinhamento vertical e horizontal é uma combinação de:

Posicionamento absoluto
Margens negativas

Para começar entender como funciona esse método copie o código XHTML abaixo e insira dentro da tag body:

  
    
      Alinhamento vertical e horizontal com XHTML e CSS
      Olá mundo!

Nesse exemplo o elemento que precisa posicionar no meio da tela será a div#limites.

Como padrão de documento base para CSS coloque o seguinte reset:

  * { margin: 0; padding: 0; z-index: 1; }

E agora para começar a posicionar a div#limites no meio da tela declare o seguinte código:

  #limites { position: absolute; top: 50%; left: 50%; width: 680px; height: 400px; background-color: #eee; }

Isso vai fazer que a div#limites tenha os seguintes estilos:

posição absoluta
canto superior esquerdo a uma distância igual a 50% do tamanho da tela
largura e altura
fundo cinza.

Com isso o resultado será meio estranho visualmente, mas esta tudo ok.

Veja ampliado

Agora é preciso puxar a div#limites para cima e para esquerda usando margim negativa, é por esse motivo que é necessário a div#limites ter uma largura e altura definida.

Puxe então a div#limites para cima ↑ com um valor igual à metade da sua altura ( margin-top: -200px; ) e o mesmo deve ser feito para o lado esquerdo ←, puxe para esquerda à metade da sua largura ( margin-left: -340px; ).

Veja ampliada

Com isso é possível posicionar a div#limites exatamente no meio da tela.

Veja ampliada

Veja o arquivo pronto do exemplo sobre alinhamento vertical e horizontal deste post.

Outros exemplos e links interessantes

Gerador de embed YouTube válido W3C

Carlitos — Wed, 08 Apr 2009 14:57:34 +0000

Em nosso último artigo comentamos uma forma de inserir vídeos do YouTube em seu site, com código válido, de acordo com as normas da W3C. Porém muita gente entrou em contato conosco falando que era um processo “braçal”, que demandava muito empenho.

Para solucionar este problema, criamos o Gerador de embed YouTube válido W3C que, obviamente, só precisa do URL além das dimensões desejadas para o vídeo; logo abaixo é gerado um código que você só precisa copiar e colar, garantindo que o seu código continue válido, além de funcionar em todos os browsers (inclusive IE6!).

Blog Web Standards

Listagem horizontal com itens de mesma altura

Pontos positivos – Lista com Display Inline-block

Pontos negativos – Suporte

Código HTML

Artigos relacionados:

Cantos arredondados no Internet Explorer (sem imagens)

Explicação

Artigos relacionados:

Histórico de bugs: encontre soluções para aqueles bugs mais esquisitos!

Artigos relacionados:

Ordem dos atributos HTML

Artigos relacionados:

Quebra de layout no email marketing IE6 e IE7

Gerador de e-mail marketing

Artigos relacionados:

Imagens carregando só no Firefox?

Nenhum artigo relacionado.

Novidades do Blog Web Standards!

Artigos relacionados:

Email marketing: usando HTML e CSS

CSS

Estrutura HTML / CSS

HTML: tags que devemos evitar

Artigos relacionados:

Alinhamento vertical e horizontal com CSS

Alinhamento vertical e horizontal com XHTML e CSS

Outros exemplos e links interessantes

Artigos relacionados:

Gerador de embed YouTube válido W3C

Artigos relacionados: