Ok, ho avuto un semplice problema di layout una o due settimane fa. Vale a dire le sezioni di una pagina richiedevano un'intestazione:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+Cose abbastanza semplici. Il fatto è che l'odio per le tabelle sembra aver preso il sopravvento nel mondo Web, cosa che mi è stata ricordata quando ho chiesto Perché usare i tag degli elenchi di definizioni (DL, DD, DT) per i moduli HTML invece delle tabelle? Ora l'argomento generale di tabelle vs divs / CSS è stato discusso in precedenza, ad esempio:
Quindi questa non vuole essere una discussione generale su CSS e tabelle per il layout. Questa è semplicemente la soluzione a un problema. Ho provato varie soluzioni a quanto sopra utilizzando CSS, tra cui:
- Fluttua a destra per il pulsante o un div contenente il pulsante;
- Posizione relativa per il pulsante; e
- Posizione relativa + assoluta.
Nessuna di queste soluzioni è stata soddisfacente per motivi diversi. Ad esempio, il posizionamento relativo ha provocato un problema di z-index in cui il mio menu a discesa appariva sotto il contenuto.
Quindi ho finito per tornare 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>E funziona perfettamente. È semplice, compatibile con le versioni precedenti (probabilmente funzionerà anche su IE5) e funziona. Nessun problema con il posizionamento o i galleggianti.
Quindi chiunque può fare l'equivalente senza tavoli?
I requisiti sono:
- Retrocompatibile: per FF2 e IE6;
- Ragionevolmente coerente: attraverso diversi browser;
- Centrato verticalmente: il pulsante e il titolo hanno altezze diverse; e
- Flessibile: consente un controllo ragionevolmente preciso sul posizionamento (imbottitura e / o margine) e sullo styling.
Come nota a margine, oggi mi sono imbattuto in un paio di articoli interessanti:
EDIT: Permettetemi di approfondire la questione del galleggiante. Questo tipo di lavori:
<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>Grazie ad Ant P per la overflow: hiddenparte (ancora non capisco perché). Ecco dove entra in gioco il problema. Diciamo che voglio che il titolo e il pulsante siano centrati verticalmente. Questo è problematico perché gli elementi sono di diversa altezza. Confronta questo 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>che funziona perfettamente.