Занимательная верстка

[dyakov]

Такие вещи давно одним дивом делаю ;-)
Вот мой пост, о том как это делается
По вашей задаче аналогично, только используем 3-писксельный бордер.

[XXXVII]

Тут идея в том, что на бордерах градиенты, ширина бордера может быть любой. Главное, что бордеры обязательно должны вставляться картинкой

[dyakov]

сори не заметил градиента
но всё равно одним дивом можно - уголки повыше вырезаются и всё

[rmaksim]

блок тянется по ширине - по любому надо два блока на бордеры справа и слева, + 2 - сверху и снизу + твой способ на уголки

итого минимум 4 блока + уголки

либо делать большие картинки и почти так же, как я описал ниже, распихать по углам
http://www.vertexwerks.com/tests/sidebox…

[zealous]

хорошая ссылочка!

[rsa]

Любому, кто покажет кроссбраузерный вариант вёрстки на одних дивах, подсыплю кармы.

[hlomzik]

http://habrahabr.ru/blog/webdev/36812.ht…

[rsa]

Ну уж нет. Тут используется то, что верхний левый угол можно наложить на верхний повторяющийся бордер и ничего не испортится. Попробуйте то же самое проделать, когда у вас закруглённые края.

[hlomzik]

хм, действительно так можно сделать
но у меня используется именно картинка для уголка - проверьте, все честно

[rsa]

Будет работать только если уголки будут выполнены на оранжевом фоне, как в примере. Но это же не очень интересно. Хочется, чтобы уголки были на прозрачном фоне, чтобы можно было использовать элемент в разных местах с разным фоном.

[hlomzik]

аа, вот о чем вы
тут придется использовать два несемантичных блока к сожалению - для правых уголков. с ходу других способов не придумаю

[rsa]

Хотя формально ваш вариант годится. Держите карму.
За вёрстку, которая будет работать на разных фонах и с градиентом (как следствие, нужен png) - дам карму я и мой товарищ :)

[hlomzik]

добавьте Тёме ;)

(ну т.е. Владимиру конечно, но это не важно ;))

[XXXVII]

Извините, но вы тоже неправильно поняли задачу. В нашем случае необходимо сделать не скругление углов без картинок, а именно разместить разместить картинки в бордерах и углах

[XXXVII]

То есть Вы предлагаете отрисовывать картинки браузерными средствами?

[rsa]

Ну вобщем уже написали, задачу вы решаете немного не ту. Но всё равно очень интересно и познавательно. Подкинул бы кармы, да мне самому её "подрезали", больше не могу голосовать.

[Imen]

Да, занимательная верстка. Обязательно где-нибуть пригодится

[bobrob]

100 строк кода в CSS ... Не многовато ли?
И сколько времени на это ушло? Думаю на таблицах намного быстрее.Меньше кода, меньше времени. Одним словом табличкой делать это ефективнее.
А семантически ... ну тут куча пустых дивов, а там было бы пустых ячеек. Так что для эксперимента не плохо.

[XXXVII]

Я также считаю, но мне кажется, что есть методы более эффективной верстки данной задачи.

[bobrob]

Самый эфективный метод данноой верстки это сделать на табличке. Быстрее и меньше кода. Если вам кажется что есть методы более эффективной верстки данной задачи, давайте ссылку или опишите их. Сравним, посмотрим где меньше кода, на что уходит меньше времени, что еффективнее в целом.

[korchasa]

скорость верстки не единственный показатель

[lifestar]

а какие показатели?
По моему именно скорость плюс размер кода

[korchasa]

+ легкая читаемость (простота)
+ реюз (да, даже в верстке)
+ семантическая чистота(как минимум для поисковиков)
продолжать?

[lifestar]

согласен.
В большинстве случаев есть обратная зависимость между объёмом кода и легкостью читаемости, то есть чем больше код тем сложнее понять его работу. Опять же бывает и наоборот, но я говорю про большинство. Касаемо нашего примера таблица очень легко читается.
Что такое ваше "реюз" мне неизвестно.
Семантика вещь интересная, но если говорить откровенно многие употребляют это слово до конца не понимая его значение. Оно как бы модное сейчас.

[korchasa]

реюз - это простота повторного использования.

Извиняюсь, что написал именно "реюз", просто для меня и моих коллег это легко узнаваемый термин.

[denver]

Видимо у некоторых единственный показатель - отсутствие таблиц ;)

[kizu]

Вариантов как можно сверстать «уголки и бордеры» – тьма, при этом какого-то идеального варианта на все случаи нет.
В идеале, конечно, это использование css3, но на практике, естественно, это не применимо.
Данная задача не сильно занимательна, на самом деле, гораздо занимательнее сверстать полностью резиновый аналог, только чтобы все уголки/бордеры были полупрозрачными пнг, блок можно было задавать не только в процентах/фиксированным, но и сделать по контенту (будь то float или абсолютное позиционирование). Ну и чтобы жизнь сказкой не казалась – для изображения использовать css-спрайты (хотя бы все уголки в одно изображение). Ну и чтоб ие это все понимал =)

Вот это хорошая задача, да =)

[vithar]

Я могу сделать используя 2 картинки и 8 (или 9) элементов.

[elfiki]

что-то мне подсказывает, что можно обойтись двумя дивами, если то что нужно фиксированных размеров...
для варианта 200х200 будет примерно так:
...

text

все в что style вынести в стили и все :)
img1.png - картинка из того слоя, где градиентная граница
img2.png - внутренняя штуковина

[elfiki]

так и знал что будет урезано... короче три дива и две картинки хватает

[XXXVII]

Ну зачем ограничивать задачу фиксированием размеров?

[elfiki]

А в самой задаче (насколько я вижу) нет ничего кроме как шаблона с фиксированными размерами и не сказано ни слова про резину :)
Зачем делать то, о чем речи изначально не идет? =)

[vithar]

Фиксированных размеров это тривиально и не интересно. Интересна полная резина.

[an9eldust]

Если "то что нужно фиксированных размеров", то можно обойтись ровно одной картинкой - вот той, что в посте.

[elfiki]

Да, Тоха, ты прав :)

[hlomzik]

дайте полное задание, а не сферического коня в вакууме
если например в этом блоке присутствует заголовок и текст, то верстка будет намного семантичнее и проще

[XXXVII]

Хмм.. Ну допустим, наличие заголовка и текста будет обязательным. Все-таки не просто так этот блок будет создаваться=)

[bobrob]

А вы можете сказать что вы понимаете под "семантичнее"?

[hlomzik]

ну если взять пример автора, то заголовок может отвечать за верхнюю, текст — за левую и правую, а сам контейнер — за нижнюю границы. уже минус 4 элемента.
я сталкивался только с решениями без градиентной рамки, потому обычно обходился вообще без лишних bl, tl и т.п.

[masterbo]

например один из уголков будет отрисовываться фоном к <h1> а не от <div>, а другой будет фоном для <p>

[hlomzik]

http://habrahabr.ru/blog/webdev/36812.ht…

[k_s]

Ладно 10 блоков, ладно много css, но 6 исключений для IE это зачем?

[XXXVII]

IE 6 отказался принимать мою идею с абсолютным позиционированием - пришлось пойти у него на поводу и переделать

[n1mnul]

Убил бы дизайнера за такой цвет фона, за такие границы блока и заставил бы переделать.

[bobrob]

Тут верстка обсуждается а не дизайн...

[n1mnul]

Это мой вариант решения проблемы :)

[karamba]

Это решение 50\50. Зависит очень от сути проекта, арт-директора и ответственного дизайнера.
50% что не решите так проблему, а в проекте (пусть небольшую) сложность заведете :).

[n1mnul]

Скажем так, я с таким дизайнером врядли работал бы :) Кодить макеты с фоном цвета детской неожиданности и (муахахах) "бордерами с градиентами" - выше моих сил :)

[karamba]

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

[sylvio]

как обыватель в дизайнерских кругах скажу - "а мне нравится :-D"

[dmitriykikkas]

Здесь давно написан как это сделать
http://www.artlebedev.ru/tools/technogrette/html/shadows/

Работает на отлично во всех браузерах.

[XXXVII]

Черт ногу сломит в их примерах если честно, но код действительно сокращается

[dmitriykikkas]

Поверь, у них не спроста такой код, ходть и длинный но работает везде.

[masterbo]

Это сниппет для бездумного конвейера, а не интеллектуальная игра в превращение семантики в дизайн. это не наш путь © =)))

[rmaksim]

не лучшая идея размещать уголки и бордеры при помощи position:absolute
в ИЕ при нечетных длине и высоте блока не правильно позиционирует блоки справа и снизу, и выскакивают полоски (белый фон) соотвесттвенно справа и снизу.
для предложенного способа надо еще пару экспрешинов :(

с теми катринками что даны в варианте автора, лучше (и проще) сделать 8 вложеных блоков - тогда и бордеры и уголки будут на месте ВСЕГДА!

и... ширина будет именно 50%, а не 50%+10px+10px как в примере!

и... кода в N раз меньше, и... без экспрешинов

пример http://users.cosmostv.by/rmaksim/coding/…

[sunnybear]

угу, осталось заюзать спрайты — вообще красота будет

[rmaksim]

спрайты не для этого способа :( - тут тока отдельными картинками, зато просто и понятно... надеюсь :)

[sunnybear]

спрайты везде подойдут, главное, их правильно клеить :)

[rmaksim]

хотелось бы пример для моего варианта :)
можно даже не для всего, а только для верхнего левого и правого нижнего уголка одной картинкой?
можно конечно сделать картинку 1000х1000, и соотв. уголки разместить по углам,

ведь подразумеваешь что это можно сделать ЭТО одним спрайтом???

[sunnybear]

нет, ну что Вы, минимум три
#tl,#tr,#br,#bl
#t,#b
#r,#l
как это сделать, чтобы ничего не развалилось, можно прочитать здесь (ближе к концу). Для примера, к сожалению, нет времени

[hlomzik]

я пока не знаю, как можно задавать положение от правой или нижней границы (например right-25px;)
а без этого не представляю, как здесь можно их использовать...

[rmaksim]

а, ну тогда конечно... :)
тогда в данном случае можно и ДВУМЯ!!!
#tl,#tr,#br,#bl + #t,#b
и #r,#l
тока немного по другому сверстать...

[rmaksim]

вот собственно и сделал на ДВУХ - как и написал, вроде работает :)
http://users.cosmostv.by/rmaksim/coding/… (4-й сверху)

что имеем:
первый способ: 8 файлов - 504 байта
второй способ: 2 файла - 247 байт

немного больше стилей, блоков в html практически столько же (возможны варианты +-1,2 блока)

[timafor]

А почему бы не использовать javascript для скругления бордеров? Это ж элементарная задача тем более, когда все уже придумано:
http://blue-anvil.com/archives/anti-alia…

пример использования:
http://blue-anvil.com/jquerycurvycorners…

[Fade]

Иногда эта штука глючит. Я пробовал. Действительно, очень удобно - всего один блок. Но иногда не работает.

[timafor]

иногда, это как? в разных браузерах? Лично у меня работает во всех браузерах, конечно, чуток притормаживает загрузка в ие, при условии что много блоков с такими краями. Но мне кажется, они скоро и это поправят.

[Fade]

Будем надеяться

[BaBL]

Можно поджечь представительства майкрософт в разных странах и тогда код существенно сократится.

[rmaksim]

от такого флэш-моба 6-ка никуда не денется... она УЖЕ есть

[Skyneon]

Ага, только ты забыл, что дата центры останутся...

[Astralian]

Прийду домой, попробую сверстать.
А вообще идея о мастер-классах — гут.
Давайте по чаще такое устраивать.

[gdX]

Порой раз на работе столько за деень мастер-классов пройдешь, что хватает лишь на словесные объяснения :)

[twi]

Прикольно, Но никакой симантичности в дивах используемых для оформления нет.

[MOVe]

Я уже раз писал, повторю здесь :)
Предлагаю написать открытое письмо (типа как Opera), чтобы в следующей версии браузеров все производители поддержали возможность использовать множественные бэкграунды из CSS3. И наконец-то начать делать семантически верную вёрстку.

Не такая уж и сложная это задача. Но если это сделать одновременно во всех браузерах, то следующие страницы будут более правильными. Мы же стремимся к совершенству.

Старые браузеры поддерживать через костыли.

Поддержать остальные рекомендации W3C можно не просить, но хотя бы это :) Для современного дизайна это более необходимая вещь, по-моему.

[BaBL]

я бы лучше поддержал background-size еще, ой как он мне был нужен сегодня ночью.... такое городить пришлось. Да и в принципе, тут бы тоже помогло, весь квадрат с рамкой в бэкграунд, который по 100% размерам DIV'а выстраивается, всего один элемент был бы нужен. Правда тогда эта штучка масштабировалась бы вместе с шириной бордеров. С другой стороны такой эффект может быть даже предпочтительней иногда.

[MOVe]

Да уж. Осталось найти инициативную группу, которая может такое письмо написать :) На нескольких языках. Да и вообще, кто знает как это делается.

[hlomzik]

вот такой вариант
дивно, кроссбраузерно, без хаков, семантично, без лишних блоков, шрифто-размеро-независимо =)
как такое? )

этот вариант рассчитан на бесконечную резину; если располагать какими-то ограничениями на размеры, то кол-во картинок можно сократить в два раза.

[sunnybear]

гыг, количество картинок и так можно до 3 сократить

[hlomzik]

ну если уж на то пошло, то можно до двух сократить

[Kupyc]

Ха! Занятно. Смущает лишь несколько непривычный взгляд на внутренние блоки (

) за счет которых Вы отказались от контейнеров с оформлением из-за перенесения отображения бордеров на них.
По сравнения с Вашим вариантом у меня вышло (нужно кликнуть по фразе "многое другое" с иконкой баллуна рядом) не так оригинально, но и контейнеров не так много, имхо.

P.S. Это не пиар, честно-честно.

[hlomzik]

ну во-первых у вас верхний правый угол отсутствует
во-вторых пример мой более-менее приближен к реальности - код близок к коду на многих сайтах.
в-третьих я делал с рассчетом на бесконечную резину, на практике блок обычно не бывает больше некоторых размеров - в этом случае можно было убрать например блок text и сократить кол-во картинок, не сильно потеряв в их размере

ЗЫ: и имхо ооочень плохая идея с кликом, особенно учитывая, что реализация на флеше, особенно учитывая мой FlashBlock ;)))

[hlomzik]

1) приношу извинения - у меня картинка не догрузилась...
4) http://hlomzik.quaint.ru/web-dev.info.jp… - just for fun =)

[ka1n]

[shadeR]

6 div-ов, 3 или 4 картинки.

[Fade]

У меня ушло 5 DIV-блоков на более сложную верстку. Проверял в разных баузерах. работает все отлично пока до определенного размера (под больший размер пока не успел сделать *-)).

[bobrob]

и не успеете, вы слышали что один и тот же id нельзя пременять к нескольким елементам.. .еще div xmlns="" id="menu-main" ???? Строчные буквы элементов и незакрытые элементы в Strict?!?? С HTML у вас просто беда. А вы еще про сложную верстку тут пишите ...

[Fade]

с Strict никаких проблем не будет. Чем вам xmlns не угодил? Все парситься через XSL-парсер и xmlns сам добавляется.

[glaba]

у меня ушло бы намного меньше чем у каждого из вас просто потому что я не сижу сутками на всяких трепалках и не решаю чужие глупые задачи когда надо сделать что-то, но это очень сложное, и вместо того чтобы придумать что-то другое надо париться над тем что есть

[denver]

Видать под конец предложения мозг уже решал нечто очень сложное, другое :)

[FKS]

9 Div-ов,3 картинки
пример реализации смотреть в ExtJS
работает везде

[deerua]

здесь вроде все круто и кроссбраузерно

[deerua]

http://www.cssplay.co.uk/boxes/krazy.html

[4g3n7]

Круто, но не соответствует условиям ТЗ )

Я вот что подумал — конечно, можно дивами.
Но если таблицей сделать, то тянуть будет очень удобно — и тебе минимальная ширина/высота есть, и тянется на ура. Но таблица это таблица. Короче надо смотреть по ситуации.
Понятно, что на красивом вебдванольном дивном сайте такое дивами надо делать.

По теме — так 1 див, а в нем 4 картинки (раз в картинках надо).
Можно подстраховаться, и 4 дива и 4 картинки)

Тут палка о двух концах получается в любом случае, однозначного ответа думаю нет)

[ega]

* Пост доказывающий отсутствие верстальщиков на habrahabr

[bobrob]

Товарищ верстальщик ega, можно вопрос ? Кто вставляет елемент h1 в li??? так на сайте про аудио книги ... не вы ли эго верстали ? а конструкция "div align="center"" была в прошлом веке... И еще есть таблица символов для таких вещей как bull;... так что пожалуйста, не делайте вызказывания неподготовленым

[ega]

Товарищь рыба bobrob, отвечаю на ваш вопрос. Кто ест яйцо с боку? У меня есть один знакомый... Не вы ли так же делаете? А чипсы придумали в 1853 году. А здесь можно устанавливать картинки с лева от ника. Так что пожалуйста, не порите херню.

[bobrob]

Вас обижает правда? Вы не можете смирится с тем что нашли ошибки в вашем коде? Вам не хочется признать для себя что ваши знания утсарели? Это ваша проблемма. Ваш сайт показывает достаточно о ваших умениях верстки - они просто устарелые. Сначало войдите в шаг с веременем и потом давайте мнения про верстальщиков

[ega]

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

[bobrob]

Ну если вы не верстальщик, как вы можете давать такое мнение "Пост доказывающий отсутствие верстальщиков на habrahabr"???

[ega]

У Вас вообще нормально с логикой? Если бы я был верстальщиком, я бы как раз не мог так сказать.

[gen]

держите мой вариант - 2 картинки, 1 див )
http://rybakit.at.tut.by/containers/corners.html

[Hitryi_Pryanik]

Верстал таблицей, уголки через CSS. Пуленепробиваемо. Более надёжного способа не нашёл. Но есть стимул поискать :)

[whiteRed]

странно что никто еще не упомянул Nifty Corners

[XXXVII]

Просто это не то, что требуется