Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 66
Спасибо может где то пригодится
правда многовато лешних тегов.
если забить на ие6 то можно уменьшить код
правда многовато лешних тегов.
если забить на ие6 то можно уменьшить код
Можно уменьшить код тремя путями:
1. Забить на IE6 и IE7
2а. Забить на Opera
2б. Не использовать абсолютное позиционирование внутри инлайн-блока
1. Забить на IE6 и IE7
2а. Забить на Opera
2б. Не использовать абсолютное позиционирование внутри инлайн-блока
кстати да
1 забить на ие6 на 7 еще рановато
2 Юзать иконки через беграунд проблема отпадает
Тогда код станет явно юзабильней
Хотя с семеркой можно тоже попробовать что то решить без лишних тегов.
1 забить на ие6 на 7 еще рановато
2 Юзать иконки через беграунд проблема отпадает
Тогда код станет явно юзабильней
Хотя с семеркой можно тоже попробовать что то решить без лишних тегов.
Иконки — это довольно притянутый за уши пример, можете придумать какой-нибудь свой, более реалистичный : D у меня в реальности была несколько другая задача
IE7 работает на том же самом движке, что и IE6, но немного допиленном, но модель отображения у них одинаковая, так что ничего не поделать.
Хотя с семеркой можно тоже попробовать что то решить без лишних тегов.
IE7 работает на том же самом движке, что и IE6, но немного допиленном, но модель отображения у них одинаковая, так что ничего не поделать.
Ну не нравятся мне дивы в листах. Как валидировать-то будете?
Хотелось бы картинок в статью, чтобы видеть что вы добиваетесь и что получается.
Прогонять весь ваш код в разных браузерах ломает, а без этого статью не могу считать полной и полезной.
Прогонять весь ваш код в разных браузерах ломает, а без этого статью не могу считать полной и полезной.
На всякий случай:
— text-align-last работает в IE;
— следовательно, блок со 100% шириной можно добавлять через :after (пускай и не во всех браузерах получится обнулить его высоту) — избавление от лишнего блока.
— text-align-last работает в IE;
— следовательно, блок со 100% шириной можно добавлять через :after (пускай и не во всех браузерах получится обнулить его высоту) — избавление от лишнего блока.
вот это матрешка у вас получилась)) но с ослами видать по другому нельзя…
PS зачем такой иностранный заголовок? — чуть глаз не сломал, когда в англ. речи об «или» споткнулся…
PS зачем такой иностранный заголовок? — чуть глаз не сломал, когда в англ. речи об «или» споткнулся…
как-то изобрел подобное с обертками ~ год назад (кроме оперного решения) и оно успешно работало на зарубежном проекте, но когда время пришло интегрировать в отечественный ресурс меня ткнули носом в оперу и у меня не хватило ума для борьбы с ней, засунул все в таблицу.
Шикарно, достаточно типовая задача, которая приносит много проблем, а решения в интернете пестрят js-кодом.
Шикарно, достаточно типовая задача, которая приносит много проблем, а решения в интернете пестрят js-кодом.
Хотелось бы посмотреть демо.
Где вы были 3 дня назад? Пришлось заменить LI — меню на TABLE, чтобы оно стало резиновым )))
Разумный выход.
chikuyonok.ru/2010/01/liquid-site-markup/ — также микстура
chikuyonok.ru/2010/01/liquid-site-markup/ — также микстура
По поводу предпоследнего варианта, где автор указывает на ошибку в Opera: вы не могли бы пояснить в чем конкретно ошибка, ссылаясь на некий документ с описанием, который нарушила Opera?
Потому как я вижу абсолютно-позиционированный блок (menu-item-icon), который должен позиционироваться относительно своего родителя (menu-item), потому как это первый предок с position=relative|absolute. У этого предка установлен padding. Почему menu-item-icon должен его игнорировать?
Я не исключаю пробела в своих знаниях, потому и спрашиваю :) Сам на w3.org пояснения не нашел.
По адресу www.w3.org/TR/CSS2/box.html#box-padding-area наглядно указана зона «Content» в которую и входит наш menu-item-icon…
спасибо.
Потому как я вижу абсолютно-позиционированный блок (menu-item-icon), который должен позиционироваться относительно своего родителя (menu-item), потому как это первый предок с position=relative|absolute. У этого предка установлен padding. Почему menu-item-icon должен его игнорировать?
Я не исключаю пробела в своих знаниях, потому и спрашиваю :) Сам на w3.org пояснения не нашел.
По адресу www.w3.org/TR/CSS2/box.html#box-padding-area наглядно указана зона «Content» в которую и входит наш menu-item-icon…
спасибо.
Это в данном случае повезло, что он прилип к паддинг-боксу, что как бы показывает, что это может и нормально. Но в то же время, если вы прижмёте элемент к левому краю, то он и прижмётся к левому краю, а не к левому краю паддинг-бокса. А вот пример поинтереснее: dl.dropbox.com/u/907871/opera%20inline-blocks.rar
А как надо позиционироваться при абсолютном позиционировании написано тут: www.w3.org/TR/CSS2/visuren.html#choose-position
А как надо позиционироваться при абсолютном позиционировании написано тут: www.w3.org/TR/CSS2/visuren.html#choose-position
А можно ссылку на рабочий пример?
А хотя не надо. Уже сам протестил.
Ну что могу сказать: способ, честно говоря не очень хороший. Очень много оберток элементов + лишний элемент для эмуляции последней строки. Этого всего можно избежать. Во-первых, ie, начиная с 6-ой версии поддерживает свойство text-align-last, а для других браузеров можно использовать свойство content: '' и задавать ему width: 100%. А во-вторых (и это я сам недавно узнал), чтобы ie мог применить свойствой text-align: justify к псевдо-инлайнблочным элементам нужно для него прописать свойство text-justify: newspaper. И тогда всё загадочным образом работает.
Ну что могу сказать: способ, честно говоря не очень хороший. Очень много оберток элементов + лишний элемент для эмуляции последней строки. Этого всего можно избежать. Во-первых, ie, начиная с 6-ой версии поддерживает свойство text-align-last, а для других браузеров можно использовать свойство content: '' и задавать ему width: 100%. А во-вторых (и это я сам недавно узнал), чтобы ie мог применить свойствой text-align: justify к псевдо-инлайнблочным элементам нужно для него прописать свойство text-justify: newspaper. И тогда всё загадочным образом работает.
В последнем примере должно быть
иначе вся соль пропадает (Но IE6,7 по прежнему не согласны).
.menu-item_outerWrap {
display: inline-block;
}
иначе вся соль пропадает (Но IE6,7 по прежнему не согласны).
Кому интересно, вот мое решение на JS при простом хтмле (ul, li, a)
function nice_menu () {
var total_length = main_menu.width();
var li_width = 0;
for (var i = 0; i < li.length; i++ )
{
li_width = parseInt(li[i].clientWidth) + li_width;
}
var li_margin = (total_length — li_width)/(li.length — 1);
li_not_last.css('margin-right', li_margin+'px');
li_last.css('margin','0');
}
И вешаем эту функцию на domReady и window.onresize
Думаю, не стоит пояснять, что нужно вносить в переменные типа li_last.
Если парсер съест код, то поясню алгоритм:
Считаем ширину всего ul-меню, затем считаем ширину всех li, ищем разницу между ними. Затем эту разницу делим на (кол-во элементов в меню минус один) и присваем это значение в виде правого марджина всем элементам меню, КРОМЕ последнего. ему присваиваем 0.
Достаточно быстро работает даже в 6 ИЕ, багов не выявлено.
function nice_menu () {
var total_length = main_menu.width();
var li_width = 0;
for (var i = 0; i < li.length; i++ )
{
li_width = parseInt(li[i].clientWidth) + li_width;
}
var li_margin = (total_length — li_width)/(li.length — 1);
li_not_last.css('margin-right', li_margin+'px');
li_last.css('margin','0');
}
И вешаем эту функцию на domReady и window.onresize
Думаю, не стоит пояснять, что нужно вносить в переменные типа li_last.
Если парсер съест код, то поясню алгоритм:
Считаем ширину всего ul-меню, затем считаем ширину всех li, ищем разницу между ними. Затем эту разницу делим на (кол-во элементов в меню минус один) и присваем это значение в виде правого марджина всем элементам меню, КРОМЕ последнего. ему присваиваем 0.
Достаточно быстро работает даже в 6 ИЕ, багов не выявлено.
Решение тривиальное и очевидное, не интересно
Тривиальное и очевидное (а что плохого?), зато без 100500 неочевидных тегов и стилей. Программист либо «натягивальщик на бесплатный движок» будут очень благодарны.
Ваше решение очень пригодится, когда клиент корпоративный с отключенным из-за безопасности JS.
И да, кому не интересно, можно не писать об этом, читаем 1ую строчку моего коммента.
Ваше решение очень пригодится, когда клиент корпоративный с отключенным из-за безопасности JS.
И да, кому не интересно, можно не писать об этом, читаем 1ую строчку моего коммента.
Во первых:
menu-item_sizer должен быть inline-block
т.к. ширина не может быть указана для inline элемента
Во вторых:
В ие6-7 будет распирать элемент на всю ширину
так что нужно сделать его либо инлайновым, либо float'ным
(конечно же, только для ие6-7)
В третьих:
Нихрена не понял об
«пробельных символах закрывающей последовательности тегов».
Копипаст же приведённого вами кода — не работает.
Однако, решил проблему путём добавления,
после каждого li, символа неразрывного пробела ( )
(это не валидно, поэтому — пользуемся условными комментариями)
Буду очень признателен, если растолкуете этот момент.
Демка (с малость оптимизированным мною кодом):
ne-vel.ru/demo/inline_blocks_revisited/
ЗЫ:
Спасибо за статью,
думаю, она многим будет полезна.
Но уделять внимание мелочам, в будущем — будет очень даже не лишним…
menu-item_sizer должен быть inline-block
т.к. ширина не может быть указана для inline элемента
Во вторых:
.menu-item_innerWrap {display: block;}В ие6-7 будет распирать элемент на всю ширину
так что нужно сделать его либо инлайновым, либо float'ным
(конечно же, только для ие6-7)
В третьих:
Нихрена не понял об
«пробельных символах закрывающей последовательности тегов».
Копипаст же приведённого вами кода — не работает.
Однако, решил проблему путём добавления,
после каждого li, символа неразрывного пробела ( )
(это не валидно, поэтому — пользуемся условными комментариями)
Буду очень признателен, если растолкуете этот момент.
Демка (с малость оптимизированным мною кодом):
ne-vel.ru/demo/inline_blocks_revisited/
ЗЫ:
Спасибо за статью,
думаю, она многим будет полезна.
Но уделять внимание мелочам, в будущем — будет очень даже не лишним…
С примерами небольшая проблема, да. Я их позже поправлю. Решение с добавлением пробелов не очень верное, т.к. цель была заставить всё работать во всех браузерах одинаково при одинаковой разметке и примерно одинаковых стилях (т.е. полностью и надёжно эмулировать инлайн-блок). Про распирание я написал, по идее такая проблема возникает только когда есть hasLayout у блочного элемента, решение возможное я тоже привёл ближе к концу статьи.
К счастью есть решение этой проблемы и лежит оно на поверхности — надо сделать этот «инлайн-блок» более инлайновым, для это его нужно обернуть в инлайн элемент
Предпочитаю убирать пробелы совсем (кроссбраузерно) и задавать отступ между «инлайн-блоками» самостоятельно через margin:
для этого родительскому блоку (в данном случае .menu) надо задать font-size:0 и не забыть вернуть размер шрифта для .menu-item a
Предпочитаю убирать пробелы совсем (кроссбраузерно) и задавать отступ между «инлайн-блоками» самостоятельно через margin:
для этого родительскому блоку (в данном случае .menu) надо задать font-size:0 и не забыть вернуть размер шрифта для .menu-item a
Да, кстати, у меня не работает последняя версия вашего кода. Ссылку можно на рабочий пример?
Да, тут не совсем верно, т.к. я писал это по памяти :D потом всё переписал, почитать и примеры можно тут: webanalitik.info/magazine/read/269/ на 40 странице
А демо есть?
Вот тут можно посмотреть меню (ораньжевенькое): e-kontur.ru/possibilities
Правда после релиза в ие он почему то сломалось :D
Вот же пример из журнала: jsfiddle.net/RyMNj/
Правда после релиза в ие он почему то сломалось :D
Вот же пример из журнала: jsfiddle.net/RyMNj/
В таком случае проблема комплексная, если из-за CSS возникает проблема в DOM ;)
Про лекарство без оборачиваний уже писали выше (с newspaper), но это не главная цель. Главная цель — одинаковое поведение при равных условиях во всех браузерах
Про лекарство без оборачиваний уже писали выше (с newspaper), но это не главная цель. Главная цель — одинаковое поведение при равных условиях во всех браузерах
Такое поведение не только у LI, но и других блочных элементов. Хотя да, это в парсере забито, что эти элементы блочные изначально.
newspaper помогает сделать распределение по всей ширине, в то время как цель всего этого — создать идеальный инлайн-блок :) без привязки к этому решению
newspaper помогает сделать распределение по всей ширине, в то время как цель всего этого — создать идеальный инлайн-блок :) без привязки к этому решению
А данном случае — да. А если хочется совсем универсальное решение :))) в моём случае мне нужно было создавать свои кастомные элементы управления, поэтому и пришлось придумывать как сделать настоящие инлайн-блоки. С выравниванием — всего лишь пример
В посте не очень корректный код, писал по памяти. Вот тут я уже поправился и всё написал как надо: webanalitik.info/magazine/read/269/
Не понимаю почему, но содержимое списка не занимает 100% ширины, никак не могу побороть: jsfiddle.net/Qcr3V/4/
Рабочий пример ищите в этом журнале: webanalitik.info/magazine/read/269/ :)
Уперся сейчас в проблему с лишним отступом снизу у обворачивающего блока. Пробежался по примерам из комментов — у всех та же проблема, кроме этого варианта
Долго мучался, ища разницу. В итоге оказалось, что с xhtml доктайпом отступа нету, если же использовать html5 доктайп, то он появляется.
В одном из примеров этот отступ убрали, дописав «margin-bottom:-0.7em». Неудачное решение, так как используется по сути подогнанная цифра.
Сам же ничего, кроме как установить «line-height: 0» для обертки, не нашел. Такое решение совсем не нравится, но ничего лучше не придумалось.
Долго мучался, ища разницу. В итоге оказалось, что с xhtml доктайпом отступа нету, если же использовать html5 доктайп, то он появляется.
В одном из примеров этот отступ убрали, дописав «margin-bottom:-0.7em». Неудачное решение, так как используется по сути подогнанная цифра.
Сам же ничего, кроме как установить «line-height: 0» для обертки, не нашел. Такое решение совсем не нравится, но ничего лучше не придумалось.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Tableless justification или inline-blocks revisited