Ok, j'ai eu un simple problème de mise en page il y a une semaine ou deux. À savoir les sections d'une page nécessitaient un en-tête:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
Des trucs assez simples. Le fait est que la haine des tables semble avoir pris le dessus dans le monde du Web, ce qui m'a rappelé quand j'ai demandé Pourquoi utiliser des balises de listes de définitions (DL, DD, DT) pour les formulaires HTML au lieu de tableaux? Maintenant, le sujet général des tables vs divs / CSS a déjà été discuté, par exemple:
Donc, cela ne vise pas à être une discussion générale sur CSS vs tableaux pour la mise en page. C'est simplement la solution à un problème. J'ai essayé différentes solutions à ce qui précède en utilisant CSS, notamment:
- Flottez à droite pour le bouton ou un div contenant le bouton;
- Position relative du bouton; et
- Position relative + absolue.
Aucune de ces solutions n'était satisfaisante pour différentes raisons. Par exemple, le positionnement relatif a entraîné un problème de z-index où mon menu déroulant est apparu sous le contenu.
J'ai donc fini par revenir à:
<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>
Et cela fonctionne parfaitement. C'est simple, aussi rétrocompatible que possible (cela fonctionnera probablement même sur IE5) et cela fonctionne juste. Pas de soucis avec le positionnement ou les flotteurs.
Quelqu'un peut-il donc faire l'équivalent sans tables?
Les exigences sont:
- Rétrocompatible: vers FF2 et IE6;
- Raisonnablement cohérent: sur différents navigateurs;
- Centré verticalement: le bouton et le titre sont de hauteurs différentes; et
- Flexible: permet un contrôle raisonnablement précis du positionnement (rembourrage et / ou marge) et du style.
En passant, je suis tombé sur quelques articles intéressants aujourd'hui:
- Pourquoi CSS ne devrait pas être utilisé pour la mise en page ; et
- Tableaux vs CSS: les trolls CSS ont commencé
EDIT: Permettez-moi d'élaborer sur la question du flotteur. Ce genre de travaux:
<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>
Merci à Ant P pour le overflow: hiddenrôle (je ne comprends toujours pas pourquoi). Voici où le problème entre en jeu. Disons que je veux que le titre et le bouton soient centrés verticalement. Ceci est problématique car les éléments sont de hauteur différente. Comparez ceci à:
<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>
qui fonctionne parfaitement.