Иллюстрированный самоучитель по созданию сайтов

Оформление веб-страницы с использованием стилей

Как можно организовывать загрузку разделов

Обратите внимание на то, что для списка ссылок мы определили класс Ink. Пока что определения свойств этого класса у нас нет, но ясно, что блок ссылок должен выглядеть как-то не так, как все остальное. Поскольку мы уже вроде бы находимся в разделе “Услуги” (см. содержание странички), гиперссылка на него отсутствует.

То, что у нас получилось, показано на рис. 4.5. Пока это выглядит не очень привлекательно. Прежде всего, давайте определимся с расположением блока ссылок на странице.

Рис. 4.5. Добавим на страничку блок гиперссылок:

Мы немного отступили от края странички, хотя можно было указать, конечно, и нулевые значения left и top. Заодно можно сразу указать свойство text-align: center; для центрирования нашего заголовка. В тексте документа напишем:

На всякий случай мы здесь используем неразрывный пробел вместо обычного, чтобы избежать переноса слова “Лентяй” на следующую строку. Затем определим класс Ift для левой части странички:

Здесь нужно немного пояснить. Во-первых, мы определили отступ от верх него края в 160 пикселов, чтобы оставить место для заголовка. Кроме того, свойство width определяет ширину этого блока так, чтобы оставить немного места справа для блока гиперссылок. Мы могли не определять свойство height, однако с его помощью можно "вогнать" всю информацию в пределы экрана, а ту, что не поместится, доставать с помощью дополнительной полосы прокрутки, определив для этого свойство overflow: auto. Тогда назва ние фирмы будет всегда оставаться в верхней части экрана. Можно также было определить свойство overflow: scroll;, и тогда дополнительная полоса прокрутки (для левого блока) была бы видна в любом случае. Значение auto заставляет браузер показывать ее только тогда, когда это необходимо, то есть, когда есть информация, не помещающаяся в пределах блока.

В тексте документа, соответственно, заключим всю основную информацию в блок класса Ift:

И, наконец, определим класс rght для блока гиперссылок, который будет располагаться справа:

Поскольку гиперссылки должны быть хорошо заметны на фоне всего остального, мы сразу определяем для них более крупный шрифт (font-size: large;). Значение свойства top должно быть таким же, как и у класса Ift, чтобы оба блока расположились на одинаковой высоте. Значение left выбрано таким, чтобы слева осталось достаточно места для информационного блока. Теперь присвоим класс rght нашему блоку гиперссылок: