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