Archive for Октябрь, 2008


Таблица спецсимволов HTML

Posted on 30th, 2008 by admin

Несколько ссылок на таблицы спецсимволов. Использовать можете любую.

XHTML Character Entity Reference
HTML/XHTML Character Entities
Спецсимволы в HTML

No Comments
Filed Under Спецсимволы

Лечим ИЕ или о хаках

Posted on 16th, 2008 by admin

hasLayout, что это такое? Это свойство введено майкрософтовскими девелоперами когда они сели однажды на корпоративе и за рюмкой чая поняли, какой бажный браузер они написали. И чтобы как-то исправится, написали эту “заплатку” для веб-девелоперов, чтобы они имели возможность хоть как-то заставить браузер отображать html-код без глюков.

Поэтому читайте о нем или в оригинале, или же, спасибо добрым людям, которые перевели мануал, на русском.

No Comments
Filed Under Internet Explorer, Хаки

Семантическая верстка

Posted on 15th, 2008 by admin

Каждый верстальщик, который считает себя хорошим, должен делать сайты с учетом семантики. Что же это такое? С чем его едят и куда его пихать, чтобы получился код таким красивым и семантическим? Следующие ссылки вполне ответят на Ваши вопросы. Это отличные статьи известных верстальщиков.

От Пепелсбея (Вадима Макеева):
- Семантическая вёрстка. Часть первая
- Семантическая вёрстка. Часть вторая

От flack’a (Алексея Рыбакова):
- Семантическая верстка — советы и решения. Часть первая. Капля теории, DTD и ластики
- Семантическая верстка — советы и решения. Часть вторая. Хаки-шмаки, даём люлей IE
- Семантическая верстка — советы и решения. Часть третья. Блочная модель
- Семантическая верстка — советы и решения. Часть IV. Создание «резиновых» макетов с использованием отрицательных полей
- Семантическая верстка — советы и решения. Часть V. Навигация по сайту или укрощение списков
- Семантическая верстка — советы и решения. Часть VI. Запрет на обтекание float’ов
- Семантическая верстка — советы и решения. Часть VII. Прижимаем подвал к низу окна
- Семантическая верстка — советы и решения. Часть VIII. Минимальные и максимальные размеры

No Comments
Filed Under Семантика

Где почитать о jQuery

Posted on 13th, 2008 by admin

Есть хорошие две статьи о jQuery для начинающих, где все расписано и расжевано с кучей примеров, причем на русском языке. Так что читайте:
- jQuery – Javascript нового поколения
- jQuery для начинающих

No Comments
Filed Under jQuery

Три колонки. Метод 1.

Posted on 9th, 2008 by 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 */
}

Наша разметка на этом шаге имеет следующий вид:

http://www.alistapart.com/d/holygrail/diagram_01.gif

Шаг 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;
}

После второго шага у нас получилось следующее:

http://www.alistapart.com/d/holygrail/diagram_02.gif

Шаг 3: Размещаем левую колонку

Центральная колонка размещена на своем месте – там где и должна быть. Теперь нам надо как-то подвинуть левую колонку на свое место. Как это сделать? А очень просто. Для этого нам надо сделать всего два шага. Задать margin-left: -100%; При этом следует помнить, что 100% - это ширина центральной колонки.

1
2
3
4
#left {
  width: 200px;        /* LC width */
  margin-left: -100%;  
}

Посмотрим что у нас получилось после первого шага:

http://www.alistapart.com/d/holygrail/diagram_03.gif

Чтобы «посадить» на место левую колонку, нужно для нее еже указать 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 */
}

И о чудо – у нас все получилось!

http://www.alistapart.com/d/holygrail/diagram_04.gif

Шаг 4: Размещаем правую колонку

Здесь все немножко проще, чем с левой. Задаем отрицательный margin-right, равный ширине правой колонки:

1
2
3
4
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}

http://www.alistapart.com/d/holygrail/diagram_05.gif

Как видим, все красиво и в нужном месте.

Шаг 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/

Comment 1
Filed Under Три колонки

Страница сгенерирована за 0.202192 секунд