В сегодняшнем видеоуроке по div-вёрстке сайта я познакомлю вас, уважаемый читатель, с принципами вёрстки блока с закруглёнными углами. Причём не просто блока, а «резинового» блока, который может тянуться в ширину и высоту без ограничений.
На настоящий момент, существует множество способов вёрстки блоков с закруглёнными углами (статья на HabraHabr с 38-ю способами). Многие из них даже очень оригинальны и изящны.
Только ко всему этому изящному многообразию у меня есть ряд претензий:
- Во-первых, сложность CSS-конструкций, в которых разобраться новичку будет очень сложно;
- Во-вторых, зачем городить огород и искать себе проблемы, когда поставленную задачу можно решить, быть может, не так изящно, но, всё же, решить достойно и в соответствии со стандартами;
- В-третьих, большое количество способов базируется на методе «раздвижных дверей». А для этого метода необходимо загружать большое изображение. Размеры этого изображения бывает сложно предугадать. Кстати, если вы не знакомы с методом «раздвижных дверей», то я рассказываю про него в статье «Вёрстка динамической кнопки на CSS».
Мы решим поставленную задачу «дубовым» методом, но не лишённым некоего изящества.
И, конечно же, верстать мы будем при помощи тегов «div», без применения таблиц. В процессе просмотра видеоурока, вы оцените простоту данного метода, по сравнению даже с табличной реализацией.
Заодно с вёрсткой вы, как и всегда, получите порцию знаний по работе с программой Photoshop.
Переходите к просмотру видеоурока.
Автор: Андрей Морковин.
Ещё материалы по этой теме:
- Вертикальное выравнивание блока: CSS, HTML, Div
- Работа с тегом <div> — основным инструментом блочной вёрстки
- Условные комментарии
- Вёрстка динамической кнопки на CSS
- Работа с визуальным редактором CKeditor
Комментарии:
ZavRab
Классный урок, давно хотел узнать как верстать резиновый блок дивами
Андрей Морковин
Рад, что смог помочь.
Владимир
Спасибо
Андрей Морковин
Пожалуйста.
Kostya
Андрей, спасибо вам за урок.
В самом начале урока, когда нужно было вырезать угол, я так понимаю можно тоже было воспользоваться инструментом Crop Tool ?
PS. И еще, спасибо за ctrl+пробел (css) в dreamweaver :).
Андрей Морковин
Да, можно было применить Crop Tool. И к результату, в этом случае, Вы бы пришли быстрее. Но я привык действовать по описанному алгоритму.
Раздумываю по поводу Crop Tool… А ведь действительно удобно. Удобно, когда на слой наложены стили и при копировании куска слоя потом приходится дополнительно вклеивать стиль. Видимо при использовании Crop Tool такая необходимость отпадает.
Спасибо за комментарий. Но привычка — дело труднопереборимое.
kyoks
Благодарю за урок, Андрей!
Андрей Морковин
Рад помочь! Спасибо Вам за спасибо.
Never Lex
Спасибо. Тема опять же заезженная, но видеоуроков по ней ещё никто не выпускал. Чёрт его знает каким методом пользоваться. Нужно перепробовать на своём коде штук 30 вначале, а потом каждый решит для себя сам
Тарас
Спасибо! Я как-то искал материал о верстке, и попал на ваш блог. Теперь качаю все уроки. Большое спасибо за них!
Дмитрий
Das ist Gut! Это есть хорошо!
Татьяна
Спасибо, Андрей, классно, я гораздо сложнее добивалась эффекта с закругленными углами. Подскажите, пожалуйста, решение еще такой задачи. Внутри блока контента разместить картинку по центру( и по вертикали, и по горизонтали). Проблему вызывает то, что vertical — align работает лишь в ячейке таблицы. Но даже display: table-cell не помогло. В моем случае весь блок вместе с углами фиксированного размера, и размеры картинки по высоте и ширине не превышают допустимых размеров, размеры таковы, что даже при максимальных остаётся свободное место. Буду очень благодарна, если откликнетесь.
Андрей Морковин
Да, вертикальное выравнивание в блоке — это действительно проблема. Я писал об этом здесь
Анастасия
Жаль, что нет здесь оценок — по пятибальной системе, я бы Вам пятёрок понаставила бы:) Всё ОЧЕНЬ понятно и доступно! Спасибо, буду учиться теперь с Вами:)
Vjkxey
Андрей. Большое спасибо вам за уроки.
Я новичок в веб программировании. Ваши уроки достаточно хорошо сориентировали в целях и задачах. Отличное дополнение к личному изучению основ. Хочу поинтересоваться у вас: В дальнейшем вы планируете развивать тему верстки в div и врезке кода в CMS системы?
Столкнулся с вопросом верстки сайта из psd в полный php + css код в CMS Drupal. Очень интересно узнать как можно это делать также легко и просто, как вы это описываете.
IRIK50
Спасибо Андрей за уроки. Очень понятно и доступно. Продолжайте также радовать нас своими уроками.
Дмитрий
Уроки не запускаются. В чем причина? Если у вас всё норм, тогда может у меня что-то?
Дмитрий
Здавствуйте, Андрей. Спасибо за урок, всё доступно и понятно. Но, как говорится, толи лыжи не едут, толи я е…й.
Дело в том, что мне нужно сделать почти такой же фокус, но оставив только верхнюю часть с заголовком, со всеми скругленными углами. То есть нужно в итоге получить полоску определенного цвета со скругл. углами, внутри которой будет текст, причем она должна тянуться в зависимости от ширины текста. Это нужно для выделения всего одной строки в конце статьи, строка может иметь разную длину, но всегда будет оставаться одной строкой, не переходя в другую.
Я пытался сделать по аналогии, но чего-то не могу понять, так как выходит, что круглые края на концах строки вижу, а внутренность прозрачная и не заполняется цветом. Помогите одолеть, буду вам очень признателен.
che
и снова спасибо)) теперь вслух!
только оффтоп позвольте (можно не публиковать): очепятка в тексте — «И, конечно же, верстать мы будем при помощи тегов div, без применения таблиц. В процессе просмотра видеоурока вы оцените простату …» имелось в виду «оцените простОту», ведь правда ?? потому что оценить простАту как-то совсем не хочется, особенно тем кому уже за 30 ))))))
Loshu
Спасибо за доступность изложения! Попробую шаблон своего сайта переделать)))
BHAIRAVA
Спасибки за урок, клёва , понятно всё.
Вот тока скажите, как сделать такой блок с закруглёнными краями, тока чтобы по всему перимитру была рамка например в 1 пиксель, а внутри однотонный цвет.
если конкретно, то как сделать такой же бордер внизу и вверху, как он есть слева и справа?
sava023
а если фон сайта не белый или картинка не прокатит?
Кадровик
А нет у вас в картинках этого урока с пошаговым описанием?
Шода
Очень хорошее видео особенно для таки валенков как я)))) Но все равно затык у меня((( Фотошоп третий, дринвивер у меня восьмой. Вроде все как надо. Но не получается вырезать только уголок. Не копируется отдельно. Копирует только весь блок целиком! Подскажите в чем моя ошибка или это у меня клинический случай?)))
СПАСИБО за видео!!!!!!!
Lancer
Спасибо! Очень помогло.
romam
Почему не заливает фон картинкой??? берет только ссылку на вторую картинку….
#log {height:50px;background:url(img/ugrig.gif) url(img/uglev.gif) no-repeat;}
Александр
Я недавно прочитал статью — сравнение WordPress и Jomla, так вот там человек пишет что в WordPress трудно свободно позиционировать картинки, блоки и т.д.
Скажу вам бред, с помощью дополнительных Виджетов и дивов можно добиться многого.
Ролик
Скачал несколько недель назат видео с депозита, думал будет опять что нибудь не внятное, оказалось всё отлично описано, вот зашёл сказать спасибо вам.
Bearvuf
Спасибо. очень полезно!