Ok, j'ai eu une mise en page simple problème a une ou deux semaines. À savoir les sections d'une page a besoin d'un en-tête:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
Assez simple. Chose est le tableau de la haine semble avoir pris le dessus dans le monde du Web, qui m'a rappelé quand j'ai demandé Pourquoi utiliser des listes de définitions (DL,DD,DT) des balises pour les formulaires HTML au lieu de tables? Maintenant, sur le thème général de tables vs vrd/CSS a déjà été discuté, par exemple:
Donc, ce n'est pas destiné à être une discussion générale à propos de CSS vs tableaux de mise en page. C'est tout simplement la solution à un problème. J'ai essayé différentes solutions à l'aide de CSS, y compris:
- Flotteur à droite du bouton ou un div contenant le bouton;
- La Position relative pour le bouton; et
- La Position relative de+absolue.
Aucune de ces solutions n'étaient satisfaisants pour des raisons différentes. Par exemple, le positionnement relatif a entraîné un z-index problème où mon menu déroulant, est apparu dans le contenu.
J'ai donc fini par retourner à:
<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 il fonctionne parfaitement. C'est simple, en tant que descendante de compatibile qu'il obtient (qui fonctionnent probablement même sur IE5) et il fonctionne, tout simplement. Pas vous embêter avec le positionnement ou de flotteurs.
Si quelqu'un peut faire l'équivalent, sans tables?
Les exigences sont les suivantes:
- Compatible: pour FF2 et IE6;
- Raisonnablement cohérent: à travers les différents navigateurs;
- Centrée verticalement: le bouton et le titre sont de tailles différentes; et
- Flexible: permettent raisonnablement d'un contrôle précis sur le positionnement (de remplissage et/ou de la marge) et le style.
Sur une note de côté, je suis tombé sur quelques articles intéressants aujourd'hui:
EDIT: Permettez-moi d'insister sur le flotteur question. Ce type d'œuvres:
<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>
Grâce à Ant P pour l' overflow: hidden partie (ne comprends toujours pas pourquoi). C'est ici que le problème vient de. Dire que je veux le titre et le bouton pour être centrée verticalement. C'est problématique parce que les éléments sont de hauteur différente. Comparez cela à:
<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>
ce qui fonctionne parfaitement.
