Работа с CSS: основы (часть 3)

Вот и подоспела третья статья из цикла «Работа с CSS: основы». Если ваши познания каскадных таблиц стилей оставляют пока желать лучшего, и вы не читали предыдущие статьи, то вот вам ссылки:

Итак — сегодня мы с вами сделаем обычную раскладку из трех колонок — левой, правой и центральной. Примерно такую же, как изображена на рисунке. Сделаем ее растягивающейся — так сейчас модно. Левая колонка будет фиксированной ширины 250px, а правая и центральная — будут зависеть от ширины окна. Будем писать в соответствии со стандартом W3C HTML 4.01 (для этого укажем соответствующий doctype).

HTML-код будет такого вида:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
   ...
   </head>
   <body>
      <div id="header">
         header
      </div>
      <div id="container">
         <div id="left">
            left
         </div>
         <div id="right">
            right
         </div>
         <div id="content">
            content
         </div>
      </div>
      <div id="footer">
         footer
      </div>
   </body>
</html>

Для начала создадим html-файл с приведенным кодом, подключим к нему файл стилей. Откроем страничку в браузере(-ах), откроем css-файл в редакторе и начнем ваять.

Расцветим для наглядности все блоки фонами разных цветов. Можно использовать и границы, но тогда увеличится шиирина блоков:

#header { background: #CCCCFF }
#content { background: #CCFFFF }
#left { background: #CCFFCC }
#right { background: #FFFFCC }
#footer { background: #FFCCCC }

Уберем ненужные отступы у body, которые присутствуют в стилях браузеров по умолчанию:

#body { margin: 0; padding: 0; }

Header и footer — у нас обычные блоки во всю ширину окна с заданной высотой. Стили для них элементарные:

#header { height: 100px; }
#footer { height: 100px; }

Левую колонку прижмем к левому краю, а правую к правому и укажем нужную ширину каждой.

#left { float: left; width: 250px; }
#right {float: right; width: 20%; }

Заставим контейнер (#container) облегать флоатнутые левую и правую колонки. Таким образом он не будет схлопываться, когда центральная часть меньше по высоте, чем #left и #right:

#container { overflow: hidden; width: 100%; }

Теперь укажем внешние отступы центральной части, величиной в ширину левой и правой колонок:

#content { margin-left: 250px; margin-right: 20%; }

Ну вот, предварительная раскладка готова. Если поместить содержимое в блоки #left, #right и #content (или указать им временную высоту), наша страничка примет такой вид:

Когда мы делали двухколоночную раскладку, мы научились прижимать #footer к низу окна. Давайте сделаем это в данном примере:

html { height: 100%; }
body { min-height: 100%; position: relative; }
*html body { height: 100%; }
#container { padding-bottom: 100px; }
#footer {
   clear: both;
   position: absolute;
   bottom: 0;
   width: 100%;
}

Получим:

Вот и все — раскладка блоков готова. Предлагаю теперь сделать, чтобы наша страница имела минимальную ширину, например, 1000px. Это значит, что когда мы сожмем окно браузера меньше 1000px, появится горизонтальный скролл. В нормальных браузерах достаточно будет указать такое правило:

body { min-width: 1000px; }

Но ИЕ6 и тут подводит — он не понимает свойства min-width. Эмулировать min-width в ИЕ6 можно используя конструкцию expression. Другие браузеры ее не понимают, но чтобы не возникало лишней ошибки парсера css, напишем ее только для ИЕ6:

*html body {
   width: expression((document.documentElement.clientWidth < 1000) ? '1000px' : '100%');
}

Expression вычисляет с помощью Javascript-а значение: если ширина окна меньше 1000, делаем ее равной 1000px, иначе пусть будет равна 100%. Теперь и браузер Internet Explorer 6 не ломает страницу при чрезмерном сжатии окна. Абсолютно аналогично можно указать минимальную высоту страницы, но нам это не нужно.

Стоит еще упомянуть о том, что если есть возможность, лучше использовать "условные комментарии", вместо "Star Hack". Например, вместо такого варианта...

<style type="text/css">
*html body {
   width: expression((document.documentElement.clientWidth < 1000) ? '1000px' : '100%');
   height: 100%;
}
</style>

...писать так:

<!--[if IE 6]>
<style type="text/css">
body {
   width: expression((document.documentElement.clientWidth < 1000) ? '1000px' : '100%');
   height: 100%;
}
</style>
<![endif]-->

Теперь все готово — полный результат можно посмотреть в исходном коде прикрепленного html-файла. Можно использовать его как структуру или начальный шаблон для верстки ваших макетов...

Прикрепленный файл	Размер
trehkolono4naya-raskladka.html	1.73 кб

Публикаций —	121
Комментариев —	621
Пользователей —	46

Статьи и справочные
материалы

Поискать на сайте

Навигация

Цитаты и афоризмы:

Туча тегов

Вход в систему