Дронов Владимир
Шрифт:
Атрибуты стиля border-left, border-top, border-right и border-bottom позволяют задать все параметры для, соответственно, левой, верхней, правой и нижней стороны рамки:
border-left|border-top|border-right|border-bottom: <толщина> <стиль> <цвет> | inherit
Во многих случаях эти атрибуты стиля оказываются предпочтительнее:
H1 { border-bottom: 5px double red }
"Глобальный" атрибут стиля border позволяет задать все параметры сразу для всех сторон рамки:
border: <толщина> <стиль> <цвет> | inherit
TD, TH { border: thin dotted black }
ВНИМАНИЕ!
Рамки также увеличивают размеры элемента Web-страницы. Поэтому, если мы создадим рамки у блочных контейнеров, формирующих дизайн Web-страницы, то должны будем соответственно изменить размеры этих контейнеров, иначе они сместятся, и дизайн будет нарушен.
Представление для нашего Web-сайта, часть 6
Что ж, отступы и рамки мы создавать научились. По крайней мере, теоретически. Настала пора применить полученные знания на практике.
Прежде всего, сделаем отступы между контейнерами, формирующими дизайн наших Web-страниц, и между границами этих контейнеров и их содержимым.
— Внешний отступ между краями окна Web-обозревателя и содержимым Web- страницы равен нулю. Пусть пространство в окне Web-обозревателя используется максимально полно.
НА ЗАМЕТКУ
По умолчанию каждый Web-обозреватель создает свои отступы между краями своего окна и содержимым Web-страницы.
— Внутренние отступы в контейнере с заголовком Web-сайта (cheader) слева и справа — по 20 пикселов. Нам придется отодвинуть текст заголовка от краев окна Web-обозревателя, иначе заголовок будет выглядеть некрасиво.
— Внешний отступ между контейнерами с полосой навигации (cnavbar) и с основным содержимым (cmain) — 10 пикселов.
— Внутренние отступы у контейнера с основным содержимым (cmain) со всех сторон — по 5 пикселов.
— Внутренний отступ у контейнера с основным содержимым (cmain) сверху — 10 пикселов. Так мы отделим его от контейнеров cnavbar и cmain.
— Внутренние отступы в контейнере со сведениями об авторских правах (ccopyright) слева и справа — по 20 пикселов. Текст сведений об авторских правах также следует отодвинуть от краев окна Web-обозревателя.
Приведенные значения отступов получены автором в результате экспериментов. Вы можете задать другие.
Теперь разделим все четыре контейнера рамками.
— Контейнер cheader получит рамку с одной нижней стороной.
— Контейнер cmain — рамку с одной левой стороной.
— Контейнер ccopyright — рамку с одной верхней стороной.
Рамки мы сделаем тонкими и точечными. В качестве цвета зададим для них #B1BEC6 (светло-синий).
В листинге 11.3 приведен исправленный фрагмент CSS-кода таблицы стилей main.css, реализующий выбранные нами параметры отступов и рамок.
Листинг 11.3
BODY { color: #3B4043; background-color: #F8F8F8; font-family: Verdana, Arial, sans-serif; margin: 0px }
.
#cheader { width: 1010px; padding: 0 20px; border-bottom: thin dotted #B1BEC6 }
#cnavbar { width: 250px; height: 570px; float: left; margin-right: 10px }
#cmain { width: 760px; height: 570px; float: left; overflow: auto; padding: 5px; border-left: thin dotted #B1BEC6 }
#ccopyright { width: 1010px; clear: both; padding: 10px 20px 0px 20px; border-top: thin dotted #B1BEC6 }
Давайте разберем его.
Чтобы убрать отступ между границами окна Web-обозревателя и содержимым Web-страницы, мы использовали атрибут стиля margin. Его мы поместили в стиль переопределения тега <BODY> и дали ему значение 0 пикселов:
BODY { color: #3B4043; background-color: #F8F8F8; font-family: Verdana, Arial, sans-serif; margin: 0px }
В именованном стиле cheader, привязанном к одноименному контейнеру, мы задали внутренние отступы слева и справа, равные 20 пикселам, и рамку с одной только нижней стороной. Эта рамка отделит данный контейнер от нижележащих:
#cheader { width: 1010px; padding: 0 20px; border-bottom: thin dotted #B1BEC6 }
Кроме того, мы задали в качестве ширины этого контейнера абсолютное значение.
Вспомним: при выводе на экран контейнера с относительной шириной Web- обозреватель сначала вычислит абсолютное значение его ширины, а потом добавит к нему величину отступов. В результате чего контейнер станет шире, чем окно Web-обозревателя, и в окне появятся полосы прокрутки, что нам совсем не нужно. Поэтому для ширины контейнера лучше задать абсолютное значение, подобрав его так, чтобы контейнер гарантированно поместился в окно Web-обозревателя по ширине.