Гаразд, у мене була проста проблема з компонуванням тиждень-два тому. А саме розділи сторінки потребували заголовка:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+Досить прості речі. Справа в тому, що ненависть до таблиці, здається, перейняла у Веб-світі, про що мені нагадали, коли я запитав Навіщо використовувати теги списків визначення (DL, DD, DT) для форм HTML замість таблиць? Тепер загальна тема таблиць проти divs / CSS раніше обговорювалася, наприклад:
Таким чином, це не призначене для загальної дискусії щодо CSS проти таблиць для компонування. Це просто рішення однієї проблеми. Я спробував різні рішення вищезазначеного за допомогою CSS, включаючи:
- Поплавок праворуч на кнопку або div, що містить кнопку;
- Позиція відносно кнопки; і
- Позиція відносна + абсолютна.
Жодне з цих рішень не було задовільним з різних причин. Наприклад, відносне позиціонування призвело до проблеми з індексом z, де моє спадне меню з'явилося під вмістом.
Тому я повернувся до:
<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>І це прекрасно працює. Це просто, як відстало сумісне, як це стає (це, мабуть, буде працювати навіть на IE5), і це просто працює. Нічого не возиться з позиціонуванням або поплавцями.
Тож хто може зробити еквівалент без таблиць?
Вимоги такі:
- Зворотно сумісні: до FF2 та IE6;
- Розумно послідовні: у різних браузерах;
- Вертикально по центру: кнопка та назва мають різну висоту; і
- Гнучкі: дозволяють досить точно контролювати позиціонування (накладення та / або запас) та стилізацію.
У бічній записці я сьогодні натрапив на пару цікавих статей:
EDIT: Дозвольте детальніше розглянути питання про поплавці. Цей вид робіт:
<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>Завдяки Ant P за свою overflow: hiddenчастину (все-таки не зрозумію чому). Ось де проблема виникає. Скажіть, я хочу, щоб заголовок і кнопка були вертикально центровані. Це проблематично, оскільки елементи мають різну висоту. Порівняйте це з:
<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>яка прекрасно працює.