1. Я затратил время на разбор кода страницы.
2. Я хотел использовать CSS и только CSS для оформления страницы
3. Я хотел, чтобы страница выглядела в точности, как оригинал.

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

Большая картинка

Вот главная страничка.

Сразу видно, что она состоит из HEADER'a и основной части, которая разбита на две колонки (желтая и зеленая). Отсюда сразу возникает вопрос: что использовать для разбиения на две колонки, плавающие <DIV> или таблицы? Я решил использовать таблицу:

<table border="0" cellpadding="0" cellspacing="0" width="675" align="center">
<tr valign="top">
<td width="200" valign="top" style="border-right: 3px solid #999999;">

<!-- left side of page goes here -->
</td>

<td width="465">

<!-- right side of page goes here -->

</td> </tr> </table>


Заметьте, что первая ячейка имеет border справа. Я не хотел делать линию, вставляя еще одну пустую ячейку шириной в один пиксель, таблицы здесь не для этого.

Центрированные таблицы

Таблицу приходится использовать в области "Hello Guest"

Можно делать вложенными DIV-ами, чтобы слова Sign Up были справа, можно таблицами. Я остановился на таблицах. Осталось отцентрировать таблицу. И эти два варианта не работали

<!-- attempt 1 -->
<table border="0" style="text-align:center;">
<!-- table contents -->
</table>

<!-- attempt 2 -->
<div style="text-align:center;">
<table border="0">
<!-- table contents -->
</table>
</div>

Не работали потому, что text-align действует только на инлайновые элементы, но таблица - блоковый элемент. А вот так все заработало:

<table border="0" style="margin-left:auto; margin-right:auto;">
<!-- table contents -->
</table>

Ключевое слово auto позволяет браузеру самому рассчитывать отступы, согласно очень сложным правилам.

Таблицы для табличных данных

Без таблиц не обойтись еще в одном месте



В коде Yahoo! Использовались вложенные таблицы для размещения точек и текста, который устанавливался в size="2" и выделялся жирным (bold). Можно всю эту жуть заменить на три стиля:

.size2 { font-size: 95%; }
.bold {font-weight: bold; }
.list-spacing { margin-top: 0px; margin-bottom: 4px; line-height: 125%; }

<td width="33%">
<p class="size2 bold list-spacing">
&nbsp; &#183; &nbsp; <a href="#">United States</a><br/>
&nbsp; &#183; &nbsp; <a href="#">Africa</a><br/>
&nbsp; &#183; &nbsp; <a href="#">Antarctic</a><br/>
&nbsp; &#183; &nbsp; <a href="#">Arctic</a><br/>
&nbsp; &#183; &nbsp; <a href="#">Asia</a><br/>
</p> </td>