Pull to refresh

Comments 74

Что хотели сказать этой фразой из одной ссылки и какое отношение она имеет к тому, что я поделился собственным кодом? Или это призыв перестать думать и копипастить у западных коллег? Я тоже могу много ссылок привести...
так, совсем не имел ввиду копипаст
если точнее, цсс плэй кайфовый ресурс если учишься/разбираешь/делаешь pure-css меню/анимацию/тултипы/красивости и прочее прочее
тут не в копипасте дело - подходов много, а товарищ который этот сайт делает, собирает их и доводит до точки сборки.
ниже написали про таблы и абс позиционирование - то что вы это использовали, делает решение давольно узким, и ктото может сказать спорным,
решения которые представленны там - более общие, вот и подумал ... а может вам , и тем кто еще прочтет пост - это будет интересно ?
вот как то так
Вот теперь мысль ясна, спасибо. А что касается абсолютного позиционирования - оно же локально в пределах пункта навигации. Картинка позиционируется относительно окружающей её ссылки (а не относительно всей страницы и даже не относительно блока навигации), поэтому проблем с расчётом координат для каждого пункта навигации не возникает... Но Вы меня заинтриговали, попробую поискать другие недостатки у абсолютного позиционирования в том числе на цссплэй, спасибо :)

решения которые представленны там - более общие, вот и подумал ... а может вам , и тем кто еще прочтет пост - это будет интересно ?

Добавил Вам кармы, но её всё равно недостаточно, чтобы сделать нормальную ссылку (а StuIT дал не на главную и не прокомментировал), поэтому я её сам размещаю:
CSSplay - полезный ресурс о каскадных таблицах стилей.
Думать перестает тот, кто делает меню верстает сайты таблицами. А у западных коллег не зазорно поучиться, да..
Думать перестает тот, кто делает меню верстает сайты таблицами. А у западных коллег не зазорно поучиться, да..
UFO just landed and posted this here
И я сразу лишусь вертикального выравнивания текста в пункте меню. Пока IE не научится свойству display: table для дальнейшего vertical-align: middle, приходится отказываться от div'ов там, где требуется вертикальное выравнивание. Есть конечно решения, но это хаки. Попробуйте для разминки переделать данную таблицу полностью отказавшись от таблиц и увидите, что код станет сложнее и больше. Я не фанат табличной вёрстки, но в данном случае отказ от таблицы - это не улучшение кода а скорее борьба за идею. Однако если вы представите более чистый код для решения той-же задачи, скажу большое человеческое спасибо.
Где то видел что-то вроде

<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
...и так далее
во вспомнил, прочитал коммент vittore, на cssplay.co.uk
Добавить ещё кусок кода, который дополнительно увеличит вес страницы? Ни проще ни валиднее код не станет. Есть конечно деятели, которые доходят до крайности и даже табличные данные верстают с помощью DIV, но это как раз снижает валидность. Нужно думать о том что оправданно в каждом конкретном случае, общего решения нет и быть не может. Я хорошенько подумал когда делал это решение и для данной задачи оно подошло лучше других. Но я человек и всего знать не могу, поэтому если среди комментов я увижу хорошую идею, мне будет приятно.
UFO just landed and posted this here
да, я уже написал об этом выше
перефразируя получается, что "Пока IE не научится свойству display: table... пишу table".
для вертикального выравнивания пунктов лично я использую line-height.
Но в то же время использование таблиц в некоторых ситуациях является единственным выходом из положения :(
угу, при отображении табличных данных.
UFO just landed and posted this here
UFO just landed and posted this here
о-да, из-за единственной псевдо-проблемы с выравниванием по высоте мы используем таблицы? например, line-height:table.height решит проблему с выравниванием (браузеры сами отцентрируют текст)
line-height:table.height это что значит? :)
Никаких хаков не надо. По крайне мере для этого случая точно - все пункты меню - однострочные, поэтому добиться вертикального выравнивания можно, поставив line-height равным высоте самого блока.
Есле использовать ul список для этой навигаций код бы выглядел бы гораздо компактней и семантичней ;)
Я знаю это распространённое решение. Но к сожалению в нём не получится сделать заголовки в несколько строк (а мне это критично) - вертикальное выравнивание текста проходит только при одной строке.
Зачем тебе несколько строк?
У заказчика разделы озаглавлены примерно так: «Аудиторские услуги и бухгалтерский учёт» - это название одного разднла и таких габаритных названий много. Соответственно если писать в одну строку, блок навигации займёт полстраницы, а места в дизайне выделено - узенькая колонка. И переубеждать бесполезно, так что это насущная необходимость. Интересно - за это меня тоже заминусуют? Не понимаю логику таких людей - я Вам предложил решение. Нравится - берите, не нравится - не берите, никто не навязывает. А вместо этого подняли прямо холивары какие-то. Такое ощущение что топикстартер не дочитали до конца, а ведь я там всё ясно написал.
Вертикальное выравнивание хорошо реализуется при помощи display: inline-block и vertical-align: middle. Это должно работать в нормальных браузерах вроде Opera или Safari.

В IE то же самое получается и при display: inline. То есть можно использовать что-то вроде:


li{
display: inline-block;
//display: inline;
vertical-align: middle;
}


Это будет работать и в нормальных браузерах, и в IE.

В Mozilla Firefox не будет работать в любом случае.
Если мне не изменяет память, то в нормальных браузерах inline-block нет. есть table и table-cell.
UFO just landed and posted this here
Почему не должен?
The following values only have meaning with respect to a parent inline-level element, or to the strut of a parent block-level, table-cell, table-caption or inline-block element.
UFO just landed and posted this here
Немного не понял, что вы хотели сказать. В данном случае мы как раз имеем дело со struts of a parent inline-block elements (конкретно, элементов li), в результате их baselines выравниваются по центру, что нам им и нужно.
UFO just landed and posted this here
Отличный метод!
Но в свете того, что это вертикальное выравнивание двух строк текста нужно крайне редко. Мне кажется было лучше не давать некрасивый вариант с таблицами, и не наставлять людей на плохой путь. А так получается в попытках сузить и универсализовать код - испортилась простота и красота.
ИМХО хватило бы простого height:50px;line-height:50px;
2002 год. Меня как будто вернули в 2002 год.

Чёрт, дежавю.
У вас неграмотный CSS-код. padding, border-width и др. задаются не в числах, а в длинах.
IMHO безграмотно как раз: 0px
Ну, собственно говоря, после нулевой длины единицу измерения указывать не обязательно...
Ну и я об этом. Где вы в статье нашли "неграмотный CSS-код"? Или другилми Вашими словами "padding, border-width и др." отличные от нуля, которым надо проставить размерность, что бы они стали длинами, а не числами?
Вообще говоря, я ошибся, верно.

Но что безграмотного в указании 0px?
Ну это уже я погорячился. Стандартам соответствуют оба варианта.
Просто лишние 2 символа - не рационально, но не критично (посчитал в паре реальных css файлов - порядка на 0.4% увеличивается размер).
UFO just landed and posted this here
Вообще человек поставит, что сочтёт нужным. Ежели указано padding: 0px;, это не помешает мне задать 10pc, если сочту нужным.
UFO just landed and posted this here
UFO just landed and posted this here
<ol>
  <li>Смешать
  <li>Взбить
  <li>Выпить
</ol>


Грамотный код?
UFO just landed and posted this here
Какое отношение это имеет к указанию размерности _нуля_?
В CSS допускается не указывать размерность нулевой длины, как и в HTML допускается не закрывать некоторые элементы.
UFO just landed and posted this here
Вот-вот! Я и спрашиваю: доколе? хоть это и допустимо, но разве грамотно?
UFO just landed and posted this here
XHTML, конечно, надо как application/xhtml+xml отдавать, а для IE ещё и meta:Content-Type желательно дописывать (опять же, для кодировки правильной).

Вот только IE6 и FF1.5 этого не любят.
UFO just landed and posted this here
UFO just landed and posted this here
стиль не выдержан. первоапрельский логотип PHP не вписывается :)


ваш код я нагло украл и буду засовывать во все проэкты, в которые захочу (напишете копирайт - буду ставить)
Я же не для зарабатывания денег его сюда запостил, так что пользуйтесь на здоровье!
А если вот так:

body
{
font-size:100%;
}

#menu
{
list-style:none;
}

#menu li
{
width:13.4em;
height:13.4em;
font-size:10px;
}

#menu li a img
{
border:0;
width:13.4em;
height:13.4em;
opacity: 0.15;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=15);
}

#menu li a:hover img
{
opacity: 1;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}

#menu li span
{
position:relative;
top:2.7em;
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
font-style:italic;
font-size:2em;
font-weight:bold;
padding-right:0.2em;
}
#menu li div
{
position:absolute;
display:block;
width:13.4em;
height:13.4em;
z-index:2;
}

#menu li div.caption
{
text-align:center;
z-index:0;
//z-index:-1;
}


<ul id="menu">
<li><div><a href="#"><img src="php.png" alt="PHP" /></a></div><div class="caption"><span>PHP</span></div></li>
<li><div><a href="#"><img src="python.png" alt="Python" /></a></div><div class="caption"><span>Python</span></div></li>
</ul>

Проверил на IE7 и FF2.12
при отключенном JavaScript в FireFox 2.13 страница выглядит мягко говоря странно.
Судя по тому, что в коде нет ни единой строчки джаваскрипта, виноват Firefox.
значит FF 2.14 не за горами. Интересно что же так не нравится фоксу?
Интересно каким макаром вертикальное и горизонтальное меню, которые находятся на разных страницах физически, оказались на одной? Фотошоп?
Баг в FF возникает при отображении как горизонтального, так и вертикального меню. Просто вариант с горизонтальным меню более нагляден.

Скрипты отключались расширением NoScript - может оно лагает.
Наверно оно и CSS зацепило каким-то боком... А скрипты отключать - значит лишать себя всех фишек Web 2.0, многими сервисами просто не получится пользоваться.
Сервисы, которыми я активно пользуюсь добавлены в белый список.
Очень устаревший подход! Необходимость вертикального центрирования - надуманная. Меню, по сути, графическое. Раз мне все равно рисовать его в графическом редакторе, почему бы мне не сделать и текст графикой? С нужным центрирование, с небанальными шрифтами и оригинальными эффектами. Тогда его можно будет привязать к любому меню, сделанному списком, работающему со стилями и без, и т.д.

Работает одинаково во всех актуальных браузерах

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

Перестаньте смотреть назад. Смотрите в будущее! Оно вот-вот наступит :)
Рисуйте на здоровье. А когда сдадите сайт заказчику и он захочет поменять картинку у раздела, или создать новый вы ему .PSD пришлёте? У меня картинка - свойство документа в CMS и заказкик волен из админки ставить её для нового раздела и менять для существующего. Именно потому что я думаю о будущем, я и делаю интерфейсы простыми и расширяемыми, а не кондовыми, раз и навсегда нарисованными в фотошопе.

У меня картинка - свойство документа в CMS и заказкик волен из админки ставить её

А для подготовки этой картинки ему фотошоп конечно не нужен? Послать ПСД - не худший варинт. В таком случае с большей вероятностью сохранится стиль сайта. Но лучше вообще не заставлять простого человека с графическим декором сайта работать, ни через фотошоп ни через ЦМС. Для большинства сайтов это излишне. А для остальных, заплатить дизайнеру за поддержку - не проблема.

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

Меню ваше вредное своей отсталостью. Извините, но это так. Ладно вы сами пользуетесь, так вы еще и других отсталой технике учите. Вот что грустно.
Ну не раздувайте холивар, я не враг вёрстки навигации списками, я решал нестандартную задачу, где она неприменима. Я всё уже написал выше:

Этот метод решает строго определённую задачу, поэтому если Вам нужен другой вид или другое поведение навигации, возможно стоит использовать другие подходы.

Я конечно не открыл Америку, но данный способ я придумал сам и надеюсь что кому-нибудь он пригодится.

Необходимость вертикального центрирования - надуманная, безапеляционно заявляете Вы. В примере меню, сделанном для этой статьи - несомненно, что же касается реального применения, я также уже всё написал:
У заказчика разделы озаглавлены примерно так: «Аудиторские услуги и бухгалтерский учёт» - это название одного раздела и таких габаритных названий много. Соответственно если писать в одну строку, блок навигации займёт полстраницы, а места в дизайне выделено - узенькая колонка. И переубеждать бесполезно, так что это насущная необходимость.

Думать что существует один правильный подход, а всё остальное неравильно - заблуждение. Каждый метод работает хорошо только в той задаче, для которой он создан. Если задача усложняется, приходится искать новые пути. И если Вы не сталкиваетесь с этим, то для кого-то придуманный мною метод станет полезным решением.
Sign up to leave a comment.

Articles