Launder
-
Posts
293 -
Joined
-
Last visited
-
Days Won
2
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Launder
-
@Марио, сходу могу предложить только идеи. 1. тут в теме было два варианта, когда фоновая картинка через CSS, и когда через html. рассмотрите какой вариант тут будет уместнее. 2. в зависимости от ссылки, в теге <a> через атрибут можно добавить разное стилевое оформление. 3. не обязательно работать через прозрачность, можно через transform двигать. 4. не обязательно через animation можно что-то попробовать через transition. 5. можно наверное, что-то менять через z-index 6. можно попробовать связку opacity и visibility. Ну, вот это всё варианты на вскидку, если придут в голову ещё идеи - напишу Но это всё так, не вникая Если что-либо из этого неожиданно даст результат - буду рад!
-
@jk93, у Вас в последнем ряду, если смотреть справа налево, цена и правый квадратик съезжают вниз.
-
@Марио, спасибо за вопрос, он вполне естественен. Если честно, даже и не знаю что сходу тут можно предложить. Предположу только, что средствами CSS это сделать реально. Записал себе в список актуальных вопросов по вёрстке, как будет время, поизучаю... И Вы, если найдёте решение, напишите о нём, пожалуйста, в этой теме.
-
Изменение opacity создаёт новый стековый контекст. Вот статья общая, вот ещё одна, где как раз приведён пример соотношения z-index и opacity, вот ещё можете пробежаться по темкам: раз и два.
-
Нет, ну проще, конечно
-
@Сергей 51, если при выборе пункта меню загружается новая страничка, то, видимо, для это выбранной странички, нужно отдельное css правило, которое закрасит нужный пункт меню. Если я Вас правильно понял.
-
Ну, в общем, логика мозилы, видимо, такова, мы задаём стили по-умолчанию, не трогайте их, а если хотите изменить нашу несравненную рамкку или фон, так уж и назначайте все стили сами...
-
Абсолютно согласен с вами в этом вопросе (может есть какой способ? кто знает?) Да, кстати :-) Присоединяюсь к вопросу!
-
Да, кстати, про строчное содержимое. Получается интересно. В первом Вашем примере мы задаём z-index: -1 потомку, и он становится ниже родителя, поскольку оба лежат в корневом стековом контексте. Во втором Вашем пример мы, кроме этого, задаём z-index: 0 родителю; который итак, численно равен нулю, но в данном случае, формируется новый стековый контекст, поэтому потомок не может быть ниже своего корневого элемента, даже если у потомка z-index отрицательный. Однако тут обнаруживается интересный нюанс: оказывается, если у потомка z-index отрицательный, то он располагается НИЖЕ текстового содержимого предка. Мне стало интересно, а как же ведут себя z-index'ы для текстовых содержимых? Немного модифицировал Вашу иллюстрацию: https://jsfiddle.net/L2tw2rut/1/ родительское блочное содержимое - серое, дочернее блочное содержимое - жёлтое. родительское строчное содержимое - оранжевое, дочернее строчное содержимое - фиолетовое. В первом пример всё осталось по прежнему: раз у дочернего элемента z-index отрицательный, то и всё его содержимое, и блочное, и строчное, ниже родителя. А во втором примере родитель сам формирует контекст наложения, а значит дочерний элемент уже лежит в его контексте наложения. И, если у дочернего элемента z-index отрицательный, всё равно, его фон находится выше фона родителя, поскольку родитель становится "дном стакана" в котором располагаются все его потомки. Но текстовое содержимое родителя оказывается всё-таки выше дочернего блочного элемента. Это можно объяснить через корневой элемент. Каким бы не был z-index, всё равно элемент располагается выше корневого стекового контекста, по-умолчанию, насколько я понимаю, заданного тегом <body>. Однако если z-index отрицательный, то все строчные элементы будут его выше. Блочные элементы могут быть или выше или ниже в зависимости от того z-index их больше или меньше. По-умолчанию, все они лежат в корневом стековом контексте тега <body> и конкурируют между собой в соответствии с правилами расположения в z-плоскости. Корневой элемент нового стекового контекста, это как тег <body> для документа в целом, новое "дно стакана". Поэтому сам он всегда ниже других блочных элементов, лежащих в его стековом контексте, каким бы ни был их z-index, но его строчное содержимое ведёт себя, по отношению к нему, как его дочерний элемент. И, соответственно, располагаются, в соответствии с правилами для одного распложения элементов на z-плоскости, а они таковы: строчные элементы выше любых блочных элементов из потока, а также плавающих элементов, но ниже любых позиционированных элементов, z-index которых больше или равен нулю. А поскольку родитель хоть и спозионирован, и хоть его z-index равен нулю, но он является корневым элементом этого стекового контекста, и строчное содержимое, лежащее в нём, его как бы не видит, оно буд-то находится в теге <body>, ниже которого ничего быть не может, и конкурировать строчные элементы могут только с другими дочерними элементами того же стекового контекста, родитель же у нас "дно стакана" этого стеквого контекста. А в "стакане" у нас, помимо строчного содержимого, есть только блочный элемент <div class=".affiliate-2">, у которого z-index отрицательный, а значит текстовое содержимое располагается выше него. Если бы <div class=".affiliate-2"> z-index был больше или равен нулю, то он бы перекрыл текстовое содержимое родительского элемента, в соответствии с правилами позиционирования на z-плоскости. И, наконец, как располагаются строчные элементы разных стековых контекстов, друг относительно друга? родительский элемент создаёт новый стековый контекст, и, в некотором роде, он является <body> для своих потомков. Поэтому он располагается ниже всего, он - дно стакана этого контекста форматирования. Далее следует его дочерний блочный элемент, создающий новый контекст форматирования. Для своих потомков он также дно стакана. Далее следует строчное содержимое потомка. И, только на самом верху, лежит строчное содержимое предка. Почему так? Потому что строчное содержимое потомка, лежит в "стакане" z-index которого отрицательный. А текстовое содержимое предка лежит в корневом "стакане". Соответственно текстовое содержимое корневого стакана конкурирует с блоком, также лежащим в корневом стакане. А поскольку z-index у этого блока отрицательной, то и он сам и всё его содержимое располагаются ниже текстового содержимого родителя. Это как в первом примере. Только в первом примере, отсчёт ведётся от корневого контекста форматирования, а в нашем случае отсчёт ведётся от родительского блока образующего новый контекст форматирования. И в нём всё содержимое блока с отрицательным z-index располагается ниже блоков идущих в основном потоке документа, и, тем более, текстового содержимого этих блоков. Если же у дочернего блока z-index был бы больше или равен нулю, то он уже располагался бы выше и блочного и строчного содержимого и всё что находится внутри него располагалось бы выше. Даже если бы у этого содержимого был отрицательный z-index - поскольку он лежал бы в "стакане", который расположен выше. Итак, сначала идёт конкуренция в корневом стековом контексте, далее в выигравшем стековом контексте происходит своя конкуренция и сначала показываются все слои выигравшего стекового контекста, далее слои стекового контекста, который занял второе место и так далее, до корневого стекового контекста документа, это то дно стакана, где расположены все другие стаканы. Главное, выбрать нужные стаканы :-) PS: если б мы не дали бы тегам span фон, то он, по умолчанию, был бы прозрачным, а поскольку буквы занимают далеко не всю поверхность, то через буквы просвечивали бы буквы расположенные ниже. Просто нужно это учитывать.
-
В случае задания фона в мозиле левая и верхняя грань имеют толстую рамку. Когда мы ручками задаём рамку поле ввода становится чуть меньше, более того, межстрочное расстояние становистя чуть меньше... Есть вообще универсальное решение без багов?
-
Интересная особенность. А она где-то задокументирована?
-
@Нарек, объясните, пожалуйста, в чём же бикус? Зачем мозиле белый фон?...
-
@Xenia Wanger, в первом посте пример. Он не работает. Хотя, вроде, должен работать. Почему не работает? что нужно сделать чтоб заработал?
-
@andrey7287, в чём смысл добавления нолика? Как не работало, так и не работает. затем, чтоб увидеть что тень box-shadow работает. не понятно, почему свойство inset не работает. смотрю в мозиле. добавление префикса -moz- не помогает.
-
Вы в итоге разобрались с контекстами наложения? Просто вроде все понятно, но все равно какой то сумбур в голове. Надеюсь пройдет со временем и опытом. За статью спасибо - полезная, наверное одна из лучших на русском языке Спасибо за интерес - да, более-менее разобрался. Ссылку на тему думал давать или нет, но решил всё же дать, хотя я и не уверен что стоит вникать во все написанные там рассуждения, но может что-то окажется полезным... Основная идея такая: если Вы хотите чтоб что-то одно перекрывало что-то другое, то они должны находится в одном контексте наложения (по-умолчанию присутствует только один контекст наложения - корневой). Поэтому если Вам нужно поднять какой-то позиционированный элемент выше остальных, Вы просто назначаете этому элементу z-index и всё. Основная трудность возникает тогда, когда нам нужно чтоб дочерний элемент оказался ниже родительского, в случае если родительский уже участвует в наложении по z-плоскости, поскольку все его дочернии элементы будут выше него и прямого способа расположить какой-либо из них ниже я не знаю. Поэтому задачу нужно свести, так или иначе, к добавлению z-index'ов различным дочерним элементам. Тогда, участвуя в одном контексте наложения, они позиционируются в одной z-плоскости, в соответствии со своими значениями. Если же у родителя нет подходящего дочернего элемента, которому бы он мог "доверить" перекрытие другого дочернего элемента, то можно использовать, например, псевдоэлемент, которому назначаются все необходимые свойства, например блочный статус, размер равный размеру родителя и так далее, и присваивается нужный z-index. Псевдоэлемент будет иметь статус дочернего по отношению к своему родительскому элементу и сможет участвовать в позиционировании на z-плоскости, на ряду с другими дочерними элементами.
-
https://jsfiddle.net/Launder/Ly9mLfv4/1/ В 21 строчке CSS кода box-shadow: inset 0 1px 5px rgba(0,0,0,0.2);как только убираешь свойство inset (тень внутрь) тень (наружу) появляется. Как сделать тень внутрь?
-
Вот статья по-поводу z-index мне понравилась. Ну и темка была.
-
Вот ещё в этой теме трёхуровневое меню: http://htmlforum.ru/index.php?showtopic=54454&hl= в моей интерпритации: https://jsfiddle.net/Launder/mc3m734z/ https://jsfiddle.net/Launder/mc3m734z/2/
-
https://jsfiddle.net/Launder/ghny4qvr/ Вот Вам пример.
-
Влад, ИМХО, для восприятия подобного рода информации, лучше текст. Видео хорошо как добавочный материал.
-
Адаптивные психи или как я провел новогодние праздники
Launder replied to СергейРусков's topic in Discussion of works
Вас интересует именно вёрстка или общее впечатление, подача? -
https://jsfiddle.net/Launder/q7vd9ghv/6/ А вот и второй вариант решения той же задачи. В первом случае, мы все перестановки делали относительно главного меню (.menu li), а для (.menu li ul) сделали только сдвиг вниз, в этом же варианте, мы для (.menu li) сделали только прозрачную границу, для того, чтоб когда курсор мыши находится зоне действия меню, но не ромбике, меню не закрывалось. А псевдоэлемент делали уже для (.menu li ul). Кстати сдвиги в обоих вариантах отличаются, откуда они берутся - указано в комментариях к коду. Интересно, какой вариант более концептуально правильный
-
Кстати, в этом моём примере: https://jsfiddle.net...der/tmnnyo0L/4/ для элемента: .menu > li:hover::after {z-index: 1;}но даже если его убрать - ничего не изменится. Почему? Ведь псевдоэлемент имеет такое же позиционирование как и .menu ul {position: absolute;}так почему же псевдоэлемент, по-умолчанию, перекрывает .menu ul? Получается псевдоэлемент, по-умолчанию, распологается в коде ниже? Поменял два псевдоэлемента местами, назначил ::before -> ::after и наоборот, ничего не изменилось.
-
@Igor Schnaider, и, продолжая Вашу мысль, z-index следует выставить не для UL, а для .menu li - для того, чтоб он формировал свой контекст форматирования и был выше строчных элементов. https://jsfiddle.net/Launder/q7vd9ghv/5/ Тогда и ul и его псевдоэлемент располагается в ОДНОМ контексте наложения и их взаимодействие может быть отрегулировано с помощью численного указания z-index (по-умолчанию они равны нулю, а сверху располагается то, что идёт в коде ниже). Если же ul формирует новый контекст наложения - то все его потомки, будут выше него. Я почему-то понял сначала что z-index: auto выводит элемент из стекового контекста его предка, а, похоже, это не так. Если уж оказался в стековом контексте, то всё, приплыли В общем с логикой z-index'a более-менее разобрались, осталось этот пример причесать, чтоб он был такой же как и сделанный немного другим способом: https://jsfiddle.net...der/tmnnyo0L/4/
-
Ну так я же отменил это для псевдоэлемента, через указание ему z-index: auto, почему не сработало, не пойму?
