Listas numeradas com sub-tópicos em CSS

Para fazer listas numeradas com html básico, usamos as tags ol e il. A primeira indica uma lista ordenada e a segunda gera o item da lista propriamente dito.

Se usamos um ambiente ol dentro de outro, teremos uma lista com sub-tópicos. Assim:

1. item 1
2. item 2
   
   1. subitem 1
   2. subitem 2
3. item 3

O código-fonte para esta lista fica assim:

Em editores de texto, é comum aplicar numeração de acordo com a numeração do tópico principal. Dessa maneira, a numeração dos subitens ficaria 1.1, 1.2, 1.3 e assim por diante. Depois de alguma pesquisa, encontrei um jeito simples de fazer isso usando apenas CSS. Veja como fica:

1. item 1
2. item 2
   
   1. subitem 1
   2. subitem 2
3. item 3

A compatibilidade de navegadores é ampla. Eu postei essa resposta lá no StackOverflow. Confira o código-fonte (HTML + CSS):

Deixe seu site bonito sem saber CSS

É quase isso: o bootstrap do Twitter permite que você tenha um design bastante elegante sem precisar ser um mestre em CSS. Você só precisa baixar o CSS indicado e colocar no seu projeto. Depois, é só ajustar seu HTML para as classes indicadas. Fácil, fácil.

O que você ganha: design elegante e compatibilidade com navegadores, tudo que você sempre quis do CSS. O Bootstrap está hospedado no Github, e está licenciado pela Apache License 2.0.

Menu de navegação horizontal

Voltei a trabalhar com web nas últimas semanas. Uma coisa que precisei fazer foi um menu horizontal para navegação geral. Há milhares de exemplos disso por aí, mas eu precisava de um pequeno detalhe a mais: uma imagem personalizada para a lista de itens do menu.

Para começo de conversa, as implementações desse tipo de menu usam listas (tag ul e li) com atributos de estilo para tornar a listagem horizontal. Pode ser display: inline ou float: left. O código fica assim:

HTML:



E o CSS para deixar horizontal pode ser:



ou



Aí podemos colocar a imagem para a listagem com o atributo list-style-image e colocando a URL da imagem:



Mas isso só funciona para o float: left, tá?

Agora o pulo do gato: cada navegador coloca um espaçamento diferente do lado esquerdo desta nossa imagem! Qual propriedade ajusta isso? Nenhuma!
Contornei este problema usando esta mesma imagem como fundo do elemento de lista e ajustando o espaçamento do lado esquerdo (padding-left) com o mesmo tamanho da imagem de fundo. O código final ficou assim:



Atualização: coloquei os códigos nos meus Gists do Github para colocar aqui. Temos destaque de sintaxe, agora!