26 октября 2009

Резиновый блок с закругленными углами на div

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

На настоящий момент существует множество способов верстки блоков с закругленными углами (статья на HabraHabr с 38-ю способами). Многие из них даже очень оригинальны и изящны.

Только ко всему этому изящному многообразию у меня есть ряд претензий:

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

Мы решим поставленную задачу дубовым методом, но не лишенным некоего изящества.

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

За одно с версткой вы, как и всегда, получите порцию знаний по работе с программой Photoshop.

Переходите к просмотру видеоурока.

Видеоурок на сервисе RuTube:

Первая часть видеоурока на сервисе YouTube:

Вторая часть видеоурока на сервисе YouTube:

Третья часть видеоурока на сервисе YouTube:

При желании вы можете скачать исходники верстки для тренировки.

Я думаю, что вы уже наслышаны от меня об алгоритмах сжатия видео сервисами YouTube и RuTube, из-за которых серьезно падает качество. Так вот, как обычно вы можете скачать видео в лучшем качестве с Deposit Files (21.8 МБайт *.mp4). На нем видны все мелкие детали.

Для воспроизведения видео в формате *.mp4 у вас должен быть установлен соответствующий кодек. Если воспроизведения не происходит, то скачайте, например, K-Lite_Codec_Pack_520_Full. Я его уже скачал и загрузил себе на Deposit Files. Так что желающие могут дернуть его с Депозита (11.8 МБайт).