При помощи блочной вестки СSS , сверстала страницу фиксированим размером 1024 на 768. Во браузерах FF,Opera,Chrome выглядет одинаково, но IE браузере header растянулся в длину на 1000 пикселей, хотя должен составлять 204 пикселя.При этом content,footer сохранил заданые ему размеры. В коде CSS я указала высоту header 204пиксл. Как исправить, что ещё нужно указать?
1 ответ
XHTML код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS верстка сайта макет в три колонки</title>
<link rel="stylesheet" type="text/css" media="screen" href="/style.css" />
<link rel="stylesheet" type="text/css" media="print" href="/print.css" />
<script language="javascript" type="text/javascript">
Тэгом <link> к странице подгружаются CSS стили из внешних файлов. Общий стиль style.css лежит в корне сайта (как правило, это папка /public_html) и предназначен для компьютерных браузеров (media="screen"). Стиль print.css будет использоваться для печати, об этом чуть ниже. Далее с помощью JavaScript определяем браузер пользователя и, если это Internet Explorer 5, ему отдается CSS стиль из файла ie5.css.
Первым следует div-блок header, предназначенный для заголовка страницы. В служебном блоке main нет текста, но в него вложено 4 блока: content для основного текста страницы, leftmenu и rightmenu для левого и правого меню соответственно и блок footer для «подвала» макета.
Все блоки лишь определены в XHTML коде, за их свойства и расположение отвечает CSS. Общий CSS стиль
body {
margin: 0px;
padding: 0px;
background-color: #f0f0f0;
}
Первым делом определимся со стилем <body> (т. е. окна браузера) — убираем внешние и внутренние отступы, добавляем фоновый цвет (#f0f0f0 — светло-серый).
#header {
width: 98%;
margin: 0px;
padding: 1%;
background-color: orange;
}
Для блока заголовка удалены внешние отступы (margin: 0px;), выбрана оранжевая заливка и ширина в 100% родительского элемента (им является <body>). 100% складывается из 98% ширины содержимого блока и по 1% для padding-left и padding-right. Сокращенная запись padding: 1%; задает отступ со всех четырех сторон (top, left, bottom, right).
Блок будет располагаться в нормальном потоке, что нас пока устраивает, поэтому в позиционировании нет необходимости.
#main {
position: relative;
width: 100%;
margin: 0px;
padding: 0px;
background-color: #ccc;
overflow: hidden;
}
Служебный блок main является контейнером остальных блоков с содержимым. У него нет границ и отступов, а width: 100% — следовательно, ширина main равна ширине окна браузера. В блоке не будет текста, но он очень важен для нашего макета. Во-первых, для абсолютного позиционирования CSS блоков правого и левого меню, во-вторых, для создания серого (#ccc) фона меню на всю высоту страницы.
Как упоминалось, position: relative означает смещение блока относительно его расположения в нормальном потоке. Но раз не задана величина смещения, блок будет расположен аналогично нормальному потоку CSS. Объявление position: relative; необходимо для абсолютного позиционирования блоков боковых меню. Как вы помните, абсолютное позиционирование в CSS отсчитывается от окна браузера или родительского блока, который является абсолютно или относительно позиционированным.
Для main задан серый фон. Сделано это для полного закрашивания блоков боковых меню. В CSS, судя по всему, невозможно задать высоту (height) блока в процентах от окна браузера, поэтому высота определяется в зависимости от объема содержимого. То есть боковые колонки меню будут иметь разную высоту, и задавать фон для них не имеет смысла. Поэтому мы заливаем фоном main. Далее зальем другим цветом блок содержимого и «подвал» макета, а колонки с прозрачным фоном визуально будут одинаковой высоты. Дешево и сердито.
Свойство overflow: hidden; необходимо, чтобы убрать мелкий баг IE6. Internet Explorer 6 под управлением Windows XP с экранной XP темой (в случае классической темы Windows все нормально) считает, что страница не помещается полностью в окно браузера и добавляет полоску горизонтальной прокрутки. Прокручивается всего 1–2 пикселя, видимо XP-тема увеличивает ширину элементов интерфейса браузера, но он (браузер) этого понять не в состоянии…
Так или иначе, overflow: hidden; указывает, что содержимое, которое выходит за границы контейнера (жизненный пример — очень длинное слово в узком CSS блоке), обрезается и пользователю не предоставляется возможности (полос прокрутки, например) это содержимое просмотреть. В нашем случае контейнером является блок main, шириной в 100% окна браузера, а содержимым — вложенные блоки.
#content {
width: 58%;
margin: 0px 20% 0px 20%;
padding: 1%;
background-color: #f0f0f0;
}
#footer {
width: 58%;
margin: 0px 20% 0px 20%;
padding: 1%;
background-color: orange;
}
CSS блоки основного содержимого и «подвала». Светло-серый фон для удобства чтения — белый фон и черный шрифт слишком контрастны и могут утомлять глаза. Для footer используется оранжевый. В остальном CSS описание блоков одинаковое.
Оба занимают всю ширину страницы. Ширина содержимого 58%. Внешние отступы (используется сокращенная запись в формате — margin: top left bottom right;) 20% слева и 20% справа. Плюс внутренняя отбивка содержимого от рамки блока в 1% сверху, слева, справа и снизу. Считаем горизонтальный размер CSS блока слева направо: 20% + 1% + 58% + 1% + 20% = 100%.
Таким образом, ширина footer и content составляет 100% от родительского блока main, который в свою очередь занимает 100% от body. Нюанс — внешние отступы margin составляют по 20% с каждой стороны, внешние отступы блока прозрачны, т. е. цветом не заливаются. CSS блоки content и footer занимают всю ширину окна и пока не совсем понятно, где взять место для боковых меню.
#leftmenu {
position: absolute;
top: 0px;
left: 0px;
width: 18%;
margin: 0px;
padding: 1%;
}
#rightmenu {
position: absolute;
top: 0px;
right: 0px;
width: 18%;
margin: 0px;
padding: 1%;
}
Ответ в position: absolute. Для абсолютного позиционирования не имеют значения нормальный поток и другие CSS блоки. Необходима точка отсчета, величина смещения по вертикали и горизонтали и ширина блока. Точкой отсчета может быть окно браузера, абсолютно или относительно позиционированный родительский CSS блок. Теперь ясно, зачем для блока main мы использовали position: relative и нулевое смещение.
Блок leftmenu (левая навигационная панель) позиционируется от CSS блока main, смещение сверху и слева — по 0 пикселей. Для rightmenu то же смещение, но сверху и справа. Ширина обоих блоков — по 20% (1% padding-left + 18% width + 1% padding-right) от родительского main. Фактически, leftmenu и rightmenu налагаются на блоки content и footer — точнее, на их прозрачные внешние границы margin!
Высота боковых меню зависит от содержимого. Меню не имеют фонового цвета, поэтому фоном для них служит серая заливка блока main. Margin'ы у content и footer прозрачны. Благодаря этому визуально боковые меню имеют одинаковую высоту и залиты серым цветом.
#content p, #leftmenu p, #rightmenu p {
margin-top: 0px;
}
#header p, #footer p {
margin-top: 0px;
margin-bottom: 0px;
}
Последние штрихи. Внутри блоков информация разбивается на абзацы тегом <p>. <p> — блочный элемент, у которого есть свои внешние поля. Internet Explorer 6 совмещает margin <p> и padding наших CSS блоков. А Opera и Mozilla их суммируют, в результате получается слишком большая «отбивка» текста сверху и снизу от границ блока. Этот код убирает вертикальные внешние отступы для элементов <p>, вложенных в CSS блоки макета.
-
1
-