Ok, tive um problema simples de layout há uma ou duas semanas. Ou seja, as seções de uma página precisavam de um cabeçalho:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+Coisas muito simples. A coisa é que o ódio à mesa parece ter dominado o mundo da Web, do qual me lembrei quando perguntei Por que usar tags de listas de definições (DL, DD, DT) para formulários HTML em vez de tabelas? Agora, o tópico geral de tabelas vs divs / CSS foi discutido anteriormente, por exemplo:
Portanto, não se trata de uma discussão geral sobre CSS versus tabelas para layout. Esta é simplesmente a solução para um problema. Tentei várias soluções para o acima usando CSS, incluindo:
- Flutue para a direita para o botão ou div que contém o botão;
- Posição relativa ao botão; e
- Posição relativa + absoluta.
Nenhuma dessas soluções foi satisfatória por diferentes motivos. Por exemplo, o posicionamento relativo resultou em um problema de índice z em que meu menu suspenso apareceu sob o conteúdo.
Então acabei voltando para:
<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
<td class="group-title">Title</td>
<td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>E funciona perfeitamente. É simples, tão compatível com as versões anteriores quanto possível (provavelmente funcionará até mesmo no IE5) e simplesmente funciona. Sem problemas com posicionamento ou flutuadores.
Então, alguém pode fazer o equivalente sem tabelas?
Os requisitos são:
- Compatível com versões anteriores: para FF2 e IE6;
- Razoavelmente consistente: em diferentes navegadores;
- Centralizado verticalmente: o botão e o título têm alturas diferentes; e
- Flexível: permite um controle razoavelmente preciso sobre o posicionamento (preenchimento e / ou margem) e estilo.
Por outro lado, encontrei alguns artigos interessantes hoje:
EDIT: Deixe-me elaborar sobre a questão do float. Este tipo de trabalho:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-title { float: left; padding: 8px; }
.group-buttons { float: right; padding: 8px; }
</style>
</head>
<body>
<div class="group-header">
<div class="group-title">This is my title</div>
<div class="group-buttons"><input type="button" value="Collapse"></div>
</div>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>Obrigado ao Ant P pela overflow: hiddenparte (ainda não entendi o porquê). É aqui que entra o problema. Digamos que eu queira que o título e o botão sejam centralizados verticalmente. Isso é problemático porque os elementos têm alturas diferentes. Compare isso com:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-header td { vertical-align: middle; }
.group-title { padding: 8px; }
.group-buttons { text-align: right; }
</style>
</head>
<body>
<table class="group-header">
<tr>
<td class="group-title">This is my title</td>
<td class="group-buttons"><input type="button" value="Collapse"></td>
</tr>
</table>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>que funciona perfeitamente.