Как оказалось, css-спрайты за бугром — весьма распространённая фишка. А чем мы хуже? :) Мы, правда, далеко не так активно апробируем всяческие инновации. Даже такие полезные. Еле-еле перешли от табличной вёрстки к блочной, и то хорошо. Но планку надо поднимать, поэтому сегодня мы обсудим простую технику, которая изменит ваше представление о применении однотипной графики на сайте.
Спрайты — это несколько небольших картинок, объединённых в один графический файл.
Ну и что?
Задача
Добиться, чтобы поля ввода находились друг под другом, и при этом их положение определялось максимальной длиной заголовка поля слева. Решение не должно использовать таблиц и Javascript.
Как?
На прошлом занятии мы разобрали три прикольные пипки CSS — padding/margin, float и выравнивание. Сегодня разберём ещё 4. Кстати, это не последняя статья из цикла «Осваиваем CSS». Надо ещё разобраться с бэкграундами, спрайтами, тонкостями позиционирования и т.д. и т.п. Так что следите за обновлениями.
На самом деле, я читаю комментарии, так что можете задавать вопросы по этом материалу и корректировать приоритетность написания статей. Если кому-то нужно подробно объяснить, скажем, работу с фоновыми изображениями или если есть вопросы по синтаксису CSS и в целом по вёрстке —спрашивайте, я обязательно отвечу.
Скандалы, интриги, расследования »
В процессе подготовки второй статьи по азам CSS, мне захотелось поделиться с вами часто используемыми приёмами в HTML/CSS-вёрстке.
Когда-то меня вводила в ступор необходимость прилепить футер к нижней границе браузера, или разместить какой-нибудь блок строго по центру экрана. И я думаю, что не один такой :)
Берём к сведению »
Ни для кого не секрет, что таблицами верстают только застрявшие в технологиях 90-х фрики, которые не хотят приложить немного усилий для ознакомления с CSS. Связка XHTML/CSS позволяет творить чудеса, а если добавить ещё и JavaScript — полёт фантазии не ограничен вообще ничем.
Когда я только начинал знакомиться с каскадными таблицами (то бишь с CSS), доводилось самостоятельно, по крупицам собирать необходимые базовые сведения. Специализированные блоги, в основном, рассчитывают на подготовленного верстальщика. Но, что характерно, остаются вопросы, которые уже давно стыдно задавать, но ответы на которые хочется получить. Для таких людей, ну и для того, чтобы систематизировать собственную базу знаний, я подготовил эту статью. А теперь подробнее »
Существует очень много решений, от километров css до использования jQuery. Но есть один очень интересный, эффективный и лаконичный метод. Неизвестно кто его придумал, так что авторство указать не могу. Ну и ладно :)
ХТМЛ-ная часть:
<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;
}
Вот и всё! Гениально, как по мне.
