6851 читатель, 1280 постов
Администрация
Модераторы
Полезности для web-разработчиков.
Web-разработка whois
- индекс
- 184,85
Занимательная верстка
Недавно коллега из соседнего отдела попросил меня помочь ему с версткой одного блока. Он хотел разобраться с основами семантической верстки и сверстать этот блок аккуратно и красиво. Однако блок оказался совсем не прост для верстки — в нем сочетались скругленные уголки и градиентные бордеры. Я отправил коллегу верстать таблицами, а сам предлагаю устроить мастер-классы, кто сможет предложить наиболее оптимальное решение данной задачи.
Под катом скриншот задачи и ссылки на .psd и мой вариант решения
Мой вариант решения содержит 10 контейнеров и 6 правил-исключений для IE 6 (не очень оптимально имхо)
UPD: Описываю ТЗ:
Итак, кажется идеи иссякли, и можно теперь объявить результаты.
Как я и говорил, мой вариант оказался нисколько не оптимальным, более того, требует дописания expression для IE 6.
Порадовало же то, что все-таки были представлены достойные варианты решения:
Спасибо вам за мастер-классы, постараюсь добавить вам кармы, если моих остатков хватит для этого=)
Под катом скриншот задачи и ссылки на .psd и мой вариант решения
Мой вариант решения содержит 10 контейнеров и 6 правил-исключений для IE 6 (не очень оптимально имхо)
UPD: Описываю ТЗ:
- Блок расширяемый как по ширине, так и по высоте (в зависимости от текста)
- Уголки и бордюры вставляются картинками
- В содержании блока заголовок и текст
Итоги
Итак, кажется идеи иссякли, и можно теперь объявить результаты.
Как я и говорил, мой вариант оказался нисколько не оптимальным, более того, требует дописания expression для IE 6.
Порадовало же то, что все-таки были представлены достойные варианты решения:
rmaksim- И последний вариант от gen
Спасибо вам за мастер-классы, постараюсь добавить вам кармы, если моих остатков хватит для этого=)
комментарии (108)
Вот мой пост, о том как это делается
По вашей задаче аналогично, только используем 3-писксельный бордер.
но всё равно одним дивом можно - уголки повыше вырезаются и всё
итого минимум 4 блока + уголки
либо делать большие картинки и почти так же, как я описал ниже, распихать по углам
http://www.vertexwerks.com/tests/sidebox…
но у меня используется именно картинка для уголка - проверьте, все честно
тут придется использовать два несемантичных блока к сожалению - для правых уголков. с ходу других способов не придумаю
За вёрстку, которая будет работать на разных фонах и с градиентом (как следствие, нужен png) - дам карму я и мой товарищ :)
(ну т.е. Владимиру конечно, но это не важно ;))
Сейчас я занят, но на следующей неделе напишу статью как это делать. 8-P
И сколько времени на это ушло? Думаю на таблицах намного быстрее.Меньше кода, меньше времени. Одним словом табличкой делать это ефективнее.
А семантически ... ну тут куча пустых дивов, а там было бы пустых ячеек. Так что для эксперимента не плохо.
По моему именно скорость плюс размер кода
+ реюз (да, даже в верстке)
+ семантическая чистота(как минимум для поисковиков)
продолжать?
В большинстве случаев есть обратная зависимость между объёмом кода и легкостью читаемости, то есть чем больше код тем сложнее понять его работу. Опять же бывает и наоборот, но я говорю про большинство. Касаемо нашего примера таблица очень легко читается.
Что такое ваше "реюз" мне неизвестно.
Семантика вещь интересная, но если говорить откровенно многие употребляют это слово до конца не понимая его значение. Оно как бы модное сейчас.
Извиняюсь, что написал именно "реюз", просто для меня и моих коллег это легко узнаваемый термин.
В идеале, конечно, это использование css3, но на практике, естественно, это не применимо.
Данная задача не сильно занимательна, на самом деле, гораздо занимательнее сверстать полностью резиновый аналог, только чтобы все уголки/бордеры были полупрозрачными пнг, блок можно было задавать не только в процентах/фиксированным, но и сделать по контенту (будь то float или абсолютное позиционирование). Ну и чтобы жизнь сказкой не казалась – для изображения использовать css-спрайты (хотя бы все уголки в одно изображение). Ну и чтоб ие это все понимал =)
Вот это хорошая задача, да =)
для варианта 200х200 будет примерно так:
...
text
все в что style вынести в стили и все :)
img1.png - картинка из того слоя, где градиентная граница
img2.png - внутренняя штуковина
Зачем делать то, о чем речи изначально не идет? =)
если например в этом блоке присутствует заголовок и текст, то верстка будет намного семантичнее и проще
я сталкивался только с решениями без градиентной рамки, потому обычно обходился вообще без лишних bl, tl и т.п.
50% что не решите так проблему, а в проекте (пусть небольшую) сложность заведете :).
В догонку: убить дизайнера, к сожалению не решение. Макет-то останется :)
http://www.artlebedev.ru/tools/technogrette/html/shadows/
Работает на отлично во всех браузерах.
в ИЕ при нечетных длине и высоте блока не правильно позиционирует блоки справа и снизу, и выскакивают полоски (белый фон) соотвесттвенно справа и снизу.
для предложенного способа надо еще пару экспрешинов :(
с теми катринками что даны в варианте автора, лучше (и проще) сделать 8 вложеных блоков - тогда и бордеры и уголки будут на месте ВСЕГДА!
и... ширина будет именно 50%, а не 50%+10px+10px как в примере!
и... кода в N раз меньше, и... без экспрешинов
пример http://users.cosmostv.by/rmaksim/coding/…
можно даже не для всего, а только для верхнего левого и правого нижнего уголка одной картинкой?
можно конечно сделать картинку 1000х1000, и соотв. уголки разместить по углам,
ведь подразумеваешь что это можно сделать ЭТО одним спрайтом???
#tl,#tr,#br,#bl
#t,#b
#r,#l
как это сделать, чтобы ничего не развалилось, можно прочитать здесь (ближе к концу). Для примера, к сожалению, нет времени
а без этого не представляю, как здесь можно их использовать...
тогда в данном случае можно и ДВУМЯ!!!
#tl,#tr,#br,#bl + #t,#b
и #r,#l
тока немного по другому сверстать...
http://users.cosmostv.by/rmaksim/coding/… (4-й сверху)
что имеем:
первый способ: 8 файлов - 504 байта
второй способ: 2 файла - 247 байт
немного больше стилей, блоков в html практически столько же (возможны варианты +-1,2 блока)
http://blue-anvil.com/archives/anti-alia…
пример использования:
http://blue-anvil.com/jquerycurvycorners…
А вообще идея о мастер-классах — гут.
Давайте по чаще такое устраивать.
Предлагаю написать открытое письмо (типа как Opera), чтобы в следующей версии браузеров все производители поддержали возможность использовать множественные бэкграунды из CSS3. И наконец-то начать делать семантически верную вёрстку.
Не такая уж и сложная это задача. Но если это сделать одновременно во всех браузерах, то следующие страницы будут более правильными. Мы же стремимся к совершенству.
Старые браузеры поддерживать через костыли.
Поддержать остальные рекомендации W3C можно не просить, но хотя бы это :) Для современного дизайна это более необходимая вещь, по-моему.
дивно, кроссбраузерно, без хаков, семантично, без лишних блоков, шрифто-размеро-независимо =)
как такое? )
этот вариант рассчитан на бесконечную резину; если располагать какими-то ограничениями на размеры, то кол-во картинок можно сократить в два раза.
) за счет которых Вы отказались от контейнеров с оформлением из-за перенесения отображения бордеров на них.
По сравнения с Вашим вариантом у меня вышло (нужно кликнуть по фразе "многое другое" с иконкой баллуна рядом) не так оригинально, но и контейнеров не так много, имхо.
P.S. Это не пиар, честно-честно.
во-вторых пример мой более-менее приближен к реальности - код близок к коду на многих сайтах.
в-третьих я делал с рассчетом на бесконечную резину, на практике блок обычно не бывает больше некоторых размеров - в этом случае можно было убрать например блок text и сократить кол-во картинок, не сильно потеряв в их размере
ЗЫ: и имхо ооочень плохая идея с кликом, особенно учитывая, что реализация на флеше, особенно учитывая мой FlashBlock ;)))
4) http://hlomzik.quaint.ru/web-dev.info.jp… - just for fun =)
пример реализации смотреть в ExtJS
работает везде
Я вот что подумал — конечно, можно дивами.
Но если таблицей сделать, то тянуть будет очень удобно — и тебе минимальная ширина/высота есть, и тянется на ура. Но таблица это таблица. Короче надо смотреть по ситуации.
Понятно, что на красивом вебдванольном дивном сайте такое дивами надо делать.
По теме — так 1 див, а в нем 4 картинки (раз в картинках надо).
Можно подстраховаться, и 4 дива и 4 картинки)
Тут палка о двух концах получается в любом случае, однозначного ответа думаю нет)
http://rybakit.at.tut.by/containers/corners.html