Niquelao » Arquivo do blog » Layout em três colunas e marcação… "o justo"

» Arquivo do blog » Layout a três colunas e marcação… “a justa” Niquelao - CSS Layout a três colunas e marcação… “a justa” 4 de junho de 2006 por Rumoroso Quando se pretende estruturar o conteúdo de um documento web, deve-se evitar por todos os meios ter presente qual vai ser o design visual e, em especial, o layout. Isto é fundamental se se quiser conseguir um conteúdo estruturado de forma correta do ponto de vista do fluxo da informação, bem como uma marcação semântica e um código otimizado.

Para a consecução deste objetivo, deve-se utilizar como premissa indiscutível o uso dos padrões do W3C, evitando a marcação extra cuja finalidade seja servir a folha de estilos para apresentação. Caso desenvolvido .- O conteúdo do documento estrutura-se em três áreas ou grupos funcionais: conteúdo específico, menu de navegação principal e uma área de caráter transversal ao site (relacionada quer com o documento atual, como poderiam ser notícias da secção, quer com o site ou portal, como por exemplo ligações de interesse relacionadas com a temática do portal ou um conjunto de banners).

A organização do conteúdo no código deve estabelecer-se em função do seu nível de especificidade e relevância em relação à página atual. Assim, o grupo de informação específico do documento deveria aparecer primeiro no código, seguido da área de caráter transversal se esta se relacionar especificamente com a informação anterior e variar em função do conteúdo. A seguir viria o menu de navegação principal.

No caso de a informação transversal ser comum a todo o site e não ter caráter específico em cada secção, esta será disposta no final, precedida pelo menu. Em todos os casos, deveriam criar-se ligações cuja finalidade seja a de poder mover-se pelo documento saltando entre cada um dos três grupos para ir ao seguinte ou ao anterior. Tentando conseguir um código o mais limpo e otimizado possível, a abordagem do mesmo é a seguinte:

Foram adicionados um cabeçalho e um rodapé, sendo esta uma das situações mais comuns que se pode dar.

Empregam-se contentores genéricos de bloco ( div ) para mostrar o exemplo. No caso de estes incluírem um único bloco (por exemplo, uma lista), não seriam necessários, pois o identificador poderia ser aplicado diretamente sobre ele.

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

Pelo afã de conseguir um código limpo e otimizado , não se empregam contentores que agrupem um ou mais destes. A marcação aplicada e a sua organização mantiveram-se intactas entre os exemplos. Os estilos que foram aplicados de forma genérica foram incluídos numa css comum. O conjunto de estilos específicos para cada um foi incluído dentro do cabeçalho do documento para facilitar a sua revisão.

Em todos os casos, manteve-se o bloco de conteúdo principal com um comportamento fluido. Utilizou-se o seletor universal para aplicar margens aos primeiros descendentes do bloco chamado “contenido1”.

Dado que nem todos os navegadores reconhecem corretamente o pseudoelemento ” :first-child ”, recorreu-se a aplicar as propriedades a todos os descendentes do bloco e depois anulá-las a todos os descendentes cujo pai seja descendente do mesmo. Podem empregar-se outros métodos, como por exemplo o uso do pseudoelemento anteriormente citado junto a comentários condicionais para Internet Explorer (IE). Outra forma teria sido criar um bloco dentro de “contenido1 ” e aplicar os estilos necessários sobre este.

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

Evitou-se este método para conseguir uma marcação mais limpa e sem a presença de elementos cuja finalidade seja servir na maquetização. Na realidade, a(s) propriedade(s) que se poderiam ver modificadas para os descendentes são as margens laterais, propriedades facilmente controláveis, pelo que a solução proposta se considera a mais otimizada para este caso. É importante ter em conta que propriedades e atributos foram declarados tendo em vista o aparecimento de possíveis efeitos inesperados ao aplicar estilos.

Por exemplo, no IE, quando se incluem listas dentro de elementos flutuados e posicionados em relativo, não se mostram os estilos aplicados ao fundo nem as cores aplicadas às bordas (isto pode ser corrigido posicionando-as em relativo). A ideia é conseguir um layout a três colunas com uma ordem determinada em função das necessidades do site. Os diferentes layouts mostram-se organizados em função da ordem dos blocos e da característica fluida dos mesmos.

A fluidez dos blocos consegue-se definindo a sua largura em percentagem (sendo para todos os exemplos 20% do total do seu contentor) e a rigidez em unidades absolutas (sendo em todos os exemplos 150px). Assim mesmo, em lugar de utilizar unidades absolutas, poderiam utilizar-se unidades relativas (em).

Tudo dependerá das necessidades particulares de cada caso: Ordem no layout 1 2 3 Exemplo de design fluido: Fluido Fluido Fluido Exemplo de design híbrido: Fluido Rígido Fluido Exemplo de design híbrido: Fluido Fluido Rígido Exemplo de design híbrido: Fluido Rígido Rígido Ordem no layout 1 3 2 Exemplo de design fluido: Fluido Fluido Fluido Exemplo de design híbrido: Fluido Fluido Rígido Exemplo de design híbrido: Fluido Rígido Fluido Exemplo de design híbrido: Fluido Rígido Rígido Ordem no layout 2 1 3 Exemplo de design fluido: Fluido Fluido Fluido Exemplo de design híbrido: Rígido Fluido Fluido Exemplo de design híbrido: Fluido Fluido Rígido Exemplo de design híbrido: Rígido Fluido Rígido Ordem no layout 2 3 1 Exemplo de design fluido: Fluido Fluido Fluido Exemplo de design híbrido: Rígido Fluido Fluido Exemplo de design híbrido: Fluido Rígido Fluido Exemplo de design híbrido: Rígido Rígido Fluido Ordem no layout 3 1 2 Exemplo de design fluido: Fluido Fluido Fluido Exemplo de design híbrido: Fluido Fluido Rígido Exemplo de design híbrido: Rígido Fluido Fluido Exemplo de design híbrido: Rígido Fluido Rígido Ordem no layout 3 2 1 Exemplo de design fluido: Fluido Fluido Fluido Exemplo de design híbrido: Fluido Rígido Fluido Exemplo de design híbrido: Rígido Fluido Fluido Exemplo de design híbrido: Rígido Rígido Fluido Em algum dos casos e para algum navegador (como pode ser o Internet Explorer) poderá dar-se um comportamento anómalo ao redimensionar a janela.

Basicamente, o comportamento incorreto deve-se a que, embora se indique ao contentor qual deve ser a sua largura, ao redimensionar, o texto influencia empurrando ligeiramente as bordas do mesmo. Se o conjunto de blocos tiver de ocupar 100% do contentor, poderia ocorrer que um dos que tenha dimensões relativas, pelo efeito antes mencionado, ocupasse algo mais do que deve, empurrando os demais, os quais, ao estarem flutuados e não caberem, saltam para baixo.

Para lhe dar solução, pode declarar-se uma dimensão num deles ligeiramente inferior à ideal (por exemplo, 19.9% em lugar de 20%). Categoria: CSS —> 1 comentário Norwin Galeano 28 de agosto de 2006 Muito bom. Este artigo deve ser de muita utilidade para os que iniciam a maquetizar as suas páginas

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.