Ok, tuve un problema de diseño simple hace una semana o dos. Es decir, las secciones de una página necesitaban un encabezado:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+Cosas bastante simples. La cosa es que el odio a las tablas parece haberse apoderado del mundo web, lo cual recordé cuando pregunté ¿Por qué usar etiquetas de listas de definiciones (DL, DD, DT) para formularios HTML en lugar de tablas? Ahora, el tema general de tablas vs divs / CSS se ha discutido previamente, por ejemplo:
Por lo tanto, esto no pretende ser una discusión general sobre CSS vs tablas para el diseño. Esta es simplemente la solución a un problema. Probé varias soluciones a lo anterior usando CSS, que incluyen:
- Flota a la derecha para el botón o un div que contiene el botón;
- Posición relativa para el botón; y
- Posición relativa + absoluta.
Ninguna de estas soluciones fue satisfactoria por diferentes razones. Por ejemplo, el posicionamiento relativo resultó en un problema de índice Z donde mi menú desplegable apareció debajo del contenido.
Así que terminé volviendo a:
<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>Y funciona perfectamente. Es simple, compatible con versiones anteriores (que probablemente funcionará incluso en IE5) y simplemente funciona. No se pierda el posicionamiento o los flotadores
Entonces, ¿alguien puede hacer el equivalente sin tablas?
Los requisitos son:
- Compatible con versiones anteriores: a FF2 e IE6;
- Razonablemente consistente: en diferentes navegadores;
- Centrado verticalmente: el botón y el título tienen diferentes alturas; y
- Flexible: permite un control razonablemente preciso sobre el posicionamiento (relleno y / o margen) y el estilo.
En una nota al margen, me encontré con un par de artículos interesantes hoy:
EDITAR: Permítanme ampliar el tema de la flotación. Este tipo de obras:
<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>Gracias a Ant P por el overflow: hiddenpapel (aunque todavía no entiendo por qué). Aquí es donde entra el problema. Digamos que quiero que el título y el botón estén centrados verticalmente. Esto es problemático porque los elementos tienen diferente altura. Compare esto con:
<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 perfectamente.