Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 108
Такие вещи давно одним дивом делаю ;-)
Вот мой пост, о том как это делается
По вашей задаче аналогично, только используем 3-писксельный бордер.
Вот мой пост, о том как это делается
По вашей задаче аналогично, только используем 3-писксельный бордер.
Тут идея в том, что на бордерах градиенты, ширина бордера может быть любой. Главное, что бордеры обязательно должны вставляться картинкой
сори не заметил градиента
но всё равно одним дивом можно - уголки повыше вырезаются и всё
но всё равно одним дивом можно - уголки повыше вырезаются и всё
блок тянется по ширине - по любому надо два блока на бордеры справа и слева, + 2 - сверху и снизу + твой способ на уголки
итого минимум 4 блока + уголки
либо делать большие картинки и почти так же, как я описал ниже, распихать по углам
http://www.vertexwerks.com/tests/sidebox…
итого минимум 4 блока + уголки
либо делать большие картинки и почти так же, как я описал ниже, распихать по углам
http://www.vertexwerks.com/tests/sidebox…
Любому, кто покажет кроссбраузерный вариант вёрстки на одних дивах, подсыплю кармы.
Ну уж нет. Тут используется то, что верхний левый угол можно наложить на верхний повторяющийся бордер и ничего не испортится. Попробуйте то же самое проделать, когда у вас закруглённые края.
хм, действительно так можно сделать
но у меня используется именно картинка для уголка - проверьте, все честно
но у меня используется именно картинка для уголка - проверьте, все честно
Будет работать только если уголки будут выполнены на оранжевом фоне, как в примере. Но это же не очень интересно. Хочется, чтобы уголки были на прозрачном фоне, чтобы можно было использовать элемент в разных местах с разным фоном.
Хотя формально ваш вариант годится. Держите карму.
За вёрстку, которая будет работать на разных фонах и с градиентом (как следствие, нужен png) - дам карму я и мой товарищ :)
За вёрстку, которая будет работать на разных фонах и с градиентом (как следствие, нужен png) - дам карму я и мой товарищ :)
Извините, но вы тоже неправильно поняли задачу. В нашем случае необходимо сделать не скругление углов без картинок, а именно разместить разместить картинки в бордерах и углах
Ну вобщем уже написали, задачу вы решаете немного не ту. Но всё равно очень интересно и познавательно. Подкинул бы кармы, да мне самому её "подрезали", больше не могу голосовать.
Да, занимательная верстка. Обязательно где-нибуть пригодится
100 строк кода в CSS ... Не многовато ли?
И сколько времени на это ушло? Думаю на таблицах намного быстрее.Меньше кода, меньше времени. Одним словом табличкой делать это ефективнее.
А семантически ... ну тут куча пустых дивов, а там было бы пустых ячеек. Так что для эксперимента не плохо.
И сколько времени на это ушло? Думаю на таблицах намного быстрее.Меньше кода, меньше времени. Одним словом табличкой делать это ефективнее.
А семантически ... ну тут куча пустых дивов, а там было бы пустых ячеек. Так что для эксперимента не плохо.
Я также считаю, но мне кажется, что есть методы более эффективной верстки данной задачи.
Самый эфективный метод данноой верстки это сделать на табличке. Быстрее и меньше кода. Если вам кажется что есть методы более эффективной верстки данной задачи, давайте ссылку или опишите их. Сравним, посмотрим где меньше кода, на что уходит меньше времени, что еффективнее в целом.
скорость верстки не единственный показатель
а какие показатели?
По моему именно скорость плюс размер кода
По моему именно скорость плюс размер кода
+ легкая читаемость (простота)
+ реюз (да, даже в верстке)
+ семантическая чистота(как минимум для поисковиков)
продолжать?
+ реюз (да, даже в верстке)
+ семантическая чистота(как минимум для поисковиков)
продолжать?
согласен.
В большинстве случаев есть обратная зависимость между объёмом кода и легкостью читаемости, то есть чем больше код тем сложнее понять его работу. Опять же бывает и наоборот, но я говорю про большинство. Касаемо нашего примера таблица очень легко читается.
Что такое ваше "реюз" мне неизвестно.
Семантика вещь интересная, но если говорить откровенно многие употребляют это слово до конца не понимая его значение. Оно как бы модное сейчас.
В большинстве случаев есть обратная зависимость между объёмом кода и легкостью читаемости, то есть чем больше код тем сложнее понять его работу. Опять же бывает и наоборот, но я говорю про большинство. Касаемо нашего примера таблица очень легко читается.
Что такое ваше "реюз" мне неизвестно.
Семантика вещь интересная, но если говорить откровенно многие употребляют это слово до конца не понимая его значение. Оно как бы модное сейчас.
Видимо у некоторых единственный показатель - отсутствие таблиц ;)
Вариантов как можно сверстать «уголки и бордеры» – тьма, при этом какого-то идеального варианта на все случаи нет.
В идеале, конечно, это использование css3, но на практике, естественно, это не применимо.
Данная задача не сильно занимательна, на самом деле, гораздо занимательнее сверстать полностью резиновый аналог, только чтобы все уголки/бордеры были полупрозрачными пнг, блок можно было задавать не только в процентах/фиксированным, но и сделать по контенту (будь то float или абсолютное позиционирование). Ну и чтобы жизнь сказкой не казалась – для изображения использовать css-спрайты (хотя бы все уголки в одно изображение). Ну и чтоб ие это все понимал =)
Вот это хорошая задача, да =)
В идеале, конечно, это использование css3, но на практике, естественно, это не применимо.
Данная задача не сильно занимательна, на самом деле, гораздо занимательнее сверстать полностью резиновый аналог, только чтобы все уголки/бордеры были полупрозрачными пнг, блок можно было задавать не только в процентах/фиксированным, но и сделать по контенту (будь то float или абсолютное позиционирование). Ну и чтобы жизнь сказкой не казалась – для изображения использовать css-спрайты (хотя бы все уголки в одно изображение). Ну и чтоб ие это все понимал =)
Вот это хорошая задача, да =)
Я могу сделать используя 2 картинки и 8 (или 9) элементов.
что-то мне подсказывает, что можно обойтись двумя дивами, если то что нужно фиксированных размеров...
для варианта 200х200 будет примерно так:
...
text
все в что style вынести в стили и все :)
img1.png - картинка из того слоя, где градиентная граница
img2.png - внутренняя штуковина
для варианта 200х200 будет примерно так:
...
text
все в что style вынести в стили и все :)
img1.png - картинка из того слоя, где градиентная граница
img2.png - внутренняя штуковина
так и знал что будет урезано... короче три дива и две картинки хватает
Ну зачем ограничивать задачу фиксированием размеров?
Фиксированных размеров это тривиально и не интересно. Интересна полная резина.
Если "то что нужно фиксированных размеров", то можно обойтись ровно одной картинкой - вот той, что в посте.
дайте полное задание, а не сферического коня в вакууме
если например в этом блоке присутствует заголовок и текст, то верстка будет намного семантичнее и проще
если например в этом блоке присутствует заголовок и текст, то верстка будет намного семантичнее и проще
Хмм.. Ну допустим, наличие заголовка и текста будет обязательным. Все-таки не просто так этот блок будет создаваться=)
А вы можете сказать что вы понимаете под "семантичнее"?
ну если взять пример автора, то заголовок может отвечать за верхнюю, текст — за левую и правую, а сам контейнер — за нижнюю границы. уже минус 4 элемента.
я сталкивался только с решениями без градиентной рамки, потому обычно обходился вообще без лишних bl, tl и т.п.
я сталкивался только с решениями без градиентной рамки, потому обычно обходился вообще без лишних bl, tl и т.п.
например один из уголков будет отрисовываться фоном к <h1> а не от <div>, а другой будет фоном для <p>
Ладно 10 блоков, ладно много css, но 6 исключений для IE это зачем?
Убил бы дизайнера за такой цвет фона, за такие границы блока и заставил бы переделать.
Тут верстка обсуждается а не дизайн...
Это мой вариант решения проблемы :)
Это решение 50\50. Зависит очень от сути проекта, арт-директора и ответственного дизайнера.
50% что не решите так проблему, а в проекте (пусть небольшую) сложность заведете :).
50% что не решите так проблему, а в проекте (пусть небольшую) сложность заведете :).
как обыватель в дизайнерских кругах скажу - "а мне нравится :-D"
Здесь давно написан как это сделать
http://www.artlebedev.ru/tools/technogrette/html/shadows/
Работает на отлично во всех браузерах.
http://www.artlebedev.ru/tools/technogrette/html/shadows/
Работает на отлично во всех браузерах.
не лучшая идея размещать уголки и бордеры при помощи position:absolute
в ИЕ при нечетных длине и высоте блока не правильно позиционирует блоки справа и снизу, и выскакивают полоски (белый фон) соотвесттвенно справа и снизу.
для предложенного способа надо еще пару экспрешинов :(
с теми катринками что даны в варианте автора, лучше (и проще) сделать 8 вложеных блоков - тогда и бордеры и уголки будут на месте ВСЕГДА!
и... ширина будет именно 50%, а не 50%+10px+10px как в примере!
и... кода в N раз меньше, и... без экспрешинов
пример http://users.cosmostv.by/rmaksim/coding/…
в ИЕ при нечетных длине и высоте блока не правильно позиционирует блоки справа и снизу, и выскакивают полоски (белый фон) соотвесттвенно справа и снизу.
для предложенного способа надо еще пару экспрешинов :(
с теми катринками что даны в варианте автора, лучше (и проще) сделать 8 вложеных блоков - тогда и бордеры и уголки будут на месте ВСЕГДА!
и... ширина будет именно 50%, а не 50%+10px+10px как в примере!
и... кода в N раз меньше, и... без экспрешинов
пример http://users.cosmostv.by/rmaksim/coding/…
угу, осталось заюзать спрайты — вообще красота будет
спрайты не для этого способа :( - тут тока отдельными картинками, зато просто и понятно... надеюсь :)
спрайты везде подойдут, главное, их правильно клеить :)
хотелось бы пример для моего варианта :)
можно даже не для всего, а только для верхнего левого и правого нижнего уголка одной картинкой?
можно конечно сделать картинку 1000х1000, и соотв. уголки разместить по углам,
ведь подразумеваешь что это можно сделать ЭТО одним спрайтом???
можно даже не для всего, а только для верхнего левого и правого нижнего уголка одной картинкой?
можно конечно сделать картинку 1000х1000, и соотв. уголки разместить по углам,
ведь подразумеваешь что это можно сделать ЭТО одним спрайтом???
нет, ну что Вы, минимум три
#tl,#tr,#br,#bl
#t,#b
#r,#l
как это сделать, чтобы ничего не развалилось, можно прочитать здесь (ближе к концу). Для примера, к сожалению, нет времени
#tl,#tr,#br,#bl
#t,#b
#r,#l
как это сделать, чтобы ничего не развалилось, можно прочитать здесь (ближе к концу). Для примера, к сожалению, нет времени
я пока не знаю, как можно задавать положение от правой или нижней границы (например right-25px;)
а без этого не представляю, как здесь можно их использовать...
а без этого не представляю, как здесь можно их использовать...
а, ну тогда конечно... :)
тогда в данном случае можно и ДВУМЯ!!!
#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://users.cosmostv.by/rmaksim/coding/… (4-й сверху)
что имеем:
первый способ: 8 файлов - 504 байта
второй способ: 2 файла - 247 байт
немного больше стилей, блоков в html практически столько же (возможны варианты +-1,2 блока)
А почему бы не использовать javascript для скругления бордеров? Это ж элементарная задача тем более, когда все уже придумано:
http://blue-anvil.com/archives/anti-alia…
пример использования:
http://blue-anvil.com/jquerycurvycorners…
http://blue-anvil.com/archives/anti-alia…
пример использования:
http://blue-anvil.com/jquerycurvycorners…
Можно поджечь представительства майкрософт в разных странах и тогда код существенно сократится.
Прийду домой, попробую сверстать.
А вообще идея о мастер-классах — гут.
Давайте по чаще такое устраивать.
А вообще идея о мастер-классах — гут.
Давайте по чаще такое устраивать.
Прикольно, Но никакой симантичности в дивах используемых для оформления нет.
Я уже раз писал, повторю здесь :)
Предлагаю написать открытое письмо (типа как Opera), чтобы в следующей версии браузеров все производители поддержали возможность использовать множественные бэкграунды из CSS3. И наконец-то начать делать семантически верную вёрстку.
Не такая уж и сложная это задача. Но если это сделать одновременно во всех браузерах, то следующие страницы будут более правильными. Мы же стремимся к совершенству.
Старые браузеры поддерживать через костыли.
Поддержать остальные рекомендации W3C можно не просить, но хотя бы это :) Для современного дизайна это более необходимая вещь, по-моему.
Предлагаю написать открытое письмо (типа как Opera), чтобы в следующей версии браузеров все производители поддержали возможность использовать множественные бэкграунды из CSS3. И наконец-то начать делать семантически верную вёрстку.
Не такая уж и сложная это задача. Но если это сделать одновременно во всех браузерах, то следующие страницы будут более правильными. Мы же стремимся к совершенству.
Старые браузеры поддерживать через костыли.
Поддержать остальные рекомендации W3C можно не просить, но хотя бы это :) Для современного дизайна это более необходимая вещь, по-моему.
я бы лучше поддержал background-size еще, ой как он мне был нужен сегодня ночью.... такое городить пришлось. Да и в принципе, тут бы тоже помогло, весь квадрат с рамкой в бэкграунд, который по 100% размерам DIV'а выстраивается, всего один элемент был бы нужен. Правда тогда эта штучка масштабировалась бы вместе с шириной бордеров. С другой стороны такой эффект может быть даже предпочтительней иногда.
вот такой вариант
дивно, кроссбраузерно, без хаков, семантично, без лишних блоков, шрифто-размеро-независимо =)
как такое? )
этот вариант рассчитан на бесконечную резину; если располагать какими-то ограничениями на размеры, то кол-во картинок можно сократить в два раза.
дивно, кроссбраузерно, без хаков, семантично, без лишних блоков, шрифто-размеро-независимо =)
как такое? )
этот вариант рассчитан на бесконечную резину; если располагать какими-то ограничениями на размеры, то кол-во картинок можно сократить в два раза.
гыг, количество картинок и так можно до 3 сократить
Ха! Занятно. Смущает лишь несколько непривычный взгляд на внутренние блоки (
) за счет которых Вы отказались от контейнеров с оформлением из-за перенесения отображения бордеров на них.
По сравнения с Вашим вариантом у меня вышло (нужно кликнуть по фразе "многое другое" с иконкой баллуна рядом) не так оригинально, но и контейнеров не так много, имхо.
P.S. Это не пиар, честно-честно.
ну во-первых у вас верхний правый угол отсутствует
во-вторых пример мой более-менее приближен к реальности - код близок к коду на многих сайтах.
в-третьих я делал с рассчетом на бесконечную резину, на практике блок обычно не бывает больше некоторых размеров - в этом случае можно было убрать например блок text и сократить кол-во картинок, не сильно потеряв в их размере
ЗЫ: и имхо ооочень плохая идея с кликом, особенно учитывая, что реализация на флеше, особенно учитывая мой FlashBlock ;)))
во-вторых пример мой более-менее приближен к реальности - код близок к коду на многих сайтах.
в-третьих я делал с рассчетом на бесконечную резину, на практике блок обычно не бывает больше некоторых размеров - в этом случае можно было убрать например блок text и сократить кол-во картинок, не сильно потеряв в их размере
ЗЫ: и имхо ооочень плохая идея с кликом, особенно учитывая, что реализация на флеше, особенно учитывая мой FlashBlock ;)))
1) приношу извинения - у меня картинка не догрузилась...
4) http://hlomzik.quaint.ru/web-dev.info.jp… - just for fun =)
4) http://hlomzik.quaint.ru/web-dev.info.jp… - just for fun =)
6 div-ов, 3 или 4 картинки.
У меня ушло 5 DIV-блоков на более сложную верстку. Проверял в разных баузерах. работает все отлично пока до определенного размера (под больший размер пока не успел сделать *-)).
у меня ушло бы намного меньше чем у каждого из вас просто потому что я не сижу сутками на всяких трепалках и не решаю чужие глупые задачи когда надо сделать что-то, но это очень сложное, и вместо того чтобы придумать что-то другое надо париться над тем что есть
9 Div-ов,3 картинки
пример реализации смотреть в ExtJS
работает везде
пример реализации смотреть в ExtJS
работает везде
здесь вроде все круто и кроссбраузерно
http://www.cssplay.co.uk/boxes/krazy.html
Круто, но не соответствует условиям ТЗ )
Я вот что подумал — конечно, можно дивами.
Но если таблицей сделать, то тянуть будет очень удобно — и тебе минимальная ширина/высота есть, и тянется на ура. Но таблица это таблица. Короче надо смотреть по ситуации.
Понятно, что на красивом вебдванольном дивном сайте такое дивами надо делать.
По теме — так 1 див, а в нем 4 картинки (раз в картинках надо).
Можно подстраховаться, и 4 дива и 4 картинки)
Тут палка о двух концах получается в любом случае, однозначного ответа думаю нет)
Я вот что подумал — конечно, можно дивами.
Но если таблицей сделать, то тянуть будет очень удобно — и тебе минимальная ширина/высота есть, и тянется на ура. Но таблица это таблица. Короче надо смотреть по ситуации.
Понятно, что на красивом вебдванольном дивном сайте такое дивами надо делать.
По теме — так 1 див, а в нем 4 картинки (раз в картинках надо).
Можно подстраховаться, и 4 дива и 4 картинки)
Тут палка о двух концах получается в любом случае, однозначного ответа думаю нет)
* Пост доказывающий отсутствие верстальщиков на habrahabr
Товарищ верстальщик ega, можно вопрос ? Кто вставляет елемент h1 в li??? так на сайте про аудио книги ... не вы ли эго верстали ? а конструкция "div align="center"" была в прошлом веке... И еще есть таблица символов для таких вещей как bull;... так что пожалуйста, не делайте вызказывания неподготовленым
Товарищь рыба bobrob, отвечаю на ваш вопрос. Кто ест яйцо с боку? У меня есть один знакомый... Не вы ли так же делаете? А чипсы придумали в 1853 году. А здесь можно устанавливать картинки с лева от ника. Так что пожалуйста, не порите херню.
Вас обижает правда? Вы не можете смирится с тем что нашли ошибки в вашем коде? Вам не хочется признать для себя что ваши знания утсарели? Это ваша проблемма. Ваш сайт показывает достаточно о ваших умениях верстки - они просто устарелые. Сначало войдите в шаг с веременем и потом давайте мнения про верстальщиков
держите мой вариант - 2 картинки, 1 див )
http://rybakit.at.tut.by/containers/corners.html
http://rybakit.at.tut.by/containers/corners.html
Верстал таблицей, уголки через CSS. Пуленепробиваемо. Более надёжного способа не нашёл. Но есть стимул поискать :)
странно что никто еще не упомянул Nifty Corners
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Занимательная верстка