layout CSS sem largura fixa

Question

Eu não sou especialista em CSS de qualquer forma; Eu sei que, até certo ponto, mas não muito profunda; flutuar e IE6 me faz chorar. Então, eu estou sempre animado para ver o que as pessoas podem fazer com ele.

No entanto, a maioria dos exemplos que eu vejo uso fixo dimensões. Tanto quanto eu entendo isso é porque CSS é tão complicado e é muito mais fácil de cortar quando os elementos têm de largura, especialmente no IE6.

Mas, eu realmente gosto de largura flexível. E, sendo assim, eu não entendo por que é errado fazer o projeto com mesas? Há um livro chamado "tudo que sabe sobre CSS está errado!" que explicar como é bom que agora podemos fazer layouts com CSS com browsers recentes ... mas, não poderíamos fazê-lo o tempo todo com tabelas HTML? Sim não é CSS e talvez não tão limpo como CSS puro ... mas, afinal, layout da tabela é o que muitas vezes precisam, e se tivermos de escolher entre CSS hacky mau para fazê-lo e simples tabela HTML -mas-não-puro-suficiente, eu não entendo por que qualquer uma destas opções deve ser considerado ruim. Kiss é uma coisa boa, não é?

Ou, talvez eu não entendo isso e você pode fazer mesa-como layouts em CSS - que funciona no IE6 - sem muita dor na bunda? Quaisquer exemplos de tais sites?

UPDATE: Sim, eu sei sobre o conteúdo e separação estilo. Na verdade, eu sou fanático por DRY, SRP e outro projeto must-fazer as coisas. É por isso que eu realmente tentei fazer as coisas de CSS; mas se é muito mais difícil e mais confiável do que as tabelas, de modo que ele está mesmo escrito em livros como mencionado acima, por que tentar tão duro? Eu não digo que tudo deve ser feito em tabelas; mas se é realmente fácil de CSS - por que eu prefiro CSS para uma solução simples e previsível

?

Isto é, eu não digo que você deve usar tabelas sempre. Tenha em mente o layout da página mestre - é independente e não afetam outras páginas, eu posso mudar de CSS para tabelas e volta em 20 minutos (na verdade eu fiz isso) sem nenhum problema - Por que eu deveria ficar com CSS embora tabelas são nenhum dano?

UPDATE: Eu encontrei este é um muito bom resumo do que eu estava tentando dizer: http://www.flownet.com/ron/css-rant.html . E a discussão http :. //rondam.blogspot.com/2009/02/why-css-should-not-be-used-for-layout.html#comments

Para quem está interessado, aqui está um artigo ainda melhor: http://kv5r.com/ artigos / dev / layouttables1.asp

Answer 1

Você é essencialmente direita. Não há nada realmente errado com o uso de tabelas para layout, enquanto, para a acessibilidade, a ordem das células é apropriado para a página. Eu pessoalmente acho de largura fixa uma degradação muito pior de usabilidade do que as tabelas-para-layout.

Quando você faz mesas de uso para layout, certifique-se de usar o width: 100%; table-layout: fixed estilos (e <col> com um width estilo) para que os navegadores podem pôr a mesa corretamente desde o início (que corrige um dos problemas de usabilidade layouts mesa tinha) , e assim que você não é dependente do IE bastante pobre layout automático largura de adivinhação.

Enquanto eu certamente preferem CSS para layout sempre que possível, ea maioria dos layouts site simples pode ser razoavelmente alcançado usando apenas CSS (especialmente agora IE5 e sua Box Modelo Quirky se foi), existem alguns casos em que CSS não pode cortá-lo e As tabelas podem. Um exemplo comum é formas fluidas de largura complexos.

O problema mais significativo é a falta de capacidade de dizer coisas como width: 100%-10em para obter uma coluna que é a largura da janela menos um tamanho fixo para outra coluna. Para os casos simples que você pode contornar isso com margens e um div invólucro, mas uma vez que você começar a re-ordenação dos elementos em sua página e adicionar vários invólucros apenas para obter o layout CSS ao trabalho, você já está misturando-se a apresentação com o conteúdo:. não é realmente tão muito diferente de tabelas

No pior caso de você acabar com essas tolas ‘quadros CSS’ que exigem que você usar nomes de classe de nidificação e fixado completamente especificar o layout dentro da própria marcação. Este não é melhor do que as tabelas em tudo é; Acho que é absolutamente hilariante que este retrocesso sem esperança aos maus velhos tempos é considerada uma técnica moderna de ponta Web 2.0.

CSS3 está trabalhando em algumas interessantes alternativas para opções de posicionamento atuais que se pode dia cumprir a promessa de marcação total ea separação layout. Mas isso é muito longe hoje.

Answer 2

Tenha um olhar em yaml e 960gs fluidos . Ambos ajudá-lo muito com layouts cross-browser. Bancada para Layouts não são a resposta e IE6 irá desaparecer mais cedo ou mais tarde.

Answer 3

Há uma razão para que as tabelas HTML são ruins para qualquer outra coisa do que os dados tabular. HTML é uma linguagem de marcação para conteúdo de dados e, portanto, deve conter agrupamentos de dados reais, e não o layout para que os dados. CSS é para ser completamente para fins de layout e estilo; daí o seu nome. Portanto, a CSS deve conter toda a aparência ea sensação da página enquanto o HTML contém a estrutura para os dados; e nunca os dois se encontram.

Fazer tudo em tabelas é ruim para uma razão.

Você deve pensar nisso como a abstração entre estilo e conteúdo e você pode obter um bom resumo de aqui: http://www.alistapart.com/articles/separationdilemma/

Além disso, em resposta directa à sua pergunta Goto 'A List Apart' e busca através de seus artigos. Eles tipo de descrever a jornada que está prestes a fazer aqui: http://www.alistapart.com / artigos / viagem /

por que eu prefiro CSS para uma solução simples e previsível?

Isso é o que estamos tentando dizer. Pode parecer mais fácil a curto prazo, mas qualquer coisa que você escreve será menos sustentável e mais difícil de editar no futuro. Você pode ir e escrever uma página que parece mais fácil no curto prazo, mas você está apenas esfaquear no próprio pé realmente para mais tarde, quando você quer fazer mais. Porque não basta fazer certo da primeira vez? (É apenas uma pequena quantidade de esforço extra realmente)

Answer 4

Só porque layout CSS é um desafio para você, que não torná-lo inferior a tabelas. Ao afirmar isso, você está cometendo uma falácia lógica conhecida como o relativista Falácia.

Uma vez que você entender completamente CSS, como usá-lo, e na maioria das diferentes peculiaridades do navegador, você vai achar que é muito superior a tabelas HTML.

Markup deve ser semântico. Ou seja, ele deve descrever com precisão o conteúdo que ele contém. Isso faz com que seja legível por máquina (para SEO e outras aplicações). Tabelas para layout não é semântica em tudo.

A abstracção de diferentes camadas ajuda a fazer um site muito mais fácil de manter. Mantenha o conteúdo do HTML, o comportamento no Javascript, ea apresentação na CSS.

Está certo que CSS tem suas deficiências, no entanto. Mas as tabelas têm muitos mais, que são muito piores.

Answer 5

A razão que você não quer fazer marcação que utiliza tabelas como o layout é por causa da dissociação entre o design e conteúdo.

A sua marcação deve sentar-se, por si só, como uma descrição perfeita do conteúdo que está nele. Essencialmente, você deve marcar suas páginas em html antes de você tocar os estilos. Então você teria que usar CSS para modificar a maneira que sua marcação olhares semânticas por padrão.

O fato da questão é que o conteúdo da Web que você está colocando para fora não é 'dados tabulares' - Markup é para computadores / bots de ler, e estilos são para nós ver, misturando os dois apenas confunde um ou ambos partidos, normalmente, ao custo adicional de manutenção.

Answer 6

Aqui está um cenário que eu encontrei pessoalmente que eu vou gostar da ação. Nota: Eu não estou defendendo "no-mesa-at-all", ele vem na entrega de outros requisitos.

Eu criei um formulário (fluxo visualmente de cima para baixo):

Heading1
 Label1 
 Textbox1
 Label2 
 Textbox2

Heading2
 Label3 
 Dropdown3
 Label4 
 Textbox4
 Label5 
 Textbox5

cliente Então queria um tubular mais estruturado como este:

Heading1
Label1 Textbox1     Label2 Textbox2

Heading2
Label3 Dropdown3    Label4 Textbox4
Label5 Textbox5

Como eu não estou usando a tabela da TR TD tipo, eu posso facilmente (quase) converter a estrutura usando modificação CSS e HTML menor alterações de marcação.