Launder

Ну да, так и есть. В той теме, ссылку на которую я давал есть ссылка на превосходную статью на эту тему. Кстати, в приведённом мною коде данная проблема решается через задания font-size: 0 у родительского <ul> и восстановления размера шрифта у дочернего толи <li>, толи <a>. И, кстати, я ошибся, инлайн-блок, всё же, по сути, символ. Интересно, а чем принципиально символ отличается от слова? Вроде, в контексте статьи, разницы особой нет...

Насколько важен именно фотошоп, кто пробовал Gimp или что-нибудь подобное и вообще Вы осваивали именно программу или как-то учились именно рисовать (макеты)?

Да, вот это уже интересней... Вот, кстати, статья, на тему, чем удобен calc. Ну, идея понятна. Делаем блочный псевдоэлемент, абсолютно его позиционируем относительно родительского элемента, задаём ему ширину и сдвигаем влево на половину ширины. При этом z-index'ом его делаем поверх всего и убираем при наведении на родительский элемент. Надо обдумать насколько такой вариант мне подходит и когда вообще имеет смысл действовать подобным образом... Полоски можно делать с помощью линейного градиента. как например вот тут, скажем, пример 4. кстати, а зачем Вы использовали свойство letter-spacing? Разве inline-block считается не словами, а символами? (для пробелов между словами word-spacing). Ну в моём примере, тень при выделении правых элементов закрывает полоску слева. А как она будет закрывать псевдоэлемент? сделать тени z-index больше?

Вот нагуглил - в примере с псевдоэлемнтами использован код с этой страницы, чтобы убрать отступы. Да, это я запамятовал, по-поводу пробелов между инлайн-блоками сам открывал свою первую тему на этом форуме. А ссылочку на псевдоэлемент Вы мне дали, похоже, мою же...

Попробуйте тут посмотреть. А по линии вот тут, второй рисунок и пример. Для написания стиля выделенного пункта вместо .pager .active {...}, задайте стиль для .pager li:hover {...} Это всё, в первом приближении, конечно, нужно разбираться...

Посмотрите, мне нужно, чтоб вот этот бордюр чёрный, был по центру. С border-box'ом это возможно, только если один бордюр сделать у левого блока, а один - у правого. Но мне это не подходит, поскольку мне нужно, чтоб при выделении, оба бордюра могли исчезать. ЗЫ: кстати непонятно почему чтоб их склеить нужно было ставить margin: -2px;

Тем, что левые столбцы станвятся уже правых на ширину этих линий. В данном случае это мелочь, но если бы бордюры были бы потолще а разрешение поменьше, то уже не мелочь. Поэтому хочется решить вопрос в общем виде. Решение с помощью calc лучше потому, что позволяет разделительные линии расположить ровно посередине, и соседние блоки получаются одинакового размера.

http://jsfiddle.net/Launder/n6mbfzcu/ Ну вот как-то так... Спасибо! Ясно. Ну я где-то мимоходом видел что JQuery подключается подобным образом, но пока ни разу ничего подобного не делал. Может это и не сложно :-) Просто это первый мой проект и очень хочется быть увереным что реализуемое мной решение адекватно...

@support not { width: -webkit-calc(50% - 1px); width: -moz-calc(50% - 1px); width: calc(50% - 1px); } { .menu > li { box-sizing: border-box; } }Так я понимаю? сверху этого написать width: 50%, снизу - width: calc(50% - 1px) (и так далее). И, по идее, будет работать... В случае если support поддерживается. если же ни support, ни calc не поддерживается, тогда... можно по умолчанию .menu > li присвоить свойство border-box, и width: 50% а дальше: @support { width: -webkit-calc(50% - 1px); width: -moz-calc(50% - 1px); width: calc(50% - 1px); } { .menu > li { box-sizing: content-box; } .menu > li:nth-child(2n+1) { width: -webkit-calc(50% - 1px); width: -moz-calc(50% - 1px); width: calc(50% - 1px); } }Похоже? JS, к сожалению, пока не владею, хотя, возможно решение с помощью него и более правильное. Что касается полифила и ссылки на гитхаб, то слова вроде знакомые, а смысл, к сожалению, ускользает... Где и что прописывать?

border-box это решает не идеально потому что если сделать так как я сделал во втором примере - то, в случае, если при выделении, я захочу убрать эти границы (и наложить, например, тень), то в соседнем блоке убирать границу мне будет сложнее. Иными словами: .menu > li:nth-child(2n+1):hover { border-right: none; }работать будет, а вот на li:nth-child(2n) мне повлиять уже сложнее. В случае же если я просто, в исходном примере, сделаю .menu > li border-box'ом, то ширина левого блока будет уже на величину равную толщине линий. Мелочь, конечно, но не приятно, и потом, две колонки, планируется применять для небольших разрешений. Видно это будет или нет - я не знаю, но хочется выяснить, как можно сделать чтоб всё было совсем ровненько. Поэтому и хочется сделать исходное решение, как в первом примере, но если броузер у клиента не поддерживает свойство calc, то сделать заплатку с border-box'ом. Но я никогда не делал заплаток. Поэтому и спрашиваю

Честно говоря, не совсем понятна идея с псевдоэлементом. Если его делать как просто псевдоэлемент состоящий из линии которая идёт сразу после блока, то чем эта идея отличается от использования просто border, если же использовать позиционирование и наложить псевдоэлементы поверх основного блока, то чем эта идея принципиально отличается от использования свойства border-box?

Хм, ну надо подумать. А пока как вот такой вариант?: .menu > li { box-sizing: border-box; width: 50%; display: inline-block; vertical-align: top; }.menu > li:nth-child(2n+1) { border-right: 1px solid #dedede; }.menu > li:nth-child(2n) { border-left: 1px solid #fff; }

Ну дык по ссылке выше...

Там вроде для иногородних тоже можно...

Время от времени при нажатии на любую ссылку загружается главная и все ссылки не работают.

У меня двух колоночное меню: .menu > li { display: inline-block; vertical-align: top; width: 50%; border-right: 1px solid #fff; /*белая линия в конце блока. вместе с серой линией тэга <a> образует бело-серую линию*/ }.menu a { text-decoration: none; display: block; text-align: center; font-size: 14px; border-right: 1px solid #dedede; /*вместе с белой линией тега <li> образует бело-серую линию*/ }.menu > li:nth-child(2n), .menu > li:nth-child(2n) a { border-right: none; /*убираем у правых пунктов меню линии разграничения - они там не нужны, там граница самого меню*/ }Поскольку бордюр тега <а> должен влезть в <li> у которого width: 50%, то тег <a> автоматически подвинется на ширину бордюра, а вот бордюр тега самого <li> никуда двигаться не станет, и сам подвинет следующий тег <li>, в результате ширина двух таких тегов будет больше 100% из-за бордюра. Проблема решается просто добавлением li {box-sizing: border-box;}, но тогда у нас левые колонки уже правых на величину двух бордюров, тегов <a> и <li>. Не велика беда, конечно, но можно же сделать более красиво: .menu > li:nth-child(2n+1) { width: -webkit-calc(50% - 1px); width: -moz-calc(50% - 1px); width: calc(50% - 1px); Тогда линия у нас будет точно по центру: одна полосочка тега <a> будет чуть левее, а полосочка тега <li> будет чуть правее. Но вопрос, ведь спецификация calc хуже поддерживается броузерами чем border-box, можно ли как-то сделать, чтоб если calc не сработает, то сработал border-box?

Спасибо большое за пояснения! Буду искать счастья в JS.

Как бы я читал внимательно и я новичок. То что очевидно для Вас, для меня может быть не очевидно, извините... Что я должен понять из фразы?: я так понимаю что ":checked" означает выделенный пукнт. Как я понимаю логику этого выделения я написал в предыдущем посте. Если что-то не правильно, укажите, пожалуйста, что. Это фразу я понимаю, как прямых и понятных способов для проведения этой операции в текущей версии CSS нет. Но исходя из Вашей ссылки я вижу, что в некоторых случаях это возможно обойти и спросил можно ли это осуществить в моём случае. Что-то не так?..

Нет ну подождите. В том примере, нансколько я понимаю, так: Виден <label>, <input> спрятан. эти два тега связаны, когда выделяем <label>, <input> выделяется автоматически, для этого, наск. я понимаю, <label> и создан. <input> создан для ввода форм, а <label> для связи метки с формой. И алгоритм получается такой: когда выделен label, выделяется и <input>, а далее к следующему после него тегу <span> применяются стилевые свойства через :checked + span. Ну а span родительский для label, получается выделяем дочерний изменяется фон у родителя. Такая логика? Только что-то из этого не становится ясным как конкретно в моём примере это применить. Как я свяжу выделенный тег li:hover с каким-либо внешним тегом? Непонятно...

Спасибо. В примере в теме используются соседние селекторы и маленькая хитрость, с тем что убрать <input> с поля видимости. Не очень понятно, как подобный подход можно экстраполировать на мой пример: http://jsfiddle.net/Launder/skajdrre/1/ Мне нужно, чтоб у основного меню .menu скруглялись уголки, когда выделен его первый пункт li:hover:first-child На всякий случай, приведу исходный код здесь: <ul class="menu"> <li><a href="#">Русская кухня</a> <ul> <li><a href="#">Филе рябчика фаршированное в сухарях </a></li> <li><a href="#">Заливной пирог с картофелем и белыми грибами</a></li> <li><a href="#">Щи суточные с расстегайчиками</a></li> </ul> </li> <li><a href="#">Украинская кухня</a> <ul> <li><a href="#">Борщ украинский с пампушками</a></li> <li><a href="#">Вареники с печенью в луке с салом</a></li> <li><a href="#">Курица, тушенная с галушками</a></li> </ul> </li> <li><a href="#">Немецкая кухня</a> <ul> <li><a href="#">Гусь по-берлински</a></li> <li><a href="#">Пирог яблочный с грецкими орехами</a></li> <li><a href="#">Cвиные отбивные под лимонно-соевым соусом</a></li> </ul> </li></ul>.menu { background: linear-gradient(to top, #ecc, #fff8f8); border: 1px solid #c8c8c8; border-top: 0; padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; -webkit-border-radius: 0 0 5px 5px; /*радиус всего меню*/ -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -webkit-box-shadow: 0 3px 5px rgba(180,180,220,0.2); /*тень всего меню*/ -moz-box-shadow: 0 3px 5px rgba(180,180,220,0.2); box-shadow: 0 3px 5px rgba(180,180,220,0.2); font-size: 0; }.menu > li { display: block; }.menu a { text-decoration: none; display: block; text-align: center; font-size: 14px; }.menu > li > a { color: #7c3c3c; padding: 10px 15px; }.menu > li:hover > a { color: #ca575b; background: linear-gradient(to top, #ffdede, #fff); } .menu > li:hover /*Скругляем все углы у выделенного пункта меню <li> - родительского по отношению к тегам <a> и <ul>, чтоб последние не вылезали, используем overflow*/ { -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; overflow: hidden; } .menu ul { list-style: none; margin: 0; padding: 0; background: linear-gradient(to bottom, #ffdede, #fff0f0); }.menu ul a { color: #ca575b; padding: 5px 10px; }.menu ul a:hover { background: #8bc6ee; color: #fffcfc; }.menu li ul { display: none; }.menu li:hover ul { display: block; /* Показываем подменю */ }.menu > li.few:hover { -webkit-box-shadow: 0 0 10px #57a6cd; -moz-box-shadow: 0 0 10px #57a6cd; box-shadow: 0 0 10px #57a6cd; }

.menu > li:hover > a { -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } Тут при наведении на пункт <li> мы изменяем способ отображения блочной ссылки <a> А можно ли, написать такой код CSS, который, скажем, при наведении на li:first-child:hover менял бы параметры отображения родительского блока .menu? Спасибо!

И как, извиняюсь, его поставить себе на машину?

http://jsfiddle.net/Launder/hece4amb/ при данной постановке задачи, всё, вроде, работает и без него...

Вот как-то так: http://jsfiddle.net/Launder/gmLvp2ce/1/ Немного непонятно: зачем нужен псевдоэлемент? Вроде ж и без него работает и должно, по идее, работать. Но всё же, в каких ситуациях, его наличие становится значимым?...

1. Вот эта связка не вполне понятна: height: auto !important; height: 100%;Объясните, пожалуйста, как это должно работать. 2. На фига нужен pusher, когда он начинает играть роль и в чём она? Спасибо!