Niquelao » Arquivo do blog » Mas será que ela é esperta!!

» Arquivo do blog » Mas, será lista!! Niquelao - CSS Mas, será lista!! 3 de Novembro, 2006 por Maroto Pués não estamos muito seguros, alguns pelo menos, outros, como têm o navegador cruzado, já não lhe dão nem o mínimo voto de confiança.

Nós, apesar das nossas profundas raízes estandardistas, vamos deixar-lhe o benefício da dúvida. À medida que formos explicando, vocês inclinar-se-ão por uma das duas vertentes. Ultimamente dá-me para usar o plural, como se o meu companheiro, que não por isso amigo, estivesse de acordo com o que digo. Esse Rumo, esse Rumo, eh, eh!!. E qual é o problema?

Bem, para começar temos uma lista ordenada, os típicos passos a seguir. Até ao momento, tudo correto. Mas aproveitando as bondades do CSS queremos oferecer os elementos de lista de forma horizontal.

Uma vez chegados a este ponto, temos várias possibilidades: dar aos elementos da lista a propriedade display: inline flutuar os elementos da lista para um lado, float: left Já temos os primeiros problemas: os marcadores da lista (números ou pontos) desaparecem, sempre com o IE e algumas vezes com o FF . O que dizem as Sagradas Escrituras? Já está, o IE que volta a falhar!!

E o que dizem as Sagradas Escrituras a tudo isto?. O caso é que no apartado 12.5 da especificação de CSS 2.1 diz claramente que para a disposição visual das listas, estes elementos têm uma propriedade tal que: display: list-item que gera uma caixa de bloco que por sua vez contém um marcador opcional (número ou ponto) e o conteúdo do elemento.

Assim mesmo, todas as propriedades que afetam os elementos de lista têm uma pequena restrição: só se aplicam a elementos com display: list-item . O de opcional já deixa muitas portas abertas, e mais se se tratar de certas pessoas. Com esta parte das escrituras já temos a solução para um dos problemas: assim que declaramos a propriedade display: inline aos elementos de lista, já não lhes afetam as propriedades destes elementos (tipo, posição, fundo). Repetimos, a especificação é clara: só para elementos com display: list-item .

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Num capítulo anterior da especificação CSS 2.1, concretamente o capítulo 9 , dedicado ao modelo de formato visual, temos um apartado dedicado à relação e reação dos elementos quando se combinam as propriedades display , position e float ( apartado 9.7 ). Este tema afeta diretamente a representação dos elementos, como vamos ver.

Em linhas gerais, vem-nos dizer que a maioria dos elementos quando se lhes aplica a propriedade float , passam a ter também display: block , exceto raras ocasiões, nas quais o valor continua a ser igual ao especificado, ou seja, que não muda. Os elementos que têm a propriedade display: list-item não deveriam mudar. Claro que isto é o que nos diz a especificação de CSS 2.1. A especificação de CSS 2, Recomendação W3C vigente, embora não a mais usada, aplica a todos os elementos flutuados a propriedade display: block .

Aí o têm, quem quiser um prego ardente a que se agarrar para defender o IE não tem mais que basear-se nesta premissa. O que posso fazer para que se veja igual em ambos os navegadores? Uma vez mais, não encontrámos nenhum hack para o solucionar, mas como somos uns tipos com recursos vamos dar-vos umas quantas ideias. eliminar o marcador em todos os casos: list-style: none eliminar o marcador em todos os casos e acrescentar texto que o substitua, isso sim, se vier ao caso.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Utilizar números numa lista ordenada causar-nos-á problemas quando não tenhamos suporte para CSS . Se acompanharmos o número com texto daremos sempre uma melhor imagem. (Passo 1, Passo 2, etc). eliminar o marcador em todos os casos e acrescentar uma imagem de fundo mediante a folha de estilos.

Esta solução fará com que aumente a marcação em caso de utilizar números, já que teremos que declarar uma imagem por cada um deles. Um par de curiosidades … Sabias que se se aplica o valor display: inline ao elemento ol o nosso amigo FF inicializa todos os marcadores de lista a 0 ?

Algo similar acontece ao IE se aos elementos de uma lista ordenada se lhes der uma largura ( width ). Neste caso todos os marcadores se inicializam a 1 . Referência Especificação CSS 2.1 Especificação HTML 4.01 Categoria: CSS, (X)HTML —> 2 comentários Leitor anónimo 7 de Novembro de 2006 Creio que há pouco contraste entre a cor de fundo e de primeiro plano de certos elementos. Rumoroso 7 de Novembro de 2006 Se nos indicares quais poderemos revê-lo.

Podes fazer um seguimento dos comentários graças ao feed RSS 2.0 . Também poderias deixar um comentário , ou enviar um trackback desde o teu site. Artigo anterior: Passo para o lado escuro Artigo seguinte: Eu também o vi… Deixa o teu comentário Os campos Nome e Email são obrigatórios Adiciona-nos a…

Tags que destacamos em geral acessibilidade conhecimento CSS estandardes fieldset Firefox formato formulário fontes hidden ie IE 7 informação javascript legend lista niquelando obrigatório opera xhtml

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.