Около года я постепенно заставлял себя пользоваться исключительно Линуксом для работы, со всеми вытекающими последствиями. Привык к уёбищному dc-клиенту, невероятным тормозам флеша в Фаерфоксе, тормозам прорисовки интерфейса Гнома… Что ж… Я легко меняю привычки. Бриться топором иногда неудобно, но если приловчиться, то очень даже ничего! Но последний круг ада пришёлся на веб-разработку. По ощущениям можно сравнить с переходом от Дримвивера на блокнот с подсветкой. Чувствуешь себя нереально крутым извращенцем :) В общем перепробовав всё, на что хватило времени и желания, я остановился на волшебном наборе инструментов для разработки сайтов в Линуксе. Поэтому если ваш род деятельности пересекается с вебом, вероятно вам будет интересно.

Мой фаворит – мультиплатформенная среда разработки Eclipse и плагин Aptana Studio под него. Eclipse вообще перевернул мой подход к веб-разработке. Рефакторинг, уместные подсказки и автодополнение кода, очень удобное рабочее пространство и много вкусных плюшек для программиста любой категории. Тысячи плагинов могут превратить Eclipse хоть в тостер, хоть в межконтинентальную ракету. Однозначно рекомендую для работы. Есть, конечно, и недостатки, один из которых «Eclipse написан на Java, поэтому, сука, медленный». Но это не страшно. При разработке качественного проекта спешить некуда :)

К Гимпу всё-таки можно привыкнуть. Им даже можно пользоваться. В нём даже можно вполне успешно делать рекламные листовки и рисовать графику для сайтов. После Фотошопа придётся учиться компьютерной графике практически заново. Зато Гимп мало весит, быстро запускается и ещё быстрее обрабатывает тяжёлую графику. Читает PSD-файлы(!) Нет худа без добра.

Inkscape похож на CorelDraw. Как-то сразу с ним подружился, хотя регулярно матерю за хреновую реализацию градиентов. Я даже смог недавно нарисовать в нём логотип. Основной формат — SVG, что здорово, терпимо к гомосексуализму и очень международно.

В качестве CMS я давно выбрал WordPress (беру у Лекактуса). Можно такие холивары разводить на тему использование блогодвижка в роли CMS… ммм, пальчики оближешь. Честно, я всеми силами хотел дружить с Drupal‘ом, но какая же у него конченая темизация! И какая Joomla школотная, и какая у неё ужасная админка. И какой WordPress после знакомства с этими и другими движками няшный и податливый. После внимательного чтения его Кодекса, можно просто творить чудеса сайтостроения.

Итого: Ubuntu + Eclipse (feat. Aptana Studio) + GIMP + Inkscape + Wordpress позволяют мне решать весь спектр задач. С помощью этих инструментов я создаю рекламу, верстаю сайты, программирую, развлекаюсь, повышаю свой уровень и многое другое. Я это сделал! Я целиком и полностью работаю в Линуксе, не изменяя ему с НЕЙ (какой поворот). Но зачем всё это? Зачем такие жертвы? Думаю, что это путь истинного гурмана-нонконформиста-садомазохиста. Это как минимум интересно. Но ещё интересней быть веб-разработчиком/веб-дизайнером и жить в Линуксе. Таких единицы и это чувство избранности мне нравится :) И самое важное – ЭТО ВОЗМОЖНО. И как бонус — можно нахуй посылать все проверки от налоговой. Свободное и бесплатное ПО гарантирует это право.

P.S. Пользуясь случаем, хочу поблагодарить разработчиков плагина Firebug для любимого Firefox’а. Без него жизнь тысяч веб-разработчиков была бы ещё более печальной.

Спрайты — это несколько небольших картинок, объединённых в один графический файл.

Во-первых, объём одного файла как правило меньше, чем сумма объёмов отдельных файлов. Это можно объяснить снижением издержек на сохранение одного изображения: всякие там заголовки, указывающие на формат изображения, или общая палитра цветов. Если вы помните рекомендацию 90-х годов про разбивку одного большого файла на несколько мелких, чтобы создать иллюзию, что сайт грузится быстрее — забудьте сейчас же :) Такой подход создавал именно иллюзию, так как суммарный объём нескольких файлов был больше, чем объём одного файла, а сама картинка грузилась дольше.

Во-вторых — самое главное — сокращается количество HTTP-запросов к серверу. Многие не обращают на это внимание, а зря. Зачастую отдельный запрос обходится намного дороже, чем десяток «лишних» данных в одном изображении.

В общем спрайты — это круто и модно. Сегодня разберём первый пример.

Допустим, для красоты, необходимо изменить цвет иконки при наведении на неё мышкой. Живой пример.

#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url('../img/image1.gif')}
#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}
#nav li a.item2 {background-image:url('../img/image2.gif')}
#nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}
и т.д.

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

Используя спрайты, мы можем исправить ситуацию. Вместо использования 10-ти отдельных изображений кнопок (5 на таковые и 5 на состояние при наведении), можно объединить их все в одну большую картинку. В общем создайте новое изображение, которое по ширине такое же как ваша самая большая картинка, а в высоту такое же как сумма высот всех ваших картинок плюс X пикселей, где X — количество картинок в спрайте. Дополнительные пиксели нужны для однопиксельного расстояния между картинками, незачем им сливаться в одну белиберду. Ну и теперь, на таких условиях, расположите картинки одна под другой, с однопиксельным просветом между ними.

Зацените результат:

#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
и т.д.

Нехило оптимизировали, правда? Теперь представьте как это круто, когда на сайте очень много мелкой однотипной графики. Те же кнопки, звёздочки рейтингов, смайлики и т.п.

Если вы не поняли что мы сделали в коде — поясню. По факту, мы указали для всех кнопок одно фоновое изображение. Оно у нас большое и хранит в себе все 10 кнопочек. Простой арифметикой мы вычисляем какой участок изображения надо показать, применимо к пунктам списка. Всё остальное прячется. Люблю этот принцип с диафильмом сравнивать :) Если вы всё равно ничего не поняли — не отчаивайтесь. В следующий раз рассмотрим ещё один пример во всех-всех подробностях.

Пара спрайтов для затравки :)

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

Решение

Шаг первый

Создадим HTML-разметку.

<div class="field">
   <label for="n">Имя</label>
   <input type="text" id="n" />
</div>
<div class="field">
   <label for="ln">Фамилия</label>
   <input type="text" id="ln" />
</div>
<div class="field">
   <label for="a">Место жительства</label>
   <input type="text" id="a" />
</div>

Шаг второй

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

.field {clear:both; text-align:right;}

Шаг третий

Заставим каждый элемент label «утечь» влево.

.field {clear:both; text-align:right;}
label {float:left;}

Теперь каждый заголовок встал напротив соответствующего поля, но ширина формы стала 100% от ширины родительского элемента.

Шаг четвертый

Для того, чтобы прижать поля к заголовкам, обернём всю конструкцию блоком:

<div class="main">
   <div class="field">
      <label for="n">Имя</label>
      <input type="text" id="n" />
   </div>
   <div class="field">
      <label for="ln">Фамилия</label>
      <input type="text" id="ln" />
   </div>
   <div class="field">
      <label for="a">Место жительства</label>
      <input type="text" id="a" />
   </div>
</div>

Добавим в CSS обтекание для этого блока:

.field {clear:both; text-align:right;}
label {float:left;}
.main {float:left}

Шаг пятый

Теперь видно, что из-за float элементы перестали находится на одной линии. Vertical-align, к сожалению, работать не будет, но можно воспользоваться line-height.

Также зададим отступ между заголовком и полем:

.field {clear:both; text-align:right; line-height:25px;}
label {float:left; padding-right:10px;}
.main {float:left}

Крутняк, да?

На самом деле, я читаю комментарии, так что можете задавать вопросы по этом материалу и корректировать приоритетность написания статей. Если кому-то нужно подробно объяснить, скажем, работу с фоновыми изображениями или если есть вопросы по синтаксису CSS и в целом по вёрстке —спрашивайте, я обязательно отвечу.

1. Списки

Нумерованный список ‹ol› это список, значения которого помечаются цифрами. Что логично, да?

Ненумерованный список ‹ul› это список, значения которого помечаются маркерами. По умолчанию, оба вида списков простые и не гламурные. Но с помощью CSS мы можем без особых усилий изменить их внешний вид.

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

Кастомизация ненумерованного списка

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

Вот CSS:

ul.product_checklist {
list-style: none; /*-- Убираем стандартные маркеры --*/
margin: 0;
padding: 0;
}

ul.product_checklist li {
padding: 5px 5px 5px 25px; /*-- Добавляем паддинг вокруг каждого маркера --*/
margin: 0;
background: url(icon_checklist.gif) no-repeat left center; /*-- Ну и ставим какую-нибудь фоновую картинку в роли маркера --*/
}

Ненумерованный список в роли навигационного меню

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

HTML: начнём с простого ненумерованного списка с ссылками:

<ul id="topnav">
<li><a href="#">Главная</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Портфолио</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>

CSS: убираем обычные маркеры (как мы делали выше) параметром list-style: none. Потом делаем список горизонтальным политически правильным float’ом :) В итоге значения списка будет размещаться горизонтально, слева направо:

ul#topnav {
list-style: none;
float: left;
width: 960px;
margin: 0; padding: 0;
background: #f0f0f0;
border: 1px solid #ddd;
}

ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #ddd;
}

ul#topnav li a {
float: left;
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}

ul#topnav li a:hover {
background: #fff;
}

2. Стилизированные заголовки

Теги заголовков очень важны в SEO. Но стандартные заголовки выглядят слишком уныло. CSS спешит на помощь! Можно описать стили как для заголовков, так и для inline-элементов. Сделаем всё красивенько.

HTML:

<h1>Осваиваем <span>CSS</span> <small>Прикольчики, фишечки и заманушечки</small></h1>

Ну и CSS:

h1 {
font: normal 5.2em Georgia, "Times New Roman", Times, serif;
margin: 0 0 20px;
padding: 10px 0;
font-weight: normal;
text-align: center;
text-shadow: 1px 1px 1px #ccc; /*-- Не поддерживается IE --*/
}

h1 span {
color: #cc0000;
font-weight: bold;

}
h1 small {
font-size: 0.35em;
text-transform: uppercase;
color: #999;
font-family: Arial, Helvetica, sans-serif;
text-shadow: none;
display: block; /*-- Выдаёт тегу отдельную строку--*/
}

3. Overflow (переполнение)

Свойства overflow используются очень часто. Что это? W3Schools.com говорит, что «свойство overflow определяет что случится с контентом, если он выйдет за пределы своего блока». Вот парочка примеров того, как это происходит:

Внешне, overflow: auto очень похож на iframe, но на самом деле он гораздо полезнее и дружественней к SEO. Он автоматически добавляет полосы прокрутки (и вертикальные, и горизонтальные) когда контент выходит за пределы дозволенного.

Свойство overflow: scroll работает практически так же, только полосы прокрутки отображает в любом случае, независимо от количества содержимого.

А свойство overflow: hidden прячет всё, что не поместилось в блок.

Полезная подсказочка: у вас несчастные случаи на стройке были? Ну то есть когда родительский элемент не полностью обволакивает дочерний? Ну то есть как на картинке? Можно это быстренько пофиксить, сделав родительский контейнер плавающим элементом и установив для него свойство overflow: hidden! В общем меньше слов и смотрим на картинку:

4. Позиционирование

Позиционирование (relative-относительное, absolute-абсолютное и fixed-фиксированное) одно из самых мощных свойств CSS. Оно позволяет располагать элементы, используя для этого систему координат, что даёт нам возможность расположить что угодно и как нам угодно.

Для этого нужно сделать три вещи:
1. Установить координаты;
2. Правильно выбрать тип позиционирования: relative, absolute, fixed или static;
3. Установить значение свойства z-index (не обязательно).

Используя position: relative, элемент находится в зависимом положении. Если этот элемент находится внутри другого блока и если его подвинуть на 10 пикселей вниз и на 10 пикселей вправо, то положение элемента изменится относительно положения верхнего левого угла блока, в котором он находится.

Относительное позиционирование также часто используется для установки новой точки начала координат вложенных элементов, спозиционированных абсолютно. Надо как-то проще выразить… По-умолчанию, начальная точка расположения каждого элемента — верхний левый угол окна браузера. Когда вы даёте элементу положение relative, точка отсчёта всех вложенных элементов с положением absolute будет привязана к своему родителю. То есть положение будет 0,0 относительно родительского контейнера, а не окна браузера. Найс?

Элемент со значением position: absolute может располагаться где угодно, используя координаты x (горизонталь, слева направо) и y (вертикаль, сверху вниз). По умолчанию, исходное положение 0,0 — верхний левый угол окна браузера. Игнорирует, кстати, все правила обтекания и не зависит от окружающих элементов.

Исходное положение элемента с position: fixed тоже верхний левый угол окна браузера. Разница в том, что фиксированный элемент остаётся на своём месте всегда и в любом случае, даже когда вы прокручиваете страницу.

Свойство z-index указывает на порядок отображения слоёв. Кто работал с Фотошопом — знает как они работают. Чем выше значение, тем выше положение элемента. Можно сравнить с изображениями на прозрачной плёнке. Когда таких плёнок несколько, важно правильно расположить их друг над другом, чтобы получить необходимое итоговое изображение.

Хух. Пока всё. Домашнее задание — разобраться с этим всем самостоятельно. А в следующий раз мы поговорим о фоновых изображениях и спрайтах. Так что самое интересное впереди.

Если есть неточности или неясности — пишите в комментариях.

Когда-то меня вводила в ступор необходимость прилепить футер к нижней границе браузера, или разместить какой-нибудь блок строго по центру экрана. И я думаю, что не один такой :)

Макет с одной колонкой по центру

Стандартная задача — разместить контент в середине экрана. Контентная часть может быть фиксированной или резиновой, а еще надо вытянуть центральный блок в высоту на весь экран…

<div class="wrap">
<div class="contentdiv">
Этот блок фиксированного или относительного размера всегда будет горизонтально отцентрирован. <br /><br />
А еще он растянут на всю высоту экрана.
</div>
</div>

html, body {height: 100%;}
.wrap {
/*центрируем*/
position: relative;
width: 50%; /*могут быть и пиксели*/
margin: 0px auto ;

/*вытягиваем в высоту*/
height: auto !important;
height: 100%;
min-height: 100%;

/*украшательства*/
border-left: 1px solid #69b401;
border-right: 1px solid #69b401;
}

.contentdiv {padding: 10px;}

Тут два вложенных блока, наружный — обёртка, который позиционирует контентную часть, внутренний — сам контент. Выдвигаем его на середину, указываем ему отступ margin: 0px auto; и ширину width: 50%; размеры могут быть как в px, так и в %. Растягиваем по высоте: для IE и для всего остального, как обычно, разные способы, поэтому высоту указываем 4 раза — 3 раза в блоке и 1 раз в html, body.

Почему именно так?
Чтобы контент не проваливался в нормальных браузерах, пишем height: auto !important, а ниже — height: 100%. Нормальные браузеры понимают !important как более высокий приоритет и используют его, а IE6, в следствие своей безумности, переписывает «нижним значением» «важное значение»…

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

Наглядный пример.

Футер

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

Внутри блока-обёртки — wrap:

<div class="empty_inner" style=""> </div>

И сам footer после этого блока:

<div id="footer">
Копирайты всякие
</div>

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

#footer {
position: relative;
height: 20px;
margin-top: -21px;
line-height: 20px;
vertical-align: middle;
border-top: 1px solid #e8e9e8;
width: 100%;
text-align: right;
}

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

Также его можно поднять с помощью отрицательного нижнего margin для блока обёртки .wrap:

margin:0 auto -21px;

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

.empty_inner {
height:20px;
}

Пример.

Попап

Довольно часто встречающийся вопрос, как разместить небольшой блок фиксированного размера по центру экрана:

<div class="popup">Какой-то контент</div>

Вот такой css для блока:

.popup {
position: absolute;
top: 50%;
left: 50%;
width: 360px;
height: 180px;
margin-left: -180px;
margin-top: -90px;
border: 1px solid #69b401;
padding: 5px;
}

Что мы тут видим? Позиционируем абсолютно и отправляем в центральную точку экрана — 50% 50%. Получается, что блок висит левым углом чётко по центру экрана. Естественно это нас не устроит. Поскольку размеры блока нам известны, то мы просто отодвигаем его влево и вверх на нужное нам число пикселей. Для этого лучше всего подойдет margin, он может принимать отрицательные значения, которые нам и нужны.

Пример.

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

Что же такое CSS? Это мост между программированием и дизайном, и каждый профессиональный веб-разработчик должен быть с ним знаком. Поэтому рекомендую открыть свой любимый текстовый редактор, желательно с подсветкой синтаксиса, и на практике повторять все приведённые примеры в этой статье. Начнём с фундаментальных понятий. Хотя, я рассчитываю на то, что вы в общих чертах уже знаете CSS, чтобы не объяснять с полного нуля, на уровне скобочек и подключения css-файла в html-файл. Также я не буду переводить терминологию, так как она стандартна и нигде никак не переводится. Сегодня мы разберём 3 базовых понятия CSS:

1. Padding и margin
2. Float
3. Выравнивание

1. Padding и margin

Большинство начинающих верстальщиков путают между собой понятия padding и margin, и используют их некорректно. Например, использование padding или margin для установки высоты объекта, при непонимании их природных свойств, часто приводит к ошибкам и несоответствиям между желаемым и действительным. Правильное понимание padding и margin очень важно в использовании CSS. Да? Да!

Padding — это внутреннее пространство элемента, а margin — внешнее.

Чтобы увидеть разницу, установите какой-нибудь цвет фона и границ какому-нибудь элементу. В отличие от padding’а, на margin это никак не повлияет, потому-что он устанавливает как бы объём воздуха вокруг нашего элемента. Чтобы это было проще понять, посмотрите на картинку:

Значения margin и padding указываются по часовой стрелке, начиная с верхней границы.

Практический пример: Вот заголовок ‹h2› между двумя параграфами. Как видите, margin создаёт пустое пространство между ними, а padding как бы распирает сам элемент.

В приведённом выше примере, свойства margin и padding будут такими:

margin: 15px 0 15px 0;
padding: 15px 15px 15px 15px;

Чтобы оптимизировать вышеприведённые строки кода, можно использовать сокращения записей. Это будет выглядеть так:

margin: 15px 0; /*-- top и bottom = 15px | right и left = 0 --*/
padding: 15px; /*-- top, right, bottom и left = 15px --*/

Вот полный CSS-код нашего заголовка:

h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}

Полезная подсказочка:
Имейте ввиду, что padding увеличивает общую ширину элемента. Например, если вы рассчитали, что ваш элемент должен занимать 100 пикселей в ширину, и если вы добавили padding слева и справа по 10 пикселей, то итоговая ширина элемента будет 120 пикселей, а не сто. Это надо учитывать в расчётах.

100px (содержимое) + 10px (левый padding) + 10px (правый padding) = 120px (итоговая ширина элемента)

Margin, однако, расширяет поле вокруг объекта, но не влияет непосредственно на сам объект. Надеюсь всё ясно и мы переходим дальше.

2. Float

Float — это ещё один чертовски важный элемент для построения веб-сайтов на CSS и может использоваться для выравнивания изображений, блоков разметки (здесь и дальше я так обзываю понятие layouts), колонок и т.д. Если вы помните как выравнивать элементы по левой и правой стороне в HTML, то сразу же разберётесь как работают float’ы.

Свойство float указывает где будет «плавать» область с фиксированной шириной — слева, или справа, соответственно как именно будет обтекать контент вокруг него (а это официальное определение, я с него мало что понял).

Значение float:left выравнивает элементы по левому краю, используется также для создания контейнера, в котором можно располагать блоки разметки и колонки. Лучше показать это картинкой:

Значение float:right выравнивает элемент по правому краю с обтеканием вокруг него слева.

Полезная подсказочка: Так как блок обычно занимает 100% ширины своего родительского контейнера, выравнивание элемента по правому краю сбрасывает его на следующую строку. Это также относится и к обычному тексту, который расположен рядом с ним. Как всегда, это проще показать, чем доступно описать.

Можно исправить этот баг/фичу двумя способами:
1. Поменять порядок элементов в HTML-разметке так, чтобы плавающий элемент оказался строкой выше соседнего:

<img src="float-right.gif" style="float: right;" />
<p><!-- Текст какой-нибудь --></p>

2. Явно указать ширину соседнего элемента таким образом, чтобы суммарная ширина оказалась меньше или равнялась ширине родительского контейнера.

<div style="float: left; width: 300px;"><p><!-- Текст какой-нибудь --></p></div>
<img src="float-right.gif" style="float: right;" />

Как всегда, Internet Explorer 6 пытается усложнить нашу жизнь. На этот раз он удваивает margin плавающего элемента. Так что если вы указали margin в 5 пикселей, то в IE6 он будет все 10.

Конечно, со времён официального прекращения поддержки этого недобраузера Майкрософтом, можно забить на все его причуды. Но многие офисы настолько консервативны, что Explorer всё ещё используется в работе и будет на плаву ещё несколько лет точно. А поэтому существует простой трюк, который тычет IE6 мордой в стандарты:

.floated_element {
float: left;
width: 200px;
margin: 5px;
display: inline; /*--Для IE6--*/
}

3. Выравнивание

Дни использования HTML-тега ‹center› давно канули в лету. Давайте разберём различные варианты центрирования элемента.

Горизонтальное выравнивание

Вы можете выравнивать элементы по горизонтали, используя свойство text-align. Это очень просто, но имейте ввиду, что выравнивание inline-элементов, в отличие от обычного текста, требует дополнительный параметр display:block. Это позволяет браузеру определить границы, по которым вычисляется выравнивание.

.center {
text-align: center;
display: block; /*-- Только для inline-элементов--*/
}

Для горизонтального выравнивания нетекстовых элементов, используйте свойство margin.

W3C утверждает, что «если margin-left и margin-right указаны как auto, то их значения одинаковы. Это свойство позволяет выравнивать элемент по горизонтали, относительно краёв контейнера».

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

Для центрирования блока разметки:

.layout_container {
margin: 0 auto;
width: 960px;
}

Для центрирования картинки:

img.center {
margin: 0 auto;
display: block; /*-- img это inline-элемент --*/
}

Вертикальное выравнивание

Можно выровнять по вертикали текстовые элементы, используя свойство line-height (высота линии), которое определяет пространство между строками текста. Это отличный способ для вертикального выравнивания заголовков и других текстовых элементов. Просто сделайте так, чтобы свойства элемента line-height и height совпадали.

h1 {
font-size: 3em;
height: 100px;
line-height: 100px;
}

Для выравнивания нетекстовых элементов используется, так называемое, абсолютное позиционирование (в другом уроке разберём детально что это и как это).

Нюанс заключается в том, что вы обязательно должны указать фактическую ширину и высоту центрируемого элемента.

Элемент со свойством position:absolute позиционируется относительно своего базового положения (0,0: верхний левый угол). На картинке внизу, красная точка — это точка отсчёта положения элемента до применения отрицательного корректирующего margin’а.

.vertical {
width: 600px; /*-- Ширина блока --*/
height: 300px; /*-- Высота блока --*/
position: absolute; /*-- Абсолютное позиционирование, обязательно --*/
top: 50%; /*-- Координаты сверху ставим на 50% --*/
left: 50%; /*-- Координаты слева тоже на 50% --*/
margin: -150px 0 0 -300px; /*-- Устанавливаем корректирующий отрицательный margin --*/
}

Вот пока и всё. В следующем уроке мы разберём что такое списки, overflow, позиционирование… и может ещё что-нибудь :) Замечания и дополнения жду, как всегда, в комментариях.

UPD: Осваиваем CSS. Часть 2

Для этого нам нужно воспользоваться малоизвестной функцией Вордпресса current_user_can(). Она проверяет переданный ей параметр, уровень доступа пользователя. Мы не хотим, чтобы читатели могли редактировать публикацию. Поэтому с помощью передачи уточняющего параметра current_user_can(’level_10‘) мы даём возможность редактирования только администратору блога. После чего используем стандартные функции bloginfo() и the_ID() для генерирования прямой ссылки на редактирование в панели управления.

<?php
if (current_user_can('level_10')){ ?>
    <a href="<?php bloginfo('wpurl');?>/wp-admin/edit.php?p=<?php the_ID(); ?>">Редактировать</a>
<?php } ?>

Вставьте эту функцию в тему блога под заголовком поста, или внизу всего поста… или сверху :) Очень удобно.

P.S. Кстати, как лучше обзывать слово «post»? Статья, публикация, запись, новость, пост или ещё как-то?

Серьёзность в том, что любой человек, зная необходимый для этого html-запрос, может сбросить пароль администратора в вашем блоге. Если точнее, то ваш пароль могут изменить «с помощью» механизма восстановления паролей, а вы даже уведомление об этом не получите. Чертовски неприятно будет, сами понимаете. Благо решение есть и оно простое.

Найдите файл wp-login.php и перейдите на строку 190:

if (empty($key))

Замените её на такую строку:

if(empty($key) || is_array($key))

Это всё, ваш блог теперь в безопасности (пока ещё какую-то дыру не найдут).

Кстати говоря, некоторые пишут, что замены только одной строки недостаточно. Необходимы более основательные изменения в процессе аутентификации. Поэтому команда WordPress выпустила несколько часов назад версию 2.8.4, которая содержит в себе критическое обновление. Думаю, что лучше обновиться, раз такая жара пошла. Но если лень — хотя бы строку поменяйте :)

Разумеется, в текст записи картинки можно вставлять и с помощью менеджера медиафайлов. Это наглядно и действительно удобно. Но что делать, если мы хотим разместить картинку ВНЕ текста записи? Например — над заголовком новости. Или слева всей области поста, в отдельную колонку с индивидуальным фоном. Для таких случаев существуют Custom Fields.

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

Выглядит так:

<div class="post-area">
<?php $thumbnail = get_post_meta($post->ID, 'thumbnail', true);
if ($thumbnail != '') {?><div class="thumb"><a href="<?php the_permalink(); ?>"><img src="<?php echo $thumbnail ?>" /></a></div><?php } ?>
<?php $custommore = get_post_meta($post->ID, 'custom_more', true);if (!$custommore) { $custommore = 'Подробнее &raquo;'; } the_content($custommore); ?>
</div>

А вот и сами поля — для вывода картинки (thumbnail) и для изменения текста ссылки на полную новость (custom_more):

Несколько комментариев по коду:

Переменная $thumbnail принимает значение из произвольного поля thumbnail. Далее происходит проверка — если поле вообще указано, то вставляется картинка, путь к которой — значение из поля thumbnail. Картинка, в свою очередь является ещё и ссылкой на полную новость. А если поле не указано — то вообще ничего не происходит, блок картинки не генерируется. Всё просто. Если что-то не просто — спрашивайте в комментариях.

Вот пара примеров живого использования. Обратите внимание на расположение картинок в новостях.

ХТМЛ-ная часть:

<div class="cols">
  <div class="col1">Текст 1</div>
  <div class="col2">Текст 2</div>
  <div class="col3">Текст 3</div>
</div>

CSS:

.cols {
     overflow: hidden;
     width: 100%;
}
.cols .col1, .cols .col2, .cols .col3 {
     padding-bottom: 10000px;
     margin-bottom: -10000px;
}

Вот и всё! Гениально, как по мне.