Ok, ich hatte vor ein oder zwei Wochen ein einfaches Layoutproblem. Abschnitte einer Seite benötigten nämlich eine Überschrift:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+Ziemlich einfaches Zeug. Der Hass auf Tabellen scheint in der Web-Welt Einzug gehalten zu haben, woran ich erinnert wurde, als ich fragte, warum anstelle von Tabellen Tags für Definitionslisten (DL, DD, DT) für HTML-Formulare verwendet werden sollen. Nun wurde das allgemeine Thema Tabellen gegen Divs / CSS bereits erörtert, zum Beispiel:
- DIV gegen Tabelle ; und
- Tabellen statt DIVs .
Dies ist also keine allgemeine Diskussion über CSS im Vergleich zu Tabellen für das Layout. Dies ist einfach die Lösung für ein Problem. Ich habe verschiedene Lösungen für das oben Gesagte mit CSS ausprobiert, darunter:
- Schweben Sie nach rechts für die Schaltfläche oder ein Div, das die Schaltfläche enthält.
- Position relativ für die Schaltfläche; und
- Position relativ + absolut.
Keine dieser Lösungen war aus verschiedenen Gründen zufriedenstellend. Zum Beispiel führte die relative Positionierung zu einem Z-Index-Problem, bei dem mein Dropdown-Menü unter dem Inhalt angezeigt wurde.
Also ging ich zurück zu:
<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>Und es funktioniert perfekt. Es ist einfach, so abwärtskompatibel wie es nur geht (das wird wahrscheinlich sogar unter IE5 funktionieren) und es funktioniert einfach. Kein Herumspielen mit Positionieren oder Schweben.
Kann jemand das Äquivalent ohne Tabellen tun?
Die Anforderungen sind:
- Abwärtskompatibel: zu FF2 und IE6;
- Ziemlich konsistent: über verschiedene Browser hinweg;
- Vertikal zentriert: Die Schaltfläche und der Titel sind unterschiedlich hoch. und
- Flexibel: Ermöglichen eine einigermaßen präzise Kontrolle über Positionierung (Polsterung und / oder Rand) und Styling.
Nebenbei bemerkt bin ich heute auf einige interessante Artikel gestoßen:
- Warum CSS nicht für das Layout verwendet werden sollte ; und
- Tabellen gegen CSS: CSS-Trolle beginnen
EDIT: Lassen Sie mich auf das Float-Problem näher eingehen. Diese Art von Arbeiten:
<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>Vielen Dank an Ant P für den overflow: hiddenTeil (verstehe immer noch nicht warum). Hier kommt das Problem ins Spiel. Angenommen, Titel und Schaltfläche sollen vertikal zentriert sein. Dies ist problematisch, da die Elemente unterschiedlich hoch sind. Vergleichen Sie dies mit:
<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>das funktioniert perfekt.