HTML верстка. Урок 7: Заполнение ячейки TextЕсли у вас хватило выдержки дочитать до 7-го урока, то займемся ячейкой Text.
Ее содержимое можно разделить на 3 таблицы, которые последовательно идут друг за другом.
Создадим таблицу Form для формы. Главная сложность здесь - сделать отступы от края ячейки Text и при этом растянуть таблицу Form на 100% ширину. Указать padding-left и padding-right для ячейки Text мы не можем, т.к. следующая таблица - с заголовком - должна прижиматься к границам ячейки. Если сделать для таблицы Form width=100%, то не получится указать margin-left и margin-right: в IE таблица уйдет куда-то за границы экрана. Значит, укажем только margin-top и margin-bottom, а отступы слева и справа реализуем за счет свойства ячеек padding-left и padding-right. В CSS можно писать параметры padding и margin в формате: padding: top right bottom left. Например: padding: 0px 1px 2px 3px;. Воспользуемся этим, чтобы сократить наш html-код.
Для таблицы и ячейки с заголовком можно воспользоваться уже созданными в уроке 6 классами hdrtab и hdr. Добавили только width="100%", чтобы ячейка hdr растягивалась на 100%-ю ширину и т.о., подтягивала надпись "Our Best Proposals" к левому краю:
Для ячеек третьей таблицы - назовем ее Content - воспользуемся созданным в уроке 6 классом newsitem. Для ячеек с изображениями создадим дополнительный класс image, в котором пропишем выравнивание по центру ячейки. Плюс сами изображения обведем серой линией шириной 1 пкс. Для заголовка используем уже имеющийся класс hdr2. Для таблицы Content укажем отступы (margin) от границ ячейки Text. Сама таблица не будет 100%-й ширины (т.к. тогда margin не работает корректно). Растягивать ее на всю ячейку будет текст, который в ней содержится.
Ячейка Text заполнена. Посмотрите html-страницу, а также полный текст файлов index.html и style.css. Синим цветом в файлах помечен html-код, который мы добавили на этом уроке. Мои поздравления!:) Вы одолели 7 непростых уроков и теперь можете сами делать качественную html-верстку. Если у вас появятся вопросы - присылайте их по email, и на этом сайте появятся ответы на них. Урок 1 | Урок 2 | Урок 3 | Урок 4 | Урок 5 | Урок 6 | Урок 7 | На главную страницу |