Кросс-браузерность
Понятие "кросс-браузерность" подразумевает, что информация, находящейся на Web-странице, отображается одинаково в любом из современных браузеров. К сожалению, не все браузеры одинаково воспримают то, что написано в стилевом файле, устанавливая для некоторых элементов свои отступы, границы, межстрочные интервалы и т.п. В результате информация, по-разному обработанная, по-разному и отображается на Web-странице, не всегда так, как это было задумано их создателем.
Так браузер Internet Explorer за ширину блока принимает только величину аргумента width, а Firefox устанавливает ширину блока с учетом параметров width, border, padding и margin. Есть элементы, которые некоторые браузеры просто игнорируют, другие работают с ними без проблем.
С полями и отступами разобраться несложно. Чтобы содержание Web-страницы одинаково отображалось в различных браузерах, обнуляем значения полей и отступов для элементов, а затем, по мере написания правил стиля, для каждого элемента устанавливаем свои, конкретные, значения:
<style type="text/css">html, body, div, p, table, td, tr, th, ul, ol, li, h1, h2, h3, form, img {
margin: 0; /* отступы для браузера IE */
padding: 0; /* поля для браузера Firefox */
border: 0
}
</style>
Такую запись мы вставили в стилевой файл, когда собирали страницу, состоящую из горизонтальных блоков. Теперь усложним задачу.
Верстаем макет из 2-х колонок
Страницы сайта могут быть фиксированной ширины, а могут верстаться по "резиновому" принципу, растягиваясь или сжимаясь под ширину окна браузера. Верстка "резиновым" макетом конечно предпочтительнее, так как, независимо от размера экрана монитора, использует все доступное пространство окна браузера.
Задача 2: Создать "резиновый" макет на две колонки с "шапкой" и "подвалом". Область основного содержимого (контента) справа, вторая колонка (меню) - слева.
Рассмотрим вариант, когда левая колонка "menu" имеет определенный размер - 160 px, а ширина правой колонки устанавливается автоматически, исходя из ширины окна браузера, и занимает всю свободную ширину страницы минус пространство, необходимое для панели "меню".
Исходный код:
<html>
<head>
</head>
<body>
<div id="header">Шапка</div>
<div id="menu">
<li><a href="link1.html">ссылка 1</a></li>
<li><a href="link2.html">ссылка 2</a></li>
<li><a href="link3.html">ссылка 3</a></li>
<li><a href="link4.html">ссылка 4</a></li>
</div>
<div id="content">
<h3>Задача: 2</h3>
<p>Создать "резиновый" макет на две колонки с "шапкой" и "подвалом".</p>
</div>
<div id="footer">подвал</div>
</body>
</html>
Для блока "menu" используем стилевой параметр float, определяющий по какой стороне блок будет выравниваться, при этом остальные элементы будут обтекать его. Параметр float, имея значения аргументов left и right, определяет с какой стороны будет располагаться обтекаемый объект по отношении к обтекающему, что позволит состыковывать один слой с другим по горизонтали.
В нашем случае выбираем аргумент left, при этом незабываем устанавить отступ для правой колонки, значение отступа должно быть равно ширине левой колонки. Отступы можно задавать как в пикселях, так и в процентах.
