Реферат: Блоки в документах

<inputtype="text" name="login" size="14" class="input" value="логин">&nbsp;

<inputtype="password" name="pass" size="14" class="input" value="пароль">&nbsp;

<inputtype="image" src="i/go.gif" alt="Войти">

</form>

Он будет отображаться браузером так, как показано на рис. 7.

Рис. 7 Форма без таблиц

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

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

Перейдем к второму типу формы входа для клиентов. Таблиц тоже будет достаточно простой. Первая строка содержит одну объединенную ячейку с полем для логина, а вторая строка содержит две ячейки:

<table cellpadding="0" cellspacing="0">

<form>

<tr>

<td colspan="2"><input type="text" name="login" size="14" class="input" value="логин"></td>

</tr>

<tr>

<td><input type="password" name="pass" size="14" class="input" value="пароль">&nbsp;</td>

<td><input type="image" src="i/go.gif" alt="Войти"></td>

</form>

</table>

Кажется, что все в порядке и должно работать. И оно работает в браузере InternetExplorer, но не работает в Mozilla и Opera. Например, в Mozilla форма будет выглядеть так, как показано на рис. 8

Рис. 8 Вид формы в браузере Mozilla

Как видите, поля слиплись из-за того, что расстояния между ячейками таблицы и отступы в ячейках обнулены. Форма смотрится неважно, поэтому надо как-нибудь раздвинуть поля. Если прописать в таблице атрибут cellspacing=”4”, то это решит проблему, но сдвинет все поля на четыре пикселя вправо. Часто это неприемлемо, потому что нарушается выравнивание элементов дизайна вдоль определенной вертикали, страница теряет целостность и может выглядеть несколько незаконченной. Дизайнеры сразу замечают диссонанс и страшно возмущаются, что совершенно справедливо.

Другой вариант решения – вставить после первого поля распорку, то есть невидимую картинку:

<tr>

<td colspan="2">

<input type="text" name="login" size="14" class="input" value="логин">

<br><img src="i/0.gif" width="1" height="4"></td>