Дата: 16th Окт,2008 Автор: admin
hasLayout, что это такое? Это свойство введено майкрософтовскими девелоперами когда они сели однажды на корпоративе и за рюмкой чая поняли, какой бажный браузер они написали. И чтобы как-то исправится, написали эту “заплатку” для веб-девелоперов, чтобы они имели возможность хоть как-то заставить браузер отображать html-код без глюков.
Поэтому читайте о нем или в оригинале, или же, спасибо добрым людям, которые перевели мануал, на русском.
Дата: 9th Окт,2008 Автор: admin
Итак, нам надо создать трехколоночный макет. При вертке таблицами, никакой проблемы нет и не могло быть - на то они и таблицы. Но мы то с вами знаем, что таблицы - для слабаков. Шучу. Таблицы - это уже прошлое. И нужно их использовать только для отображения табличных данных и ничего больше. Так что блоки, мои дорогие, и ничего кроме блоков.
Вернемся к нашим баранам, т.е. колонкам. Пусть слева у нас будет навигация, справа реклама и ссылки, а по средине – конечно же контент. Какие требования вынесем к макету?
1. «Резиновый» центр с боковыми колонками виксированной ширины.
2. Код центральной колонки должен идти выше боковых на странице – это большой плюс для СЕО.
3. Все колонки будут равняться по высоте на самую высокую.
4. Требуется только один дополнительный div для разметки.
5. Очень простой CSS с минимальных количеством хаков, ой, патчей.
Вот наш код HTML:
1
2
3
4
5
6
7
8
9
| <div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div> |
Как видим, все три колонки размещены в одном диве. Допустим теперь, что нам надо создать макет, левая колонка которого имеет ширину 200 пикселей, а правая – 150 пикселей. Ниже приведен CSS. В комментариях которого колонки обозначены аббревиатурами: центральная – CC, левая – LC и правая - RC.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| body {
min-width: 550px; /* 2x LC width + RC width */
}
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
#container .column {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}
#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
}
#footer {
clear: both;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
} |
При необходимости просто измените под себя эти значения. Этот метод работает во всех современных браузерах: Safari, Opera, Firefox, а также (правда, без хака не обошлось) IE6.
Как это работает?
Стратерия проста. Контейнер, в котором находятся наши колонки будет иметь «резиновую» ширину и фиксированный паддинг по бокам. Весь изюм в том, чтобы ширина левой колонки была равна левому паддингу, а ширина правой – правому.
Давай рассмотрим это все по шагам.
Шаг 1. Начало
Создаем наши три блока, из которых будет стостоять наша страница.
1
2
3
4
5
| <div id="header"></div>
<div id="container"></div>
<div id="footer"></div> |
Теперь в css для блока #container задаем левый и правый паддинги, значение которых должно совпадать с шириной будущих левой и правой колонок соответственно.
1
2
3
4
| #container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
} |
Наша разметка на этом шаге имеет следующий вид:
Шаг 2. Добавление колонок
Теперь, после первого шага добавим дивы для колонок.
1
2
3
4
5
6
7
8
9
| <div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div> |
Зададим ширину и float. Также мы должны задать clear: both для футера чтобы он был в самом низу.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| #container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
}
#right {
width: 150px; /* RC width */
}
#footer {
clear: both;
} |
После второго шага у нас получилось следующее:
Шаг 3: Размещаем левую колонку
Центральная колонка размещена на своем месте – там где и должна быть. Теперь нам надо как-то подвинуть левую колонку на свое место. Как это сделать? А очень просто. Для этого нам надо сделать всего два шага. Задать margin-left: -100%; При этом следует помнить, что 100% - это ширина центральной колонки.
1
2
3
4
| #left {
width: 200px; /* LC width */
margin-left: -100%;
} |
Посмотрим что у нас получилось после первого шага:
Чтобы «посадить» на место левую колонку, нужно для нее еже указать right равный ее ширине.
1
2
3
4
5
6
7
8
9
| #container .columns {
float: left;
position: relative;
}
#left {
width: 200px; /* LC width */
margin-left: -100%;
right: 200px; /* LC width */
} |
И о чудо – у нас все получилось!
Шаг 4: Размещаем правую колонку
Здесь все немножко проще, чем с левой. Задаем отрицательный margin-right, равный ширине правой колонки:
1
2
3
4
| #right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
} |
Как видим, все красиво и в нужном месте.
Шаг 5. Безопасный ресайз
Если мы сейчас будем уменьшать окно браузера, то колонки развалятся. Нужно предохраниться. Как это будем делать? Зададим минимальную ширину для body равную сумме минимальной ширины центральной колонки и ширин правой и левой.
1
2
3
| body {
min-width: 550px; /* 2x LC width + RC width */
} |
Но, как известно, min-width не работает для IE6. Как всегда, в самом инетресном месте нам ИЕ говорит свое «фе». Поэтому:
1
2
3
| * html #left {
left: 150px; /* RC width */
} |
Добавим по бокам паддинг для левой колонки. Пусть это будет 10 пикселей. Теперь нам в стилях придется уменьшить width – потому что реальная ширина колонки равна сумме width + padding (left и right)
1
2
3
4
5
6
| #left {
width: 180px; /* LC fullwidth - padding */
padding: 0 10px;
right: 200px; /* LC fullwidth */
margin-left: -100%;
} |
После манипуляций со всеми колонками, на css будет иметь следующий вид:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| body {
min-width: 630px; /* 2x (LC fullwidth +
CC padding) + RC fullwidth */
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px; /* CC padding */
width: 100%;
}
#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -100%;
}
#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -190px; /* RC fullwidth + CC padding */
}
#footer {
clear: both;
}
/*** IE Fix ***/
* html #left {
left: 150px; /* RC fullwidth */
} |
Конечно, добавления верхнего и нижнего ппаддинга не несет с собой никаких проблем, в отличие от левого и правого, что требует пересчет значения width
Одинаковая высота колонок
Для этого надо просто добавить следующий код в css:
1
2
3
4
5
6
7
8
9
10
| #container {
overflow: hidden;
}
#container .column {
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
#footer {
position: relative;
} |
По идеи, все должно нормально работать ;-)
Источник: мой вольный перевод http://www.alistapart.com/articles/holygrail/
