Шаг вперед

29April2008

Религия

Posted by Сергей Прогонный under: Uncategorized.

Я часто задумываюсь о вопросах религии. Изредка посещал церковь, не потому что верующий, а более из любопытства что ли, чтобы почувствовать себя частичкой чего-то большого и значимого.

Более того - однажды случайным образом присутствовал (школьные годы) на каком-то собрании священников. Я не помню что они обсуждали и какой был предмет спора, но стоял шум и крик, много ругани и взаимных оскорблений. Больше в церковь я не хожу, разве только на экскурсию.

Сегодня просматривая fishki наткнулся на интересные слова:

Жил-был человек. Когда он был еще ребенком, бабушка всегда говорила ему: “Внучек, вот вырастешь ты большой, станет тебе на душе плохо, меня уж не будет - ты иди в храм+ тебе всегда там легче станет”.
Так и случилось. Вырос. Стало жить невыносимо. Пришел в храм.
И тут к нему один подходит: “Не так руки держишь”! Вторая подбегает: “Не там стоишь!” Третья ворчит: “Не так одет!” Сзади одергивают: “Неправильно крестишься!” + В конце концов подошла одна женщина и говорит ему: “Вы, знаете, вообще бы, вышли из храма, купили себе книжку о том, как себя здесь вести надо, потом бы и заходили!”
Вышел человек из храма, сел на лавку и горько заплакал. И подходит к нему Христос: “Что ты, чадо, плачешь?” Поворачивает человек свое заплаканное лицо и говорит: “Господи! Меня в храм не пускают!”. Обнял его Господь и тихо говорит: “Ты не плачь, они и Меня давно туда не пускают…”

Себя верующим не считаю, но отношусь с большим уважением ко всем религиям.

11April2008

IE vs FireFox

Posted by Сергей Прогонный under: CSS; HTML.

Данная заметка посвящена не баталиям между производителям или отличиям данных браузеров, а тому как эти отличия свести на нет.

Для этого используются так называемые “хаки”.

HTML-хак достаточно простой в использоании

<!--[if lte IE 6]> *видит только IE6 и более ранние версии* <![endif]-->
<!--[if IE 7]> *видит только IE7* <![endif]-->
<!--[if IE 7]><!--> *видит IE7, Firefox и Opera* <!--<![endif]-->

В то же время для остальных браузеров этот код будет выглядеть как обычный комментарий. Комбинации таких хаков позволяют для разных браузеров отобразить разный HTML-код на той же странице.

Использование CSS-хаков позволяет не менять HTML-код для получения требуемого результата. Рассмотрим пример оформления таблицы:

table tr td { background: red; }
table tr > td { background: green; }

В этом случае для IE 6 и более ранних версий ячейка в таблице будет залита красным цветом, а в IE7, Firefox, Opera - зеленым.

По сути записть “tr > td” означает, что данный стиль следуюет применить для всех тегов td являющихся прямым наследником тега tr. Браузеры IE версии 6 и старше не понимают такой записи, потому просто игнорируют ее.

Таким образом чтобы дифференцировать стили для IE и для Firefox нам следует написать необходимый CSS-код для IE6, а далее воспользовавшись этим хаком переопределить необходимые значения для требуемых параметров.

Используем хаки на примере кроссбраузерного каркаса - в IE 6 мы получим две колонки; в IE7, Firefox, Opera - три колонки. Смотреть

3April2008

Кроссбраузерная верстка. Каркас

Posted by Сергей Прогонный under: CSS; HTML.

Один из главных и сложных моментов в верстке - это каркас.

Наша задача сделать универсальный каркас, который будет держать размеры вне зависимости от контента.

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

Шаг 1. Заготовка, которая послужит нам фундаментом для верстки и может быть применена в любых проектах. Этот шаблон разработан согласно стандарта XHTML 1.0
Смотреть код HTML

Шаг 2. Создаем основные блоки - шапка, подвал и основная часть.
Смотреть код HTML

Шаг 3. Работаем со стилями: в первую очередь желательно обнулить стандартные отступы, т.к. различные браузеры по-разному их интерпретируют. После этого добавляем соответствующие настройки для созданных блоков.
Cмотреть код CSS.

В итоге получаем каркас для сайта с одной колонкой

Шаг 4. Добавляем вторую и третью колонки + соответственно стили к ним.

В результате получаем каркас на две колонки и на три колонки