Резиновый блок с закругленными углами на 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 МБайт).
Похожие материалы:
Отзывов: 28 на «Резиновый блок с закругленными углами на div»
, 27.10.2009 в 20:25
Классный урок, давно хотел узнать как верстать резиновый блок дивами
, 28.10.2009 в 00:59
Рад, что смог помочь.
, 27.10.2009 в 20:37
Спасибо
, 27.10.2009 в 21:00
, 02.11.2009 в 19:59
Андрей, спасибо вам за урок.
.
В самом начале урока, когда нужно было вырезать угол, я так понимаю можно тоже было воспользоваться инструментом Crop Tool ?
PS. И еще, спасибо за ctrl+пробел (css) в dreamweaver
, 04.11.2009 в 00:34
Да, можно было применить Crop Tool. И к результату, в этом случае, Вы бы пришли быстрее. Но я привык действовать по описанному алгоритму.
Раздумываю по поводу Crop Tool… А ведь действительно удобно. Удобно, когда на слой наложены стили и при копировании куска слоя потом приходится дополнительно вклеивать стиль. Видимо при использовании Crop Tool такая необходимость отпадает.
Спасибо за комментарий. Но привычка — дело труднопереборимое.
, 03.11.2009 в 17:06
Благодарю за урок, Андрей!
, 04.11.2009 в 00:25
Рад помочь! Спасибо Вам за спасибо.
, 15.12.2009 в 02:02
Спасибо. Тема опять же заезженная, но видеоуроков по ней ещё никто не выпускал. Чёрт его знает каким методом пользоваться. Нужно перепробовать на своём коде штук 30 вначале, а потом каждый решит для себя сам
, 08.01.2010 в 18:48
Спасибо! Я как-то искал материал о верстке, и попал на ваш блог. Теперь качаю все уроки. Большое спасибо за них!
, 21.01.2010 в 20:35
Das ist Gut! Это есть хорошо!
, 21.02.2010 в 05:57
Спасибо, Андрей, классно, я гораздо сложнее добивалась эффекта с закругленными углами. Подскажите, пожалуйста, решение еще такой задачи. Внутри блока контента разместить картинку по центру( и по вертикали, и по горизонтали). Проблему вызывает то, что vertical — align работает лишь в ячейке таблицы. Но даже display: table-cell не помогло. В моем случае весь блок вместе с углами фиксированного размера, и размеры картинки по высоте и ширине не превышают допустимых размеров, размеры таковы, что даже при максимальных остаётся свободное место. Буду очень благодарна, если откликнетесь.
, 28.02.2010 в 10:08
Да, вертикальное выравнивание в блоке — это действительно проблема. Я писал об этом здесь: http://www.sdelaysite.com/kniga/verstka-kniga/vertikalnoe-vyravnivanie
, 14.03.2010 в 01:07
Жаль, что нет здесь оценок — по пятибальной системе, я бы Вам пятёрок понаставила бы:) Всё ОЧЕНЬ понятно и доступно! Спасибо, буду учиться теперь с Вами:)
, 24.03.2010 в 07:46
Андрей. Большое спасибо вам за уроки.
Я новичок в веб программировании. Ваши уроки достаточно хорошо сориентировали в целях и задачах. Отличное дополнение к личному изучению основ. Хочу поинтересоваться у вас: В дальнейшем вы планируете развивать тему верстки в div и врезке кода в CMS системы?
Столкнулся с вопросом верстки сайта из psd в полный php + css код в CMS Drupal. Очень интересно узнать как можно это делать также легко и просто, как вы это описываете.
, 26.03.2010 в 00:37
Спасибо Андрей за уроки. Очень понятно и доступно. Продолжайте также радовать нас своими уроками.
, 26.03.2010 в 19:39
Уроки не запускаются. В чем причина? Если у вас всё норм, тогда может у меня что-то?
, 27.03.2010 в 18:35
Здавствуйте, Андрей. Спасибо за урок, всё доступно и понятно. Но, как говорится, толи лыжи не едут, толи я е…й.
Дело в том, что мне нужно сделать почти такой же фокус, но оставив только верхнюю часть с заголовком, со всеми скругленными углами. То есть нужно в итоге получить полоску определенного цвета со скругл. углами, внутри которой будет текст, причем она должна тянуться в зависимости от ширины текста. Это нужно для выделения всего одной строки в конце статьи, строка может иметь разную длину, но всегда будет оставаться одной строкой, не переходя в другую.
Я пытался сделать по аналогии, но чего-то не могу понять, так как выходит, что круглые края на концах строки вижу, а внутренность прозрачная и не заполняется цветом. Помогите одолеть, буду вам очень признателен.
, 13.04.2010 в 12:18
и снова спасибо)) теперь вслух!
только оффтоп позвольте (можно не публиковать): очепятка в тексте — «И, конечно же, верстать мы будем при помощи тегов div, без применения таблиц. В процессе просмотра видеоурока вы оцените простату …» имелось в виду «оцените простОту», ведь правда ?? потому что оценить простАту как-то совсем не хочется, особенно тем кому уже за 30 ))))))
, 18.04.2010 в 10:19
Спасибо за доступность изложения! Попробую шаблон своего сайта переделать)))
, 19.04.2010 в 11:08
Спасибки за урок, клёва , понятно всё.
Вот тока скажите, как сделать такой блок с закруглёнными краями, тока чтобы по всему перимитру была рамка например в 1 пиксель, а внутри однотонный цвет.
если конкретно, то как сделать такой же бордер внизу и вверху, как он есть слева и справа?
, 19.05.2010 в 20:46
а если фон сайта не белый или картинка не прокатит?
, 02.06.2010 в 14:05
А нет у вас в картинках этого урока с пошаговым описанием?
, 25.07.2010 в 15:22
Очень хорошее видео особенно для таки валенков как я)))) Но все равно затык у меня((( Фотошоп третий, дринвивер у меня восьмой. Вроде все как надо. Но не получается вырезать только уголок. Не копируется отдельно. Копирует только весь блок целиком! Подскажите в чем моя ошибка или это у меня клинический случай?)))
СПАСИБО за видео!!!!!!!
, 09.10.2010 в 22:32
Спасибо! Очень помогло.
, 09.11.2010 в 21:58
Почему не заливает фон картинкой??? берет только ссылку на вторую картинку….
#log {height:50px;background:url(img/ugrig.gif) url(img/uglev.gif) no-repeat;}
, 11.12.2010 в 18:05
Я недавно прочитал статью — сравнение WordPress и Jomla, так вот там человек пишет что в WordPress трудно свободно позиционировать картинки, блоки и т.д.
Скажу вам бред, с помощью дополнительных Виджетов и дивов можно добиться многого.
, 22.12.2010 в 18:55
Скачал несколько недель назат видео с депозита, думал будет опять что нибудь не внятное, оказалось всё отлично описано, вот зашёл сказать спасибо вам.