В итоге получилось это:

Demo

Наверное нет смысла описывать как и что делал, приводить листинги и т.д., кому станет интересно – заглянет в исходный код. Пришлось повозиться с анимацией, банально много кода вышло. Хотелось еще позаниматься с трансформациями, но их тут впихнуть некуда, в другом эксперименте попрактикуюсь ) Здесь же еще постараюсь уделить время для отрисовки всего экрана: курочки, травка, сам «герой» (кстати, из-за героя то я и переименовл игру из «Ну, погоди!» в «Микки Мауса», мыша будет попроще отрисовать в CSS3). Ну и, если азарт не пропадет, попрактикуюсь в JS и сделаю «играбельной» всю эту штуковину. Девайс накодил исключительно «для себя» с целью прокачаться в CSS3, промежуточным вариантом доволен

Demo: Micro clearfix hack

Поддерживаются браузеры: Firefox 2+, Safari 2+, Chrome, Opera 9.27+, IE 6+, IE Mac.

Я не буду переводить полный текст статьи, выложу самое основное – код. В общем то он на столько логичен, что пояснения вряд ли кому-то потребуются

.cf {
    /* for IE 6/7 */
    *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
    /* non-JS fallback */
    *zoom: 1;
}
 
.cf:before,
.cf:after {
    content: "";
    display: table;
}
 
.cf:after {
    clear: both;
}

Если вдруг кто-то не понял, что здесь написано, попробую вкратце описать алгоритм:
1. С помощью CSS создаем невидимые блоки
2. Эти блоки используем как отбивку (как то сразу мне не нравилось захламлять отбивками HTML)
3. п.1 не работает в IE6 и IE7, потому для этих чудных браузеров используем свои фиксы.

Не желая мириться с таким положением дел, я, как и в случае с Notepad++, написал макросы для самых частоупотребляемых записей, дабы сэкономить драгоценные секунды (да и лень честно говоря писать свойства целиком).

Примеры:

Alt+C bb TAB — border-bottom:1px solid #FFF*;
Alt+C p TAB — position:relative*; top:0; left:0;
Alt+C fw TAB — font-weight:900*;
Alt+C tb TAB — text-decorarion:underline*;
Alt+C bg TAB — background:#FFF url(../images/bg.png) repeat-x 0 0;
* — зачеркнутым показаны символы, которые будут выделены для изменения

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

Всего на данный момент написано 18 комбинаций, скорее всего добавится еще что-то, предлагайте варианты.
На скорую руку соорудил простенький cheat sheet:

Итак, если вы считаете, что такие макросы будут полезны в повседневной работе — качайте org-netbeans-modules-editor-settings-custommacros.xml.
Этот файлик нужно закинуть в c:\Users\habrauser\.netbeans\6.9\config\Editors\Macros\ (если у вас уже есть свои макросы — будте осторожны при копировании, перезатрете).

Еще в NetBeans существует такая классная штука, как шаблоны кода, которая превосходит по удобству макросы, в PHP они работают замечательно, в CSS мне не удалось ими овладеть

Буду благодарен за полезные советы и дополнения к вышенаписанному. По мере поступления идей (своих или чужих) макрос будет обновляться.

• all – Все типы. Это значение используется по умолчанию.
• aural – Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
• braille – Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
• handheld – Наладонные компьютеры и аналогичные им аппараты.
• print – Печатающие устройства вроде принтера.
• projection – Проектор.
• screen – Экран монитора.
• tv – Телевизор.

Обычно верстка очередного макета ограничивается записью:

1

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

где media=«all» – это указание для всех девайсов использовать стить style.css. Немного реже можно увидеть где media=«print» для принтеров. Но мало кто из верстальщиков знают (или используют) всю мощь @media. Попробую на примерах показать некоторые «фишки».

В дальнейшем я буду использовать @media или @import в теле css-файла, подключение стилевых файлов по этим же правилам производиться аналогично.

Простые примеры медиа-импорта

1
2

/* Если ты "экран" - подключи стиль. */
@import url(style.css) screen;

Самое распространенное выражение.

1

@import url(style.css) screen, projection ;

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

Медиа-выражения

1
2

/* Если ты экран и при этом цветной - загрузи этот стиль! */
@import url(color.css) screen and (color);

1
2
3

/* Если твоя ширина больше или равна 500px - обработай. */
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }

1
2
3
4
5
6
7
8

/* Если ты наладонник или экран с раширением не больше 480px - обработай */
@media  handheld,
		screen and ( max-width:480px ),
		screen and ( max-device-width:480px ) {
	BODY {
		font-size:1.3em;
		}
}

(пример взят у pepelsbey)

1
2

/* правило сработает в случае, если разрешение экрана по ширине в пределах от 400 до 700 пикселей */
@media screen and (min-width: 400px) and (max-width: 700px) { … }

1
2
3
4
5
6

/* Здесь мы определяем высоту экрана девайса. Иногда может быть полезным. */
<link rel="stylesheet" media="screen and (device-height: 600px)" />
<pre>
<pre lang="css" line="1">
/* Если ты в вертикальном положении (например, iPad) - обработай. */
@media all and (orientation: portrait) { … }

1
2

/* Ну ты понял... */
@media screen and (color), projection and (color) { … }

Логические выражения

1
2

<!-- Если ты не цветной экран - обработай. -->
<link rel="stylesheet" media="not screen and (color)" href="example.css" />

(проблемы с кроссбраузерностью)

1

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Разное

1
2
3
4
5

/* Правила для мониторов различных форматов */
@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }

1
2
3
4

/* Вертикальное расположение экрана. */
@media all and (orientation:portrait) { … }
/* Горизонтальное расположение экрана. */
@media all and (orientation:landscape) { … }

1
2
3

/* Что-то для терминалов с сеткой, лучше почитать спецификацию. */
@media handheld and (grid) and (max-width: 15em) { … }
@media handheld and (grid) and (device-max-height: 7em) { … }

1
2

/* Стили для телефизоров с прогрессивной разверткой. */
@media tv and (scan: progressive) { … }

Кстати, я считаю, что тип TV – достаточно важный тип в будущем. Уже сейчас появляются телевизионне приставки с возможностью веб-серфинга, и, думаю, скоро это будет настолько же обыденно, как раньше видеомагнитофон или DVD-плеер. В одном я только сомневаюсь – будет девайс считать себя телевизором или компьютером?

P.S.: Наиболее интересные выражения находятся в первой половине поста, вторая половина – просто показать возможности @media и @import.

P.S.S.: Возможно в чем-то есть ошибки, буду благодарен за исправления.

При написании этого материала использовалась спецификация Media Queries, находящаяся в статусе возможной рекомендации (CR). Описано не всё, есть еще работа с цветами. Я сильно не уверен, что всё будет работать в реальных условиях, на работоспособность и кроссбраузерность всё не протестировал, буду делать это по мере возможности и дописывать.

Ситуация изменилась, когда объем работы вырос, и я физически не успевал верстать то, что вроде как должен успевать. Конечно, есть свои html и css заготовки, но копипастить их – сомнительный выигрыш во времени. Работа по FTP через Total Commander тоже не очень то удобна – много лишних телодвижений.

И вот я решил потратить время на настройку своего любимого Notepad++, слышал где-то что гибко он настраивается

(Описание скорее для тех разработчиков, которые не в курсе всех прелестей Notepad++, знающие могут дальше не читать).

Наверное стоит начать с установки (выделено – установка профиля в Program Files – настоятельно рекомендую):

FTP

В первую очередь решил разобраться с FTP – давно видел кнопочку, но «не работала». Всё оказалось просто как валенок – вбиваешь, сохраняешь и работаешь с файлами прям на сервере – офигенная экономия во времени.

И, как ни странно, многие коллеги давно юзают этот редактор и не пользуются встроенным FTP-клиентом. Это очень удобно, поверьте!

Макросы

Если FTP-клиентом я пользуюсь уже давно, то на макросы обратил свой взор совсем недавно, и когда понял их силу – скорость работы значительно выросла!

Краткий видеоролик, показывающий работу макросов (здесь в лучшем качестве):

Если кого-то заинтересовали макросы – делюсь тем, что у меня есть. Кстати, корректно работать макросы стали только в последней версии Notepad++.

И вот буквально сегодня,после обновления Notepad++, я заметил функцию, которой мне очень не хватало – автозакрытие тегов. Теперь уж точно можно работать комфортно

Там еще много разных примочек, с остальными я пока и не разбирался, возможно и не буду. Если кто-то знает еще что-то интересное о Notepad++ – поделитесь…

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

HTML учебник «Освой самостоятельно HTML и XHTML. 10 минут на урок»

Автор: Вильямс, 2003 г.

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

Еще одно неоспоримое преимущество этой книги – цена, 50-70 рублей – совсем немного

Советую купить прямо сейчас в Bolero.ru, в OZON.ru или в Books.Ru

«HTML и CSS на примерах»

Автор: Мержевич В.В. , 2005 г.

Очень рекомендую эту книгу, т.к. человек, написаший ее – истинный профессионал в HTML/CSS. Когда-то я очень много почерпнул знаний на его сайте http://htmlbook.ru, и, честно признаться, до сих пор иногда посещаю этот сайт когда забуду какую-нибудь мелочь. Книга очень популярна и однозначно поможет как новичку так и опытному разработчику.

Цена порядка 150-200 рублей, что так же делает сию книгу привлекательной.

Советую купить прямо сейчас в Bolero.ru, в OZON.ru или в Books.Ru

Полный справочник по HTML, CSS и JavaScript. Справочник профессионала.

Автор: Исси Коэн Лазаро, 2007 г.

А вот эту книгу мне посоветовал мой коллега, далеко не новичек в верстке. Советовал как настольную книгу, которая часто выручает в сложных ситуациях.

Издание представляет собой современный полный справочник с перекрестными ссылками по HTML, CSS и JavaScript. В первых главах рассматриваются основы HTML, CSS и JavaScript.
Далее приводятся сведения обо всех элементах и атрибутах HTML, событиях, стилях CSS, поведениях, фильтрах, свойствах, методах и объектах JavaScript. Элементы языков программирования в каждой из глав перечислены в алфавитном порядке. Для каждого элемента приводится краткое описание, полный синтаксис, пример использования, список совместимых версий браузеров Netscape и Internet Explorer, список элементов, с которыми элемент используется. Веб-дизайнер, веб-мастер, веб-программист – вся нужная вам информация собрана под этой обложкой!

Цена кусается, что-то около 800-1400 рублей, но лично я решил купить эту книженцию в ближайшее время, что и вам советую

Купить прямо сейчас в Bolero.ru, в OZON.ru или в Books.Ru

PHP 5. Как самостоятельно создать сайт любой сложности Издание 2

Автор: Зольников Д.С., 2006 г.

Для тех, кому мало одной верстки рекомендую эту книгу.

В книге приведены основные сведения по языку Web-программирования РНР, который позволяет решать задачи любой сложности и формировать динамические разделы сайта: форумы, гостевые книги, каталоги продукции и многое другое. Помимо синтаксиса и возможностей языка рассматривается установка и настройка Web-сервера Apache, на котором, как правило, выполняются РНР-программы.
Издание отличается от традиционных учебников тем, что оно носит не справочный, а обучающий характер. Оно рассчитано на начинающего пользователя, имеющего базовые знания о программировании.

Цена от 150 рублей. Можете купить в Bolero.ru, в OZON.ru или в Books.Ru

Постараюсь максимально выложить всё что знаю по этой теме, а что сразу не вспомню (или пока не знаю) буду со временем дописывать…

CSS-хаки для обеспечения кроссбраузерности.

«любимый» Internet Explorer 6.0 и ниже

/*\*/
* html {}
/**/
/* Хак только для IE6 */

Если перед свойством в css поставить подчеркивание “_”, или дефис “-”, то эти свойства будут восприниматься только IE версии 6 и ниже:

.style {_background:#F00;}
\\width:100px; - видят только ie 5.0 и ie 5.5 (неактуально)

Звездочка. Работает для IE7 и ниже:

p { background:red; /* Применимо ко всем браузерам */ *background: green; /* Применимо к IE6 и ниже */ }

#hack{
color:green; /* IE 5.01 */
color/**/:blue; /* IE 5.5 */
c\olor red; /* IE 6 не работает перед буквами a, b, c, d, e, f */
}

* html .ie6 {color:red;} /* Хак только для IE6 */

IE6 и ниже проигнорирует эти правила:

div>span {...}
div+span {...}

IE min-width & max-width: максимальная и минимальная ширина блока:

#element {
min-width:780px;
max-width:1260px;
width expression(document.body.clientWidth < 780? "780px" : document.body.clientWidth > 1260? "1260px" : "auto");
}

Box Model. Хак используется для того, чтобы справиться с глюком эксплорера, в котором border и padding включаются в ширину элемента:

padding:4em;
border:1em solid red;
width:30em;
width/**/:/**/ 25em;

Min-height хак от Дастина Диаза:

selector {
min-height:500px;
height:auto !important;
height:500px; }

Internet Explorer 7.0 и ниже

Не все хаки для IE7 работают если в начале документа не указать !DOCTYPE.

*+html .style {  background: #F00;}

html>body .style {*background: #F00;}

*:first-child+html {} * html {} /* IE 7 и ниже */

*:first-child+html {} /* IE 7 только */

html>body {} /* IE 7 и нормальные браузеры */

html>/**/body {} /* Только нормальные браузеры (не IE 7) */

>body {} /* выбирает элемент body только в IE7 */

html* {} /* выделяет все элементы внутри элемента html. Только для IE7 и ниже. */

//width:100px; - так написаное свойство проигнорируют все браузеры кроме ie 7.0 и меньше

.ie7b {#color:#00FF00;} /* Хак только для IE7,6 */

a:link:visited, a:visited:link В соответствии со стандартами, псевдотеги :link и :visited взаимно исключаемы, то есть :link означает непосещенную ссылку. Тем не менее, IE 7 и ниже проигнорируют эти псевдо-классы, если какой-нибудь другой появится ниже в том же селекторе.

a:link:visited, a:visited:link {} a:link:visited, a:visited:link {} /* выбирает элемент a в IE7 и ниже */

Условные комментарии

Условие может быть таким: IE – для любой версии IE
lt IE v – (less than) для всех браузеров IE, версия которых меньше чем v
lte IE v – (less than or equal) для всех браузеров IE, версия которых меньше чем v, или такая же
gte IE v – (greater than or equal) – для IE, версия которых больше или равна v
gt IE v – (greater than) – для IE, версия которых больше v.

Для всех версий IE:

<!--[if IE]><link rel="stylesheet" href="css/cssf-ie.css" type="text/css" media="screen" /><![endif]-->

Для 7-й версии:

<!--[if IE 7]><link rel="stylesheet" href="css/cssf-ie7.css" type="text/css" media="screen" /><![endif]-->

Для 5.01, 5.5 и 6.0:

<!--[if lte IE 6]><link rel="stylesheet" href="css/cssf-ie6.css" type="text/css" media="screen" /><![endif]-->

CSS-хаки для браузера Opera

@media all and (-webkit-min-device-pixel-ratio:10000),

not all and (-webkit-min-device-pixel-ratio:0) {

.style {background: #F00;} /* только для Opera */

}

html:first-child {}  /* только для Opera */

html:first-child .style {

background: #F00; /* только для Opera < 9.5 */

}

Можно создать файл opera.css и подключить его в head секции документа:

<head>

    <link rel="stylesheet" href="css/opera.css" type="opera/css" media="screen" />

</head>

CSS хаки для FireFox:

html:first-child .class { color: #368EF1; } /* для FireFox */

@-moz-document url-prefix(){body { color: #368EF1; }}

CSS-хак для Safari

body:first-of-type #element { color: red; }

CSS-хак для Konqueror

html:not(:nth-child(1)) #element { color: red; }

Для нескольких браузеров:

.class, x:-moz-any-link { color: #368EF1; } /* для FireFox, но так же работает в Internet Explorer 7 */

@media all and (min-width: 0) {.safariOperaChrome {color:#FF00FF;}} /* Хак только для Safari, Opera, Google Chrome*/

@media all and (min-width: 0) {div span { background: #FF0}} /*только для Opera* (так же видит Safari 3 и Google Chrome) /

html:not([lang*=""]):not(:only-child) .ffSafariChrome {color:#990000;} /* Хак только для IE7, FireFox */html:root div {…} /* для Firefox (также видит safari3) */

html:root .ffSafariChrome {color:#660066;} /* Хак только для Safari, FireFox, Google Chrome */

body:first-of-type .operaChromeSafari {color:orange;} /* Хак только для Safari, Opera, Google Chrome */

html>/**/body {} /* Все современные браузеры, кроме IE 7 */

/*\*//*/selector{property:value;}/**/ /* MacIE */

Здесь есть всё это в табличном виде.

Логический алгоритм следующий:

1. Высоту странички body выставляем в 100% (минимум);
2. Основной слой (page), в котором будет шапка (header) и контент (content) так же растягиваем на 100% по высоте;
3. Подвал (footer) прижимаем книзу position:relative; bottom:0;
4. Т.к. подвал находится ниже 100% слоя page, то нужно его поднять на столько, сколько он сам имеет роста: margin-top:-50px;
5. Теперь страничка и без скрола, и подвал внизу, но при нынешнем состоянии контент будет залезать под подвал, применим-ка мы к нему padding-bottom:60px;

Теперь должно быть в норме. Покажу на картинке:

Надеюсь, что логика понятна. Если кто не поймет – выложу кодом.

Стандартные шрифты:

1. Arial

2. Verdana

3. Times

4. Times New Roman

5. Georgia

6. Trebuchet MS

7. Sans

8. Sans

9. Comic Sans MS

10. Courier New

11. Webdings

12. Garamond

13. Helvetica

Тоже стандартные шрифты, но не для всех ОС:

1. Palatino Linotype / Palatino

Приятный шрифт с засечками, поддерживаемый Windows и MAC. Его можно использовать вместо привычных нам шрифтов семейств Georgia или Times. С помощью него можно написать очень стильные, заголовки.

2. Tahoma

Шрифт без засечек, схож с Arial и Helvetica, но чуть уже. Строгий, но в тоже время мягкий шрифт, прекрасно подходит для оформления текста.

3. Impact

Пожалуй самый мощный шрифт. Не имеет аналогов среди стандартных шрифтов. если вам нужен эффектный заголовок, то Impact поможет это сделать.

4. Century Gothic

Этот шрифт поддерживается в основном лишь на OS Windows, но пользователи MAC могут использовать другой его аналог – Futura. Очень элегатный шрифт, забытый дизайнерами, но до сих пор входящий в стандартный пакет шрифтов Windows.

5. Arial Black

Крупный шрифт семейства Arial. Схож по массивности с Impact, но не такой компактный. Очень подходит для ярких заголовков.

6. Arial Narrow

Еще один шрифт семества Arial. Выручит вас в ситуации, когда необходимо уместить как можно больше текста в однйо строке – очень компактный шрифт.

7. Copperplate / Copperplate Gothic Light

Этот шрифт схож с Century Gothic, но имеет маленькие засечки. Также прексрасно подхдит для оформления заголовков. Поддерживается примерно на 80% машин MAC и 50% Windows.

8. Gill Sans / Gill Sans MT

Поддерживается в основном на OS MAC (но и прекрасно виден и в Vista). Компактный, элегантный шрифт, легко читаемый и подходящий для основного текста.

Статья не претендует на уникальность и не является окончательной версией. Написал больше «для себя», т.к. надоело каждый раз спрашивать Яндекс правильное написание нужного шрифта

К сожалению, CSS2 не поддерживает верстку колонками, а CSS3 только на подходе и еще точно не известно, как в нем будет организована эта функция. Да еще должно будет пройти некоторое время, прежде чем браузеры полноценно научатся обрабатывать CSS3. Поэтому попытаемся сверстать страничку двумя колонками в CSS2.

Решение, в общем-то, простое.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#content{
    position: relative;
    width: 70%;
    min-height: 10px;
    _height: expression(((document.documentElement.clientHeight||document.body.clientHeight)<=1024)? 10:"100%");
    right: 0;
    border: 1px solid #999;
}
#content .txt{
    position: relative;
    left: 0px;
}
#content .txt_left{
    position: relative;
    min-height: 10px;
    _height: expression(((document.documentElement.clientHeight||document.body.clientHeight)<=1024)? 10:"100%");
    left: 0px;
    padding-right: 50%;
}
#content .txt_right{
    position: absolute;
    width: 50%;
    _width: 100%;
    height: 100%;
    right: 0px;
    border-left: 1px dashed #666;
}
   </style>
</head>

<body>
    <div id="content">
        <div class="txt">
            <div class="txt_left">
                <img src="images/1.gif" width=100 height=100 alt="Картинка" style="float:left;" / >
                <p>Текст левой колонки</p>
                <div class="txt_right">
                    <p>Текст правой колонки</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Берем слой #content с относительным позиционированием, в него помещаем другой слой (#content .txt_left), так же с относительным позиционированием. С помощью свойства padding-right прижимаем текст этого слоя к левому краю на ширину в 50% от общей ширины слоя «#content .txt_left» (которую, впрочем, лучше не указывать). Таким образом, у нас получилась левая колонка с шириной 50%. Но кроме всего проделанного желательно указать минимальную высоту слоев «#content» и «#content .txt_left» с помощью свойства «min-height». Десяти пикселей будет достаточно, остальное растянется

Теперь в слой «#content .txt_left» вставляем новый слой «#content .txt_right», но уже с абсолюстным позиционированием. Прижимаем этот слой к правому краю слоя «#content .txt_left». Указываем его ширину 50% и высоту 100%. Но вот незадача: во всех браузерах, кроме нашего «любимого» Internet Explorer, расположение слоев будет 50%, а в IE последний слой окажется в половину меньше.

Для того чтобы избавиться от этого неприятного момента в CSS-файле пропишем еще _width:100%; для слоя #content .txt_right. Эта запись будет учитываться только браузером Internet Explorer.

Этот же прием используем для того, чтобы указать минимальные высоты слоев, ведь, как известно, IE не подерживает свойства min-width и min-height.Ширину слоев мы указали в процентах, обеспечив тем самым резиновость нашим колонкам. Если необходимо, проценты можно заменить на более точные единицы измерения.

ВАЖНО: Высота правого слоя (количество текста) должна быть меньше высоты левого слоя. В противном случае лишний текст просто выйдет за пределы нижней границы.

Если контент в таких колонках будет динамически меняться, то необходимо будет устанавливать скрипт подсчета символов статьи и разбиения ее на две части. Правда возникнет проблема со вставкой в колонки изображений.

Колонки готовы.

Посмотреть пример

Скачать готовый пример