Хорошо, неделю или две назад у меня была простая проблема с макетом. А именно разделы страницы нуждались в заголовке:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
Довольно простые вещи. Дело в том, что ненависть к таблицам, похоже, взяла верх в веб-мире, о чем я вспомнил, когда спросил, зачем использовать теги списков определений (DL, DD, DT) для HTML-форм вместо таблиц? Теперь общая тема таблиц и div / 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;
- Достаточно согласованно: в разных браузерах;
- По центру по вертикали: кнопка и заголовок разной высоты; и
- Гибкость: позволяет достаточно точно контролировать позиционирование (отступы и / или поля) и стиль.
Кстати, сегодня я наткнулся на пару интересных статей:
РЕДАКТИРОВАТЬ: Позвольте мне подробнее остановиться на проблеме с плавающей точкой. Такого рода работы:
<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>
который отлично работает.