Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 74
Спасибо, возьмем на заметку.
cssplay.co.uk ))
Что хотели сказать этой фразой из одной ссылки и какое отношение она имеет к тому, что я поделился собственным кодом? Или это призыв перестать думать и копипастить у западных коллег? Я тоже могу много ссылок привести...
так, совсем не имел ввиду копипаст
если точнее, цсс плэй кайфовый ресурс если учишься/разбираешь/делаешь pure-css меню/анимацию/тултипы/красивости и прочее прочее
тут не в копипасте дело - подходов много, а товарищ который этот сайт делает, собирает их и доводит до точки сборки.
ниже написали про таблы и абс позиционирование - то что вы это использовали, делает решение давольно узким, и ктото может сказать спорным,
решения которые представленны там - более общие, вот и подумал ... а может вам , и тем кто еще прочтет пост - это будет интересно ?
вот как то так
если точнее, цсс плэй кайфовый ресурс если учишься/разбираешь/делаешь pure-css меню/анимацию/тултипы/красивости и прочее прочее
тут не в копипасте дело - подходов много, а товарищ который этот сайт делает, собирает их и доводит до точки сборки.
ниже написали про таблы и абс позиционирование - то что вы это использовали, делает решение давольно узким, и ктото может сказать спорным,
решения которые представленны там - более общие, вот и подумал ... а может вам , и тем кто еще прочтет пост - это будет интересно ?
вот как то так
Вот теперь мысль ясна, спасибо. А что касается абсолютного позиционирования - оно же локально в пределах пункта навигации. Картинка позиционируется относительно окружающей её ссылки (а не относительно всей страницы и даже не относительно блока навигации), поэтому проблем с расчётом координат для каждого пункта навигации не возникает... Но Вы меня заинтриговали, попробую поискать другие недостатки у абсолютного позиционирования в том числе на цссплэй, спасибо :)
решения которые представленны там - более общие, вот и подумал ... а может вам , и тем кто еще прочтет пост - это будет интересно ?
Добавил Вам кармы, но её всё равно недостаточно, чтобы сделать нормальную ссылку (а StuIT дал не на главную и не прокомментировал), поэтому я её сам размещаю:
CSSplay - полезный ресурс о каскадных таблицах стилей.
Думать перестает тот, кто делает меню верстает сайты таблицами. А у западных коллег не зазорно поучиться, да..
И я сразу лишусь вертикального выравнивания текста в пункте меню. Пока IE не научится свойству display: table для дальнейшего vertical-align: middle, приходится отказываться от div'ов там, где требуется вертикальное выравнивание. Есть конечно решения, но это хаки. Попробуйте для разминки переделать данную таблицу полностью отказавшись от таблиц и увидите, что код станет сложнее и больше. Я не фанат табличной вёрстки, но в данном случае отказ от таблицы - это не улучшение кода а скорее борьба за идею. Однако если вы представите более чистый код для решения той-же задачи, скажу большое человеческое спасибо.
Где то видел что-то вроде
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
...и так далее
во вспомнил, прочитал коммент vittore, на cssplay.co.uk
Добавить ещё кусок кода, который дополнительно увеличит вес страницы? Ни проще ни валиднее код не станет. Есть конечно деятели, которые доходят до крайности и даже табличные данные верстают с помощью DIV, но это как раз снижает валидность. Нужно думать о том что оправданно в каждом конкретном случае, общего решения нет и быть не может. Я хорошенько подумал когда делал это решение и для данной задачи оно подошло лучше других. Но я человек и всего знать не могу, поэтому если среди комментов я увижу хорошую идею, мне будет приятно.
перефразируя получается, что "Пока IE не научится свойству display: table... пишу table".
для вертикального выравнивания пунктов лично я использую line-height.
Но в то же время использование таблиц в некоторых ситуациях является единственным выходом из положения :(
Но в то же время использование таблиц в некоторых ситуациях является единственным выходом из положения :(
угу, при отображении табличных данных.
Некоторые идут дальше и верстают таблицы списками определений :)
о-да, из-за единственной псевдо-проблемы с выравниванием по высоте мы используем таблицы? например, line-height:table.height решит проблему с выравниванием (браузеры сами отцентрируют текст)
Никаких хаков не надо. По крайне мере для этого случая точно - все пункты меню - однострочные, поэтому добиться вертикального выравнивания можно, поставив line-height равным высоте самого блока.
Есле использовать ul список для этой навигаций код бы выглядел бы гораздо компактней и семантичней ;)
Я знаю это распространённое решение. Но к сожалению в нём не получится сделать заголовки в несколько строк (а мне это критично) - вертикальное выравнивание текста проходит только при одной строке.
Зачем тебе несколько строк?
У заказчика разделы озаглавлены примерно так: «Аудиторские услуги и бухгалтерский учёт» - это название одного разднла и таких габаритных названий много. Соответственно если писать в одну строку, блок навигации займёт полстраницы, а места в дизайне выделено - узенькая колонка. И переубеждать бесполезно, так что это насущная необходимость. Интересно - за это меня тоже заминусуют? Не понимаю логику таких людей - я Вам предложил решение. Нравится - берите, не нравится - не берите, никто не навязывает. А вместо этого подняли прямо холивары какие-то. Такое ощущение что топикстартер не дочитали до конца, а ведь я там всё ясно написал.
Вертикальное выравнивание хорошо реализуется при помощи display: inline-block и vertical-align: middle. Это должно работать в нормальных браузерах вроде Opera или Safari.
В IE то же самое получается и при display: inline. То есть можно использовать что-то вроде:
Это будет работать и в нормальных браузерах, и в IE.
В Mozilla Firefox не будет работать в любом случае.
В IE то же самое получается и при display: inline. То есть можно использовать что-то вроде:
li{
display: inline-block;
//display: inline;
vertical-align: middle;
}
Это будет работать и в нормальных браузерах, и в IE.
В Mozilla Firefox не будет работать в любом случае.
Если мне не изменяет память, то в нормальных браузерах inline-block нет. есть table и table-cell.
Отличный метод!
Но в свете того, что это вертикальное выравнивание двух строк текста нужно крайне редко. Мне кажется было лучше не давать некрасивый вариант с таблицами, и не наставлять людей на плохой путь. А так получается в попытках сузить и универсализовать код - испортилась простота и красота.
ИМХО хватило бы простого height:50px;line-height:50px;
Но в свете того, что это вертикальное выравнивание двух строк текста нужно крайне редко. Мне кажется было лучше не давать некрасивый вариант с таблицами, и не наставлять людей на плохой путь. А так получается в попытках сузить и универсализовать код - испортилась простота и красота.
ИМХО хватило бы простого height:50px;line-height:50px;
2002 год. Меня как будто вернули в 2002 год.
Чёрт, дежавю.
Чёрт, дежавю.
У вас неграмотный CSS-код. padding, border-width и др. задаются не в числах, а в длинах.
IMHO безграмотно как раз: 0px
Ну, собственно говоря, после нулевой длины единицу измерения указывать не обязательно...
Ну и я об этом. Где вы в статье нашли "неграмотный CSS-код"? Или другилми Вашими словами "padding, border-width и др." отличные от нуля, которым надо проставить размерность, что бы они стали длинами, а не числами?
<ol>
<li>Смешать
<li>Взбить
<li>Выпить
</ol>
Грамотный код?
Какое отношение это имеет к указанию размерности _нуля_?
стиль не выдержан. первоапрельский логотип 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
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 - может оно лагает.
Скрипты отключались расширением NoScript - может оно лагает.
Очень устаревший подход! Необходимость вертикального центрирования - надуманная. Меню, по сути, графическое. Раз мне все равно рисовать его в графическом редакторе, почему бы мне не сделать и текст графикой? С нужным центрирование, с небанальными шрифтами и оригинальными эффектами. Тогда его можно будет привязать к любому меню, сделанному списком, работающему со стилями и без, и т.д.
Перестаньте смотреть назад. Смотрите в будущее! Оно вот-вот наступит :)
А вот и нет. В Опера-мини работает "не одинаково", и вообще неудобно в использовании. Возможно для вас Опера-мини не актуальный браузер, но с этим очень многие не согласятся.Работает одинаково во всех актуальных браузерах
Перестаньте смотреть назад. Смотрите в будущее! Оно вот-вот наступит :)
Рисуйте на здоровье. А когда сдадите сайт заказчику и он захочет поменять картинку у раздела, или создать новый вы ему .PSD пришлёте? У меня картинка - свойство документа в CMS и заказкик волен из админки ставить её для нового раздела и менять для существующего. Именно потому что я думаю о будущем, я и делаю интерфейсы простыми и расширяемыми, а не кондовыми, раз и навсегда нарисованными в фотошопе.
А для подготовки этой картинки ему фотошоп конечно не нужен? Послать ПСД - не худший варинт. В таком случае с большей вероятностью сохранится стиль сайта. Но лучше вообще не заставлять простого человека с графическим декором сайта работать, ни через фотошоп ни через ЦМС. Для большинства сайтов это излишне. А для остальных, заплатить дизайнеру за поддержку - не проблема.У меня картинка - свойство документа в CMS и заказкик волен из админки ставить её
Может для заказчика ваши интерфейсы оказываются простыми и расширяемыми, но для меня, как потенциального пользователя, предложенный вами вариант меню не кажется ни тем ни другим. Похоже вы только о своем будущем думаете: как бы вам заказчик проблем там не создал. А пользователи - обойдутся, они денег не платят, и притензий (вам) не предъявят.
Меню ваше вредное своей отсталостью. Извините, но это так. Ладно вы сами пользуетесь, так вы еще и других отсталой технике учите. Вот что грустно.
Ну не раздувайте холивар, я не враг вёрстки навигации списками, я решал нестандартную задачу, где она неприменима. Я всё уже написал выше:
Необходимость вертикального центрирования - надуманная, безапеляционно заявляете Вы. В примере меню, сделанном для этой статьи - несомненно, что же касается реального применения, я также уже всё написал:
Думать что существует один правильный подход, а всё остальное неравильно - заблуждение. Каждый метод работает хорошо только в той задаче, для которой он создан. Если задача усложняется, приходится искать новые пути. И если Вы не сталкиваетесь с этим, то для кого-то придуманный мною метод станет полезным решением.
Этот метод решает строго определённую задачу, поэтому если Вам нужен другой вид или другое поведение навигации, возможно стоит использовать другие подходы.
Я конечно не открыл Америку, но данный способ я придумал сам и надеюсь что кому-нибудь он пригодится.
Необходимость вертикального центрирования - надуманная, безапеляционно заявляете Вы. В примере меню, сделанном для этой статьи - несомненно, что же касается реального применения, я также уже всё написал:
У заказчика разделы озаглавлены примерно так: «Аудиторские услуги и бухгалтерский учёт» - это название одного раздела и таких габаритных названий много. Соответственно если писать в одну строку, блок навигации займёт полстраницы, а места в дизайне выделено - узенькая колонка. И переубеждать бесполезно, так что это насущная необходимость.
Думать что существует один правильный подход, а всё остальное неравильно - заблуждение. Каждый метод работает хорошо только в той задаче, для которой он создан. Если задача усложняется, приходится искать новые пути. И если Вы не сталкиваетесь с этим, то для кого-то придуманный мною метод станет полезным решением.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Простое меню с проявляющимися изображениями