Web-Anatomy.Ru

Десятилетию Рунета посвящается

К выпуску № 15 («Голосуем за стабильность»)

Нижеследующий пример наглядно демонстрирует, каким образом можно законными и не слишком мудреными методами реализовать на веб-странице полноценный блок с полями и рамкой, имеющий постоянные линейные размеры в пикселях во всех сколько-либо распространенных сегодня графических браузерах.

Идея заключается в том, что рамку и пустые поля можно сымитировать при помощи наложенных друг на друга слоев с нулевыми значениями параметров padding и border-width.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Завидное постоянство</title>
<style type="text/css">
<!--
html, body {margin: 0px; padding: 0px; width: 100%; height: 100%}
body {color: #000; background-color: #fff}
div {position: absolute; overflow: hidden; border: none; margin: 0px; padding: 0px}
#block-border {top: 61px; left: 61px; width: 200px; height: 200px; background-color: #6c9}
#block-padding {top: 64px; left: 64px; width: 194px; height: 194px; background-color: #ccfff0}
#block-content {top: 84px; left: 84px; width: 154px; height: 154px; font-size: 80%; text-align: justify}
-->
</style>
</head>

<body>
<div id="block-border">&nbsp;</div>
<div id="block-padding">&nbsp;</div>
<div id="block-content">Эта область имеет размеры 200&#215;200 пикселей с учетом полей и рамки. И так будет всегда. Несмотря на все происки врагов.</div>
</body>

</html>

Недостатков у подобного подхода как минимум три.

Во-первых, логика документа страдает из-за наличия слоев, не содержащих полезной информации. Это чем-то похоже на вложенные таблицы, с той лишь маленькой разницей, что наша страница ни в чем не противоречит стандарту HTML 4.01 Strict.

Во-вторых, рамку такого вот «тройного тулупа» нельзя сделать пунктирной, точечной, двойной (хотя нет, двойной — пожалуйста, но только тулуп при этом перестанет быть тройным :-)), поскольку свойство border-style для нее по понятным соображениям неприменимо.

Наконец, в-третьих, содержимое такого блока проблематично сделать прокручивающимся при помощи наделения свойства overflow значением scroll. То есть, нет, с самой прокруткой-то как раз никаких особенных проблем не возникает — все дело только в том, что скроллбары при этом будут вплотную прилегать к тексту.

Разумеется, описанный выше способ преодоления несовместимостей — не единственный. Практикующие веб-разработчики могут поделиться изрядным количеством разнообразных хитростей разного уровня сложности, но, так или иначе, замысловатость и запутанность — это вынужденные меры переходного периода, не самым лучшим образом сказывающиеся на логической стройности кода. Но пока они реально помогают жить.

[Перейти к оглавлению]

© Артемий Ломов, 2004, 2005.