Pull to refresh

Comments 66

Спасибо может где то пригодится

правда многовато лешних тегов.
если забить на ие6 то можно уменьшить код
Можно уменьшить код тремя путями:
1. Забить на IE6 и IE7
2а. Забить на Opera
2б. Не использовать абсолютное позиционирование внутри инлайн-блока
кстати да
1 забить на ие6 на 7 еще рановато
2 Юзать иконки через беграунд проблема отпадает

Тогда код станет явно юзабильней

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

Хотя с семеркой можно тоже попробовать что то решить без лишних тегов.

IE7 работает на том же самом движке, что и IE6, но немного допиленном, но модель отображения у них одинаковая, так что ничего не поделать.
Ну не нравятся мне дивы в листах. Как валидировать-то будете?
1. Вопрос личных предпочтений мало кому интересен.
2. По спецификации в элементах типа li возможно использование любых элементов, которые могут быть внутри body
Да. С валидатором — погорячился
UFO landed and left these words here
Ну tracing whitespace в инлайн элементах понятное дело вещь лишняя и опасная, но инлайновости это «инлайн-блокам» не добавит
Хотелось бы картинок в статью, чтобы видеть что вы добиваетесь и что получается.
Прогонять весь ваш код в разных браузерах ломает, а без этого статью не могу считать полной и полезной.
Хм, мне казалось, что и так по коду всё понятно. Окей сделаю картинок
Кодеры тоже люди. По картинкам всё воспринимается проще и быстрее :)
На всякий случай:
— text-align-last работает в IE;
— следовательно, блок со 100% шириной можно добавлять через :after (пускай и не во всех браузерах получится обнулить его высоту) — избавление от лишнего блока.
В IE и только в IE, причём начиная с IE8
Начиная, как минимум, с шестого :)
Хм, а по msdn не скажешь
Ну если всегда только msdn слушать… Практическое подтверждение порой тоже полезно.
Сейчас нет возможности проверить, поэтому положился на msdn, зря видимо: )
вот это матрешка у вас получилась)) но с ослами видать по другому нельзя…
PS зачем такой иностранный заголовок? — чуть глаз не сломал, когда в англ. речи об «или» споткнулся…
По-русски не знаю как это всё написать
как-то изобрел подобное с обертками ~ год назад (кроме оперного решения) и оно успешно работало на зарубежном проекте, но когда время пришло интегрировать в отечественный ресурс меня ткнули носом в оперу и у меня не хватило ума для борьбы с ней, засунул все в таблицу.

Шикарно, достаточно типовая задача, которая приносит много проблем, а решения в интернете пестрят js-кодом.
Хотелось бы посмотреть демо.
UFO landed and left these words here
Где вы были 3 дня назад? Пришлось заменить LI — меню на TABLE, чтобы оно стало резиновым )))
А это тут причём? Не понятно
налицо полное непонимание предметной области %\
Чем это не решает задачу равномерного распределения по ширине?
Тем, что «распределение» происходит не автоматически, а ручками + фиксированная ширина каждого элемента
По поводу предпоследнего варианта, где автор указывает на ошибку в 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…

спасибо.
Это в данном случае повезло, что он прилип к паддинг-боксу, что как бы показывает, что это может и нормально. Но в то же время, если вы прижмёте элемент к левому краю, то он и прижмётся к левому краю, а не к левому краю паддинг-бокса. А вот пример поинтереснее: dl.dropbox.com/u/907871/opera%20inline-blocks.rar
А как надо позиционироваться при абсолютном позиционировании написано тут: www.w3.org/TR/CSS2/visuren.html#choose-position
А хотя не надо. Уже сам протестил.
Ну что могу сказать: способ, честно говоря не очень хороший. Очень много оберток элементов + лишний элемент для эмуляции последней строки. Этого всего можно избежать. Во-первых, ie, начиная с 6-ой версии поддерживает свойство text-align-last, а для других браузеров можно использовать свойство content: '' и задавать ему width: 100%. А во-вторых (и это я сам недавно узнал), чтобы ie мог применить свойствой text-align: justify к псевдо-инлайнблочным элементам нужно для него прописать свойство text-justify: newspaper. И тогда всё загадочным образом работает.
Пример с джастификацией тут как бы за одно показан, это здорово что нашлись более хорошие варианты как это сделать, главное (для меня, по крайней мере) было показать как сделать «нормальный» инлайн-блок.
В последнем примере должно быть
.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 ИЕ, багов не выявлено.
Решение тривиальное и очевидное, не интересно
Тривиальное и очевидное (а что плохого?), зато без 100500 неочевидных тегов и стилей. Программист либо «натягивальщик на бесплатный движок» будут очень благодарны.

Ваше решение очень пригодится, когда клиент корпоративный с отключенным из-за безопасности JS.

И да, кому не интересно, можно не писать об этом, читаем 1ую строчку моего коммента.
Я предлагаю не какое-то готовое решение, а аналитический материал. Никаких неочевидных тегов и стилей там нет, зачем всё это нужно описано.
Во первых:
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
Это не решает ни одной из поставленных задач.
Если для вас это не рашает ни одной поставленой задачи, значит вы не внимателно прочитали комент
Совершенно внимательно. Была задача сделать так, чтобы элементы были распределены равномерно по всей ширине страницы, автоматически конечно же. А также была задача заставить инлайн-блок работать одинаково везде.
Да, кстати, у меня не работает последняя версия вашего кода. Ссылку можно на рабочий пример?
Да, тут не совсем верно, т.к. я писал это по памяти :D потом всё переписал, почитать и примеры можно тут: webanalitik.info/magazine/read/269/ на 40 странице
Вот тут можно посмотреть меню (ораньжевенькое): e-kontur.ru/possibilities
Правда после релиза в ие он почему то сломалось :D
Вот же пример из журнала: jsfiddle.net/RyMNj/
UFO landed and left these words here
В таком случае проблема комплексная, если из-за CSS возникает проблема в DOM ;)
Про лекарство без оборачиваний уже писали выше (с newspaper), но это не главная цель. Главная цель — одинаковое поведение при равных условиях во всех браузерах
UFO landed and left these words here
Такое поведение не только у LI, но и других блочных элементов. Хотя да, это в парсере забито, что эти элементы блочные изначально.
newspaper помогает сделать распределение по всей ширине, в то время как цель всего этого — создать идеальный инлайн-блок :) без привязки к этому решению
UFO landed and left these words here
А данном случае — да. А если хочется совсем универсальное решение :))) в моём случае мне нужно было создавать свои кастомные элементы управления, поэтому и пришлось придумывать как сделать настоящие инлайн-блоки. С выравниванием — всего лишь пример
UFO landed and left these words here
В посте не очень корректный код, писал по памяти. Вот тут я уже поправился и всё написал как надо: webanalitik.info/magazine/read/269/
UFO landed and left these words here
UFO landed and left these words here
Не понимаю почему, но содержимое списка не занимает 100% ширины, никак не могу побороть: jsfiddle.net/Qcr3V/4/
Уперся сейчас в проблему с лишним отступом снизу у обворачивающего блока. Пробежался по примерам из комментов — у всех та же проблема, кроме этого варианта

Долго мучался, ища разницу. В итоге оказалось, что с xhtml доктайпом отступа нету, если же использовать html5 доктайп, то он появляется.

В одном из примеров этот отступ убрали, дописав «margin-bottom:-0.7em». Неудачное решение, так как используется по сути подогнанная цифра.

Сам же ничего, кроме как установить «line-height: 0» для обертки, не нашел. Такое решение совсем не нравится, но ничего лучше не придумалось.
Only those users with full accounts are able to leave comments. Log in, please.