Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 147
Очень элегантное решение, вот только ие как всегда все портит :(
Портит, но не совсем. Костыли всё-таки есть =)
Думаю в данном случае вполне допустимы.
Думаю в данном случае вполне допустимы.
Да ну это не то... Отдельный css под ie и содержимое этого самого css портит всю простоту и красоту решения. А если бы этот нехитрый метод работал везде... Но это уже из разряда мечтаний и молитв к разработчикам ослика =)
жто наступит тогда, когда МС начнет признавать не свои стандарты...
С чего вы взяли, что есть стандарты на CSS? Приведите ссылку на них ;)
С чего вы взяли, что в разработке спецификации не было MS CSS? Опять же был бы рад ссылке на беспочвенное утверждение.
В одном предложении 2 существенные ошибки...
С чего вы взяли, что в разработке спецификации не было MS CSS? Опять же был бы рад ссылке на беспочвенное утверждение.
В одном предложении 2 существенные ошибки...
ясное дело, что *стандарта* не существует, но w3c тоже ведь не проходимцы и было бы выгодно всем, если бы *все* веб браузеры поддерживали одну спецификацию...
конечно проще закрыть глаза на проблему и не признавать ее, нежели единожды решить... но куда девать маркетинг? каким еще "магическим" способом заставить пользователей "сидеть" на своей поделке?.. приведите хоть один (не промоушен) сайт, скажем, опера-онли...
не считайте себя умнее тысяч веб-разработчиков и веб-дизайнеров, для которых этот продукт даже не кость в горле...
конечно проще закрыть глаза на проблему и не признавать ее, нежели единожды решить... но куда девать маркетинг? каким еще "магическим" способом заставить пользователей "сидеть" на своей поделке?.. приведите хоть один (не промоушен) сайт, скажем, опера-онли...
не считайте себя умнее тысяч веб-разработчиков и веб-дизайнеров, для которых этот продукт даже не кость в горле...
А кто по вашему w3? Марсиане, или кристально честные специалисты или высшая сила? Вы читали цели и задачи w3? Если читали, то глупых вопросов и криков было бы меньше...
С чего вы взяли, что IE поделка? На поделке сидит > 2/3 пользователей. Что за тон в отношении компаний? Вы хоть раз занимались поддержкой продукта имеющего > 10000 копий(я не говорю уже о нескольких десятках миллионов продуктов основаных на движке IE)? Вы представляете сколько будет стоить переделки всех систем использующих движок IE? Мы не в состоянии собрать даже 0.00001% этой суммы. А кричите - долой\бойкот.
Ни кому он ни кость, поскольку, тысячи веб-разработчиков, в отличии, от кричащих, прекрасно знают все 'особенности' IE и способы как решать эти проблемы. MS прекрасно общается с ними. Попробуйте немного почитать их сайт.Не будте смешны в их глазах с криками о бойкоте.
За '-' отдельное спасибо. Это самый самый сильный довод с вашей сторон ;). Попробуйте научиться вести дискуссию, хотя бы уважая собеседников.
С чего вы взяли, что IE поделка? На поделке сидит > 2/3 пользователей. Что за тон в отношении компаний? Вы хоть раз занимались поддержкой продукта имеющего > 10000 копий(я не говорю уже о нескольких десятках миллионов продуктов основаных на движке IE)? Вы представляете сколько будет стоить переделки всех систем использующих движок IE? Мы не в состоянии собрать даже 0.00001% этой суммы. А кричите - долой\бойкот.
Ни кому он ни кость, поскольку, тысячи веб-разработчиков, в отличии, от кричащих, прекрасно знают все 'особенности' IE и способы как решать эти проблемы. MS прекрасно общается с ними. Попробуйте немного почитать их сайт.Не будте смешны в их глазах с криками о бойкоте.
За '-' отдельное спасибо. Это самый самый сильный довод с вашей сторон ;). Попробуйте научиться вести дискуссию, хотя бы уважая собеседников.
С чего у вас такая истерика? Похоже, что "кричаший" здесь пока вы один...
> Это ваше право считать нормальным то количество костылей и подпорок, которые заставляют ие показывать так, как этого хочет дизайнер
> На поделке сидит > 2/3 пользователей.
Это вообще никак не характеризует программу... На ВАЗ тоже много народу ездит, но лучше он от этого не становится.
> Вы представляете сколько будет стоить переделки всех систем использующих движок IE?
Не понимаю для чего нужно переделывать все существующие программы, использующие эту поделку. Можно было просто сделать нормальный браузер еще в шестом поколении.
> Что за тон в отношении компаний?
ммм... а каким должен быть тот? и что за тон у меня?
> Не будте смешны в их глазах
Буду стараться, спасибо
> Это ваше право считать нормальным то количество костылей и подпорок, которые заставляют ие показывать так, как этого хочет дизайнер
> На поделке сидит > 2/3 пользователей.
Это вообще никак не характеризует программу... На ВАЗ тоже много народу ездит, но лучше он от этого не становится.
> Вы представляете сколько будет стоить переделки всех систем использующих движок IE?
Не понимаю для чего нужно переделывать все существующие программы, использующие эту поделку. Можно было просто сделать нормальный браузер еще в шестом поколении.
> Что за тон в отношении компаний?
ммм... а каким должен быть тот? и что за тон у меня?
> Не будте смешны в их глазах
Буду стараться, спасибо
он (МС) и свои-то иногда не соблюдает...
Красоту решения не особо портит если хорошо понять, что написано для ie.
Попробую разобрать по полочкам.
zoom:1; - исправляет баг с лайот для ие, где-то на хабре была статья про это. Это универсальный способ правки многих глюков для ie.
behavior фактически искуственно добавляет требуемые псевдоэлементы для ie. Наша задача: добавить два элемента - перед основным содержимым элемента и после, для этого используем this.innerHTML=Элемент1+this.innerHTML+Элемент2. Но добавить это нужно всего один раз, поэтому используем expression: для элемента искусственно вводим некий атрибут isInserted. Если этот элемент еще неопределен (!this.isInserted=true), то задаем этому атрибуту значение (this.isInserted=(что-то определенное)), если уже определен (!this.isInserted!=true), то ничего не делаем. Как видно Элемент1 и Элемент2 в точности соответствуют псевдоэлементам :before и :after
Попробую разобрать по полочкам.
zoom:1; - исправляет баг с лайот для ие, где-то на хабре была статья про это. Это универсальный способ правки многих глюков для ie.
behavior фактически искуственно добавляет требуемые псевдоэлементы для ie. Наша задача: добавить два элемента - перед основным содержимым элемента и после, для этого используем this.innerHTML=Элемент1+this.innerHTML+Элемент2. Но добавить это нужно всего один раз, поэтому используем expression: для элемента искусственно вводим некий атрибут isInserted. Если этот элемент еще неопределен (!this.isInserted=true), то задаем этому атрибуту значение (this.isInserted=(что-то определенное)), если уже определен (!this.isInserted!=true), то ничего не делаем. Как видно Элемент1 и Элемент2 в точности соответствуют псевдоэлементам :before и :after
Я бы сказал, что в данном случае такое решение не очень интересно, ввиду того, что есть решения, которые все браузеры поддерживают. А про ИЕ - это отдельный разговор. Да и вообще, пора уже как стандарт использовать закругления. Вроде они в CSS3 есть.
а можно ссылочку на такое решение? div content /div
самое смешное, что когда закругления станут стандартом они перестанут быть модными, и все будут делать что-то другое
почему вы так считаете?
Утверждение верно только в тех случаях, когда тенденция не несет практической пользы. В данном случае возможно это и не так (Мне попадались результаты исследований, сводившиеся к тому, что текст лучше запоминается читателем в в блоке со скругленными краями или в окружности, нежели в прямоугольнике. Правда авторететность авторов под вопросом. Да и они объяснили это тем, что это сильно контрастирует на фоне личного опыта большинства людей. Так как блоки текста вписаные в прямоугольник гораздо более распространены. )
Очень здорово! Прямо сейчас попробую на текущем проекте. Спасибо!
Полный ништяг
Удобно, конечно, но зачем использовать хаки, когда можно их не использовать? Есть способы сверстать то же самое не менее "непробиваемым" образом, но более надёжно. Вот тут — http://www.cssplay.co.uk/boxes/ — обвыбираться можно.
Вот выпустит через пару лет Майкрософт какой-нибудь нормальный браузер, или пользователь юзает браузер, не умеющий ни :after, ни expression в цссках — что будем делать?
Вот выпустит через пару лет Майкрософт какой-нибудь нормальный браузер, или пользователь юзает браузер, не умеющий ни :after, ни expression в цссках — что будем делать?
Вот выпустит через пару лет Майкрософт какой-нибудь нормальный браузер, или пользователь юзает браузер, не умеющий ни :after, ни expression в цссках — что будем делать?
Псевдоэлементы :after и :before — стандартные. И если вдруг случится чудо и Microsoft выпустит «нормальный» браузер, поддерживающий стандарты, то все будет просто хорошо =)
У пользователя с таким браузером просто будет блок одного цвета и все.
Лично я не могу сказать, что вот этот способ превосходит метод, описанный выше. Просто сравните html-код.
Я говорю о том, что если выйдет нормальный браузер от МС, то он будет поддерживать И :after, И экспрешшены. Вы сможете гарантировать в таких условиях работоспособность данного примера?
Лично я да, могу. А вы?)
Эти уголки по идее поверх элементов :before и :after лягут, так что будет всё ок.
Можно подключать css-файл для ie не выше 7.0
Можно подключать css-файл для ie не выше 7.0
А можно использовать, например, вот такой — http://www.cssplay.co.uk/boxes/snazzy.html — подход, и не заботиться ни о будущих версиях браузеров, ни о браузерах, которые не поддерживают :after, ни об проблемах с яваскриптами, которые у некоторых пользователей убивают эксплорер, а у других начинается мерцание всей страницы.
Этот вариант валиден, работает везде, работает с отключёнными картинками и яваскриптом. Да, он захламляет код по сравнению с обсуждаемым вариантом, но без жертв в нашей профессии никак. Лично мне четыре-пять строк в коде не мешают.
Этот вариант валиден, работает везде, работает с отключёнными картинками и яваскриптом. Да, он захламляет код по сравнению с обсуждаемым вариантом, но без жертв в нашей профессии никак. Лично мне четыре-пять строк в коде не мешают.
если правильно подключать css — через условные комменты, можно в них написать "lte IE7" (ну или с пробелом, не уверен), то 8 и более IE уже не будут этот стиль грузить
Да ладно вам спорить, не выйдет никогда нормальный браузер от МС. Если бы им это было надо, давно бы уже сделали.
они там один хуже другого… вот этот способ при масштабировании в FF глючит жутко… зажал я ctrl, покрутил колесом мыши вверх, да и закрыл
а то что автор поста предлагает — вполне ничего
а то что автор поста предлагает — вполне ничего
Уважаемый, приведите ссылку на "стандарты"...
Хорошее решение, но мне все-таки больше нравится jQuery для создания углов. jOuery более универсально, а соответственно проще.
А как же JS, который не у всех работает?
Безотносительно к jQuery и закруглённым уголкам, мне представляется, что такой вопрос уже становится неактуальным. Хотя я и сторонник того, чтобы сайт смотрелся хорошо или хотя бы приемлемо везде, но сейчас, боюсь, уже можно не принимать во внимание пользователей без Javascript'а: при таком распространении Ajax, визуальных JS-эффектов и прочего JS нужен почти для любого сайта.
Вопрос весьма актуален.
Многие движки по генерации превьюшек не понимают JS, зато понимают стили и бекграунды.
Уж лучше код будет на 2 Кб больше, но валидно и однозначно отображаться везде.
Многие движки по генерации превьюшек не понимают JS, зато понимают стили и бекграунды.
Уж лучше код будет на 2 Кб больше, но валидно и однозначно отображаться везде.
Но в IE без JS он ведь не будет отображаться.
А что такое движок по генерации превьюшек? (Простите, если вопрос глупый ;) )
А что такое движок по генерации превьюшек? (Простите, если вопрос глупый ;) )
Если бекграунд реализован через стили и/или таблицы, дивы, то он будет отображаться и без JS.
Генератор превьюшек - это программа, генерирующая уменьшенный вид страницы и отображающая его в виде графического файла. Например, расширения для огненного лиса и Google: http://ackroyd.de/googlepreview/
Генератор превьюшек - это программа, генерирующая уменьшенный вид страницы и отображающая его в виде графического файла. Например, расширения для огненного лиса и Google: http://ackroyd.de/googlepreview/
Согласен.
По сравнению с multiple backgrounds (поддерка только в Safari) — это всё костыли, поэтому играем по правилам военного времени.
По сравнению с multiple backgrounds (поддерка только в Safari) — это всё костыли, поэтому играем по правилам военного времени.
Подскажите решение у jQuery, которое так делает?
Если просто wrap, то не интересно.
Если просто wrap, то не интересно.
Уже готового решения у jQuery не видел, у меня есть скрипт на jQuery который добавляет в том числе и закругления. Для создания закруглений создаются дополнительные дивы для которых указывается свой back-ground. Примеры есть тут
habr сказал что не будет правильно публиковать ссыку тут http://aky.pp.ru/knowledge/plop.php
Небольшое дополнение: для лисы также можно использовать -moz-border-radius: Npx;
Можно, но что-то выглядит оно как-то не очень, нет антиальязинга, заметны лесенки из пикселей, давно не смотрел правда, может что-то поменялось?
P.S.:
И в Сафари можно так: -webkit-border-radius: 10px; =)
P.S.:
И в Сафари можно так: -webkit-border-radius: 10px; =)
А реально сделать точно так же, но с перламутровыми пуговицами с рамкой по краям 1px (на gif пусть такая окантовка уже есть)?
Nifty cube - более громоздкий, но более работающий вариант.
я вот тоже в первую очередь про него подумал, прочитав из заголовка про скруглённые углы.
Не понравился за неумение делать бордюры... А это принципиально :)
Позволю себе с вами не согласиться.
Полностью поддерживаю. Очень хорошая реализация. Правда в Опере бывают сложности, если фон не белый. Это можно обойти, добавив вложенный div, но всё равно неприятно. Не исключаю, впрочем, что этот недостаток уже устранён — давно не смотрел относительно новых версий.
Если б не осёл, то всё было бы прекрасно.
НО:
Для проектов, нацеленных на рядового пользователя это рак. Доля ИЕ - значительно больше половины. Джаваскрипт хаки приводят к мерцанию для hover элементов.
Кроме того решение не универсально, как уже сказал prolis.
НО:
Для проектов, нацеленных на рядового пользователя это рак. Доля ИЕ - значительно больше половины. Джаваскрипт хаки приводят к мерцанию для hover элементов.
Кроме того решение не универсально, как уже сказал prolis.
спасибо. Как раз сегодня по работе такакя задача стоит. Вот и испробуем :)
Решение конечно отличное!!! Но все смазывает javascript для IE.... К сожалению пользователей ИЕ очень большое количество от 50 до 80%... ИМХО юзать js для оформления страниц зло... тем более что ie рендерит js медленнее всех :(((
Но на проектах где пользователи ИЕ составляют не доминирующий процент я думаю юзать этот метод обязательно!!!
Но на проектах где пользователи ИЕ составляют не доминирующий процент я думаю юзать этот метод обязательно!!!
извините за тупой вопрос...
А какого размера в пикселях должны быть эти гифы border_*.gif?
А какого размера в пикселях должны быть эти гифы border_*.gif?
У меня были 7 в высоту и 8 в ширину
Но естествено можно использовать и другие, поправив код
Но естествено можно использовать и другие, поправив код
у меня такие же эти гифы, но результат в Firefox/2.0.0.7
вот такой:
http://design.loreto.ru/ff.jpg
Пример "экспериментального" html такой:
Example
@import "main.css";
@import "print.css";
@import "fix_ie.css";
Текст
css Ваш на 100%
Почему глюк имеет место быть?
Кстати, в IE все OK!
вот такой:
http://design.loreto.ru/ff.jpg
Пример "экспериментального" html такой:
Example
@import "main.css";
@import "print.css";
@import "fix_ie.css";
Текст
css Ваш на 100%
Почему глюк имеет место быть?
Кстати, в IE все OK!
у меня такие же эти гифы, но результат в Firefox/2.0.0.7
вот такой:
http://design.loreto.ru/ff.jpg
Пример "экспериментального" html такой:
http://design.loreto.ru/ex.html
css Ваш на 100%
Почему глюк имеет место быть?
Кстати, в IE все OK!
вот такой:
http://design.loreto.ru/ff.jpg
Пример "экспериментального" html такой:
http://design.loreto.ru/ex.html
css Ваш на 100%
Почему глюк имеет место быть?
Кстати, в IE все OK!
Пока не исследовал почему, но при strict некоректно работает
Берите этот DOCTYPE:
Берите этот DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Гм... у меня в ИЕ-6, в Опере и ФФ тоже всё ОК
к сожалению фраза «Работает во всех современных броузерах кроме ie» значит что технология не работает.
если дочитать до конца - то можно обнаружить решение и для ie
а то что для ie применяются отдельные правила (которые даже рекомендуют выносить в отдельный файл) - это уже давно норма.
а то что для ie применяются отдельные правила (которые даже рекомендуют выносить в отдельный файл) - это уже давно норма.
Я дочитал до конца. Мне больше нравиться CrazyForms потмоу что он кросс платформенный.
Возможно, вы имели в виду: кросс-браузерный
Спасибо за заметку. Для моего локального проекта как раз самое то, ибо всех своих пользователей перевел на Opera/Firefox, а начальнег пользуется Safari на своем Mac`е. :)
предостерегаю от использования expressions в css на IE: при наличие скриптов, которые работают с dom моделью, будет тормозить. сам на эти грабли накололся.
не уверен, что во всех случаях, правда. у меня был css класс с expression на ie, который был проаплпен на input элементы. при создании input'а через скрипты начинались жуткие тормоза.
не уверен, что во всех случаях, правда. у меня был css класс с expression на ie, который был проаплпен на input элементы. при создании input'а через скрипты начинались жуткие тормоза.
Если бы все так просто...
а где можно посмотреть на такое решение в действии?
А то полдня бьюсь - не получается полностью красиво.
А то полдня бьюсь - не получается полностью красиво.
К сожалению в сети пока нет. Чтобы не мучались выложу исходный код полностью:
Картинки с уголками имеют ширину 8px а высоту 7px
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
body{padding:30px}
.incut{background: #dff7ff;padding: 20px;}
.incut:before{content:url(i/border_tl.gif);background: url(i/border_tr.gif) no-repeat 100% 0;height: 7px;display: block;margin: -20px -20px 13px -20px;}
.incut:after{content:url(i/border_bl.gif);background: url(i/border_br.gif) no-repeat 100% 0;height: 7px;display: block;margin:13px -20px -20px -20px;}
.incut{zoom:1;behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '<span style="background: url(i/border_tr.gif) no-repeat 100% 0;height: 7px;display: block;margin: -20px -20px 13px -20px;"><img src="i/border_tl.gif" alt="" /></span>' + this.innerHTML + '<span style="background: url(i/border_br.gif) no-repeat 100% 0;height: 7px;display: block;margin:13px -20px -20px -20px;"><img src="i/border_bl.gif" alt="" /></span>') : '');}
</style>
</head>
<body>
<div class="incut">
Текст
</div>
</body>
</html>
Картинки с уголками имеют ширину 8px а высоту 7px
Впервые видел реализацию на http://mozilla.ru. Потом только когда начал и сам юзать понял что под ИЕ не работает нифига :)
экспрешены периодически подвешивают IE
Каких ещё старых браузерах? Написал же, что пример работает в Firefox 1, Opera 7, даже в Netscape 7.2 работает. Вы знаете ещё какие-то старые браузеры, доля которых больше 0.1%?
В очень старых браузерах пользователи просто не увидят закругленные уголки. Из-за этого сайт ваш поверьте не покинут, они даже знать не будут, что там должны быть уголки.
В очень старых браузерах пользователи просто не увидят закругленные уголки. Из-за этого сайт ваш поверьте не покинут, они даже знать не будут, что там должны быть уголки.
>Куда лучше написать 4 div'а
При редизайне сайта, тоже будете по всему контенту лазить, менять на пять дивов если вдруг дизайнеры сложнее перерисуют? А если сайт большой, корпоративный? Поверьте, подобных сайтов встречал не мало.
При редизайне сайта, тоже будете по всему контенту лазить, менять на пять дивов если вдруг дизайнеры сложнее перерисуют? А если сайт большой, корпоративный? Поверьте, подобных сайтов встречал не мало.
это бы прокатило лет 5 назад. сейчас народ движется к семантике, и оформление через html-код уже не катит… вот например техника Sliding doors, она вполне рабочая без затрат html, но использовать можно только для двух уголков.
а можно вот так делать, если дивы интересны
Конкретно каждому ответить, к сожалению, не получиться, потому буду писать здесь.
Товарищи, все эти методы закругления уголков у элементов БЕЗ использования картинок — это, конечно, прекрасно, но посмотрите в самом начале темы, как звучит задача проекта.
Если далее. Вот вы говорите, что тема не раскрыта, ибо в ie используется js. А теперь скажите, кто в основном эти люди: пользователи ie? Я сам отвечу. В основном это те, которые даже не подозревают о существовании других браузеров, более удобных, быстрых, функциональных, которые не могут себе представить, что ie, идущему в стандартной комплектации Windows, существует множество альтернатив. Вы думаете, этим людям интересно, как сделаны закругленные уголки у элементов? Они есть. И это главное.
Товарищи, все эти методы закругления уголков у элементов БЕЗ использования картинок — это, конечно, прекрасно, но посмотрите в самом начале темы, как звучит задача проекта.
Если далее. Вот вы говорите, что тема не раскрыта, ибо в ie используется js. А теперь скажите, кто в основном эти люди: пользователи ie? Я сам отвечу. В основном это те, которые даже не подозревают о существовании других браузеров, более удобных, быстрых, функциональных, которые не могут себе представить, что ie, идущему в стандартной комплектации Windows, существует множество альтернатив. Вы думаете, этим людям интересно, как сделаны закругленные уголки у элементов? Они есть. И это главное.
Вот что значит Веб не для людей делают. Ведь видит W3C сколько хаков люди придумывают для этого закруглении. Почему просто нельзя -moz-boreder-round ввести в спецификацию? Ведь правила парсинга и отображения уже есть у геко.
по моему, они там есть, потому что это прототип того, что делается сейчас в w3c :)
-moz-boreder-round///как видите -moz.. это прикол мозилы, как это ввести в спецификацию??
а в css 3 есть стиль для скругления углов...
http://www.w3.org/TR/css3-background/#th…
а в css 3 есть стиль для скругления углов...
http://www.w3.org/TR/css3-background/#th…
По теме: css3.info. Там есть примеры.
после небольшой доработки удалось "завести" в режиме соответствия стандартам в Opera, SeaMonkey, Safari
всё на своих местах, кроме правого верхнего уголочка =/
что-то не придумывается как его опустить)
всё на своих местах, кроме правого верхнего уголочка =/
что-то не придумывается как его опустить)
а если вместо врезки используются изображения (фотки, аватарки и т.д.) и хочеЦЦа сделать у этих изображений то, что написано в заголовке темы (скруглить края) - то скорее всего не получиЦЦа... :( а жаль... способ был хорош... но с оговорками не написанными в теме
p/s/ изображение (фотку, аватарку и т.д.) хотелось бы видеть именно как img src="... , а не ложить его бекграундом...
p/s/ изображение (фотку, аватарку и т.д.) хотелось бы видеть именно как img src="... , а не ложить его бекграундом...
+ еще баги в FF :(
1. при увеличении шрифта - левые уголки смещаются вниз
2. при фиксированной высоте блока и малом количестве его содержимого(ну вот надо было так) - уголки соотв. становятся после контекста и вниз их ну никак не загнать...
по второй "неприятности" еще можно сказать что этот способ не для этого... - согласен
но вот первая "неприятность" сводит на нет очень даже неплохой способ избавиться от пары-тройки дивов(и прочих левых)...
1. при увеличении шрифта - левые уголки смещаются вниз
2. при фиксированной высоте блока и малом количестве его содержимого(ну вот надо было так) - уголки соотв. становятся после контекста и вниз их ну никак не загнать...
по второй "неприятности" еще можно сказать что этот способ не для этого... - согласен
но вот первая "неприятность" сводит на нет очень даже неплохой способ избавиться от пары-тройки дивов(и прочих левых)...
>>1. при увеличении шрифта - левые уголки смещаются вниз
Да ничего не смещается. Я наверное что-то делал не так =)
>>2. при фиксированной высоте блока и малом количестве его содержимого(ну вот надо было так) - уголки соотв. становятся после контекста и вниз их ну никак не загнать...
Ну а кто вам мешает разобраться чуть-чуть в коде и переписать пример под фиксированную высоту блока?
Да ничего не смещается. Я наверное что-то делал не так =)
>>2. при фиксированной высоте блока и малом количестве его содержимого(ну вот надо было так) - уголки соотв. становятся после контекста и вниз их ну никак не загнать...
Ну а кто вам мешает разобраться чуть-чуть в коде и переписать пример под фиксированную высоту блока?
да вроде разобрался... :), тока вот при XHTML 1.0 Strict ну ваще не получаецца :( под FF...
У самого пока руки не дошли посмотреть. Но выше devgru написал такое решение проблемы:
>>для :before и :after прописать "line-height: 0.1;".
>>для :before и :after прописать "line-height: 0.1;".
*украдено с сайта mozilla.ru*
кстати, там реализация чуть интереснее.
1) задний фон — картинка, убирающаяся к правому краю и создающая тень справа
2) нижний-правый угол — картинка огромной ширины (2000x8), содержащая не только нижний-правый угол, но и весь низ с тенью
вечером, если интересно, могу выложить вырезанный блок из мозиллы. насколько помню, он никуда не ездит ни в одном браузере.
1) задний фон — картинка, убирающаяся к правому краю и создающая тень справа
2) нижний-правый угол — картинка огромной ширины (2000x8), содержащая не только нижний-правый угол, но и весь низ с тенью
вечером, если интересно, могу выложить вырезанный блок из мозиллы. насколько помню, он никуда не ездит ни в одном браузере.
ёёё, там как раз и стоит font-size: 1px;
p.s. приятно, однакоЖ..., самому дойти до этого :))))
p.s. приятно, однакоЖ..., самому дойти до этого :))))
ну так я ж тоже не просто так пишу... потому как надо как раз мне такое сча...
про "line-height: 0.1;" и сам хотел написать тока во опередили меня :)
тока я бы написал line-height: 0 - это надо для Оперы, а для FF уже решил еще одной строкой... font-size: 0;, если без нее то получается то что писал выще - уголки едут вниз (ну уже понятно из-за чего)...
про "line-height: 0.1;" и сам хотел написать тока во опередили меня :)
тока я бы написал line-height: 0 - это надо для Оперы, а для FF уже решил еще одной строкой... font-size: 0;, если без нее то получается то что писал выще - уголки едут вниз (ну уже понятно из-за чего)...
>>Ну а кто вам мешает...
мешает спецификация:
12.1 Псевдоэлементы :before и :after
Агенты пользователей должны игнорировать следующие свойства с псевдоэлементами :before и :after: 'position', 'float', свойства списков и свойства таблиц.
если можно еще "как-то" это сделать - очень было бы интересно, потому как пригодилось бы...
мешает спецификация:
12.1 Псевдоэлементы :before и :after
Агенты пользователей должны игнорировать следующие свойства с псевдоэлементами :before и :after: 'position', 'float', свойства списков и свойства таблиц.
если можно еще "как-то" это сделать - очень было бы интересно, потому как пригодилось бы...
Не думаю, что автору удастся открыть что-либо новое в CSS верстке(рад если ошибаюсь) :).
Все уже открыто и исследовано до него. Да и странный топик. Вроде как велосипед изобретён уже давно.
Больше как 3 года все нормально катаются. Жаль, что кто-то не в курсе. Есть полно валидных решений на чистом CSS.
А использовать JS и кучу вещи, которые IE не поддерживает - увольте, читайте книжки(блоги).
1)Не понятно кто и как рейтингу :). * n1313 8 октября 2007 15:31 дал корректную ссылку, где начинающие могут немного посмотреть на работы профессионалов, и кто это оценил?
2) Кто мне приведёт ссылку на СТАНДАРТ в CSS? Ставлю ящик пива. Есть спецификация(подчеркнуто), которая написана несколько туманно и некоторые вещи отданы на откуп пользовательским агентам(броузерам), так что на IE местами нечего пинать. Сравните время его выхода со временем последней редакции спецификации CSS 2
Все уже открыто и исследовано до него. Да и странный топик. Вроде как велосипед изобретён уже давно.
Больше как 3 года все нормально катаются. Жаль, что кто-то не в курсе. Есть полно валидных решений на чистом CSS.
А использовать JS и кучу вещи, которые IE не поддерживает - увольте, читайте книжки(блоги).
1)Не понятно кто и как рейтингу :). * n1313 8 октября 2007 15:31 дал корректную ссылку, где начинающие могут немного посмотреть на работы профессионалов, и кто это оценил?
2) Кто мне приведёт ссылку на СТАНДАРТ в CSS? Ставлю ящик пива. Есть спецификация(подчеркнуто), которая написана несколько туманно и некоторые вещи отданы на откуп пользовательским агентам(броузерам), так что на IE местами нечего пинать. Сравните время его выхода со временем последней редакции спецификации CSS 2
... могут немного посмотреть на работы профессионалов
а чем этот метод не профессионален???
по мне так лучше в коде видеть запись вида
<div class="box">
текст
</div>
чем как у "бескартиночных" профессионалов с cssplay
<div class="box">
<b class="top"><b class="b1"/><b class="b2"/><b class="b3"/><b class="b4"/></b>
<div class="boxcontent">
текст
</div>
<b class="bottom"><b class="b4b"/><b class="b3b"/><b class="b2b"/><b class="b1b"/></b>
</div>
или с теми же картинками как минимум еще с пару блоками внутри (к примеру, без учета конкретного дизайна)
<div class="box">
<div class="top"><div></div></div>
текст
<div class="bottom"><div></div></div>
</div>
да, есть у "нас" 6-ка, всмысле ИЕ :)... ниче с этим не поделаешь...
При маленьких уголках добавьте font-size: 1px - поможет
А ещё можно таким способом рамки создавать:
http://illandril.net/jQuery/transparentCorners/cornerTests.html
Проверял в разных броузерах-> (IE6&7/Opera/FF) - работает!
http://illandril.net/jQuery/transparentCorners/cornerTests.html
Проверял в разных броузерах-> (IE6&7/Opera/FF) - работает!
More. Я убил на это дофига времени.
Есть замечательная ошибка в IE, "operation aborted". Возникает когда пытаемся изменить DOM-дерево до загрузки всей страницы. Может возникнуть при использовании данного метода.
Вариант лечения:
.incut{zoom:1;behavior:expression(!this.isInserted==true && iDOMLoaded ? this.isInserted=(this.innerHTML = '<span style="background: url(i/border_tr.gif) no-repeat 100% 0;height: 7px;display: block;margin: -20px -20px 13px -20px;"><img src="i/border_tl.gif" alt="" /></span>' + this.innerHTML + '<span style="background: url(i/border_br.gif) no-repeat 100% 0;height: 7px;display: block;margin:13px -20px -20px -20px;"><img src="i/border_bl.gif" alt="" /></span>') : '');}
И перед </body>:
Есть замечательная ошибка в IE, "operation aborted". Возникает когда пытаемся изменить DOM-дерево до загрузки всей страницы. Может возникнуть при использовании данного метода.
Вариант лечения:
.incut{zoom:1;behavior:expression(!this.isInserted==true && iDOMLoaded ? this.isInserted=(this.innerHTML = '<span style="background: url(i/border_tr.gif) no-repeat 100% 0;height: 7px;display: block;margin: -20px -20px 13px -20px;"><img src="i/border_tl.gif" alt="" /></span>' + this.innerHTML + '<span style="background: url(i/border_br.gif) no-repeat 100% 0;height: 7px;display: block;margin:13px -20px -20px -20px;"><img src="i/border_bl.gif" alt="" /></span>') : '');}
И перед </body>:
<script type="text/javascript">iDOMLoaded = 1;</script>
можно немного по другому, хотя кому как нравится.
вобщем вот мой вариант для ИЕ
функция insertAdjacentHTML вместо прямого обращения к innerHTML, соотв с параметром 'afterBegin' вставляет после начала тэга (перед контентом - аналог :before) и 'beforeEnd' (аналог :after) - вставляет до закрытия тэга...
вместо проверки !this.isInserted==true используется runtimeStyle.ххх что заставляет ИЕ не пересчитывать expression при каждом движении мыши...
подробней описано тут http://lusever.ru/proceedings/thin_css/index.html
.incut {
zoom:expression(
runtimeStyle.zoom = 1,
insertAdjacentHTML('afterBegin','...ххх...'),
insertAdjacentHTML('beforeEnd', '...ххх...')
)
}
вобщем вот мой вариант для ИЕ
функция insertAdjacentHTML вместо прямого обращения к innerHTML, соотв с параметром 'afterBegin' вставляет после начала тэга (перед контентом - аналог :before) и 'beforeEnd' (аналог :after) - вставляет до закрытия тэга...
вместо проверки !this.isInserted==true используется runtimeStyle.ххх что заставляет ИЕ не пересчитывать expression при каждом движении мыши...
подробней описано тут http://lusever.ru/proceedings/thin_css/index.html
.incut {
zoom:expression(
runtimeStyle.zoom = 1,
insertAdjacentHTML('afterBegin','...ххх...'),
insertAdjacentHTML('beforeEnd', '...ххх...')
)
}
я как, слабо владеющий javascript хочу спросить поподробнее...
вот, например вместо ...ххх... нужно писать сам код, который хочу вставить? к примеру
для 'afterBegin'
вот, например вместо ...ххх... нужно писать сам код, который хочу вставить? к примеру
<span style="background: url(i/border_tr.gif) no-repeat 100% 0;height: 7px;display: block;margin: -20px -20px 13px -20px;"><img src="i/border_tl.gif" alt="" /></span> для 'afterBegin'
Отлично. Спасибо ;-)
великолепно.
отец.
большое спасибо за экспрэшены для after и before
совершенно немогу понять людяй кричащих что expression плохо, зато несемантические элементы и примитивизм в css - это хорошо.
а чтоб экспрэшены не подвешиали их, как верно заметили, нужно оптимизировать и вызывать лишь один раз.
отец.
большое спасибо за экспрэшены для after и before
совершенно немогу понять людяй кричащих что expression плохо, зато несемантические элементы и примитивизм в css - это хорошо.
а чтоб экспрэшены не подвешиали их, как верно заметили, нужно оптимизировать и вызывать лишь один раз.
А кто-нибудь навешивал эти уголки на картику?
Никак не получается вывести их наверх, если картинка задается тегом img, а не бекграундом, то она всегда поверх блоков :before и :after, какое бы позиционирование и z-index им не задавай…
Никак не получается вывести их наверх, если картинка задается тегом img, а не бекграундом, то она всегда поверх блоков :before и :after, какое бы позиционирование и z-index им не задавай…
Картинка — это replaced element, т.е. заменяемый элемент. Ими являются, если я не путаю, еще и поля форм. После применения всех правил к этим элементам весь блок заменяется на другое содержимое. Соответственно, для картинок и элементов форм бессмысленно применять :before и :after — они сработают только когда картинка не сможет загрузиться.
Спасибо за инфу. Я псевдоэлементы навешивал на содержащий блок, но картинка все равно поверх них.
Уж извините за рекламу, но я эту верстку сейчас делаю, и там как раз нужная вам проблема — wikimart.ru
В правом блоке картинки окружены рамочкой с закруглением — посмотрите.
В правом блоке картинки окружены рамочкой с закруглением — посмотрите.
Пробовал, правда не на картинку, а на див с картинкой
довольно геморно это…
довольно геморно это…
Так и я на див… У вас пример не завалялся?
Ну например, здесь:
www.gymn1sam.ru/
В правой колонке картинка на главной
и в контенте есть
Там проблема в том, что float нужен
www.gymn1sam.ru/
В правой колонке картинка на главной
и в контенте есть
Там проблема в том, что float нужен
Идеальний пост Назад в прошлое, в предверии 2017-го.
Вы пишете, что способ устарел.
А каким современным способом можно решить поставленную задачу?
Как сделать закругления у блока div?
А каким современным способом можно решить поставленную задачу?
Как сделать закругления у блока div?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Делаем закругленные уголки с помощью псевдоэлементов: before и: after