amelice

Во-первых, пока вывод был не сделан. ) Я видела вариант с той статьи и твой вариант, но не успела толком проверить.

http://jsfiddle.net/alexriz/2L5zzteb/

Во-вторых, в твоем примере для меня стало открытием поведение inline-block, который при малой ширине растягивается на всю ширину контента.

Отдельное спасибо за пример!  

Вот тут говорится по другому, что влияет на отображение контента внутри флекс-итемов http://css.yoksel.ru/flexbox/ 

Но и твой вариант тоже работает. http://codepen.io/amelice/pen/xGNZMv

Ребята спасибо за пояснения. 

Макс, мой вопрос звучал иначе, чем ты растолковал.

Я думала, что если задать контейнеру - inline-flex, то флекс-итемы должны вести себя как инлайны и соответственно поменяется display.

Но как бы не меняла свойство display контейнеру - flex или inline-flex, у флекс-итемов дисплей оставался block.  Стало интересно, на что тогда влияет inline-flex )

Прошлась по ссылкам, что ты привел и поняла что они останутся блочными . Там  написано, что если флекс-итем был инлайновым, то становится блочным. а если флекс-итем имеет display-cell, то формируется анонимный блок display: table  вокруг него - вот он и будет флекс-итемом.

Так что, наверно свойство контейнера inline-flex влияет на его вместительнось. 

По поводу display: inherit

http://codepen.io/amelice/pen/PqvZEG элемент .inner стал блочным, не смотря что у родителя (flex-item) display:inline.

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

Но в основном везде одинаково, может и хуже. Потому что в нашей сфере всегда нужно расти. А накопленный опыт еще один шаг вперед.

Черновик.  

У меня возник другой вопрос, может кто знает - значения свойства display (flex или inline-flex) контейнера влияет только на его вместительность? Я заметила как не меняй это свойство, у итемов display: block. 

 

 

Дело именно в них. Спасибо Вам) 

Гуд 

скрипт не смотрела, но он у вас работает. Проверила в хроме и фаерфоксе. Попробуйте удалить все куки. 

Какие-то у вас хреновые флексы. Зачем так к примеру float?

В документации флекса про флоат написано следующее:

float and clear have no effect on a flex item, and do not take it out-of-flow. However, the float property can still affect box generation by influencing the display property’s computed value.

Первое предложение понятно.

А вот со вторым не до конца понятно. Если правильно поняла, то написано - что флоат все еще влияет на генерацию бокса, тем самым влияя на свойство display в вычисляемых значениях.

Проверила в браузере, если задать float флекс-итему, то оно сбрасывается в none, а display зависит только от родителя.

а как на самом деле?

 

у видел уже после того как ответ написал. Начал писать ответ и как раз наткнулся на ошибку в консоли которая привела меня к ES6 =)

 

За ссылку спасибо )

Я по ней поняла суть этого оператора, по мне Мозила отлично структурирует документацию. 

 

 

Почему, если 15 прописать, после 5 то выводится не всё?

В смысле?

Всё выводится.

if (i % 15 ===0)

лучше заменить на

if (!(i % 15))

var i = 10,    x = 10,    y = 0,    cnt = 0;while(i--) {  x--;  cnt = i+x; }if (!x) y = 1;if(y) var z = 5;for(;z-- cnt+=++x;

Чему равна cnt? (Ответ без запуска кода).

 

Со второго раза правильно прошла итерации while ) Интересная задачка.

Если вы ищете элементы .sub-menu в меню #menu-verxnee-menyu

$(function(){    var $submenu= $('.sub-menu', '#menu-verxnee-menyu');    if ($submenu.length) $submenu.parent().addClass('vl');});

Если блок #iframe имеет фикс ширину и высоту, как у вас на сайте, то можно выровнить по середине окна, поправив для него правила таким образом:
 

left: 0;top: 0;bottom: 0;right: 0;margin: auto;    

Скрипта-то нужно на три строчки. Например:

var navbuttom = document.querySelector(".nav-button");navbuttom.onclick = function(){    this.classList.toggle("active");}

все остальное стили, в том числе анимация  )

Нужно написать как будет выглядеть кнопка с классом "active" и без него.

Вы правы, я не верно выразилась.

Но у всех элементов по умолчанию position: static, если он не указан.

Свойство top не применяется к флоату.   Дело в отступе абзаца, который находится в правом блоке. 

Почитайте для начала азы. Думать ошибочно, что все свойства подходят всем элементам. 

Не обязательно от main, я ошиблась. Когда ширина окна меньше 1200пк, просто нужно скорректировать margin-left, и left

http://codepen.io/amelice/full/aOGMYq/

Добавьте свойство vertical-align: top; к картинке  #about .container-item .img img.

 

 

А как же в примере реализовано я что-то не пойму? JS?

Да, в примере через скрипт вешается на навигацию определенные свойства, в том чиcле fixed, как только начинается скроллирование контента. При определенной высоте окна они снова убираются.

Вам wwt предложил несколько вариантов, к первому из них добавьте, то что я предложила, то должно получится.

http://codepen.io/amelice/full/aOGMYq/

Только нужно иметь в виду, так как жестко задан magin-left: -600px;, то в разрешениях меньше 1200px нужно позиционироваться от main или придумать другое поведение.

если бы он позиционировался от элемента с относительным позиционированием, как absolute.

 

Не обязательно у блока absolute родитель должен быть с относительным позиционированием. absolute позиционируется от родителя с position != static.

То есть будет искать контейнера, пока не найдет родителя с position == absolute или  position == fixed или position == relative;  А если не найдет, то от html.

вы не поняли. сделать чтоб фиксированный блок был там где надо можно, а вот спозиционировать fixed относительно родителя (как absolute) нельзя!!!

я прекрасно поняла, фиксированные элементы позиционируются от окна просмотра.

Нам известно, что они имеют известную ширину, а так же блок main должен распологаться в центре и имеет фикс. ширину.

Поэтому можно оперировать так же со свойствами left, margin-left, только в этом случае нужно учитывать что контейнер это окно просмотра.

 

wwt, спасибо. Но только в этом случае блоки приклеены к body, а мне необходимо, что бы они находились в контейнере main, который выравнен по центру и имеет ширину 1200px.

с position:fixed так не получится. Он позиционируется относительно области просмотра в любом случае. Хотие позиционировать относительно родительского блока используйте absolute и relative, а на месте фиксируйте с помощью javascript

 

Можно, если спозиционировать фиксированных элементов в середине окна (left: 50%), дальше с помощью margin-left сдвинуть на 600 пикселей влево. 

UPD: на -600px

 

Если объяснить проблему на словах, то, при нажатии на кнопку, должно (по идее) появляться модальное окно. Так оно и было, пока я не добавил фон-затемнение. После этой "процедуры" при нажатии на кнопку появляется только фон.

Ссылку прилагаю:

http://codepen.io/anon/pen/oXdaBY?editors=110

 

 

 

Пока интересен сам функционал, так что обхожусь без декор-элементов.

У вас все хорошо, просто вы еще самому модальному окну (.win ) поставили display: none;

Если его убрать, то все есть.

http://codepen.io/anon/pen/yNjwVO

 

наверное это к каркасу не относится, но всё равно докопаюсь) http://joxi.ru/gmvjPjkfDL9Dma

Это я не знаю, как сделать повторение, почему-то не делается спрайтом.  

 

сделайте позишн 

спрайт нужно правильно составить или правильно позиционировать 

а еще уберите left:-10px

в футере для абзаца зачем использовали свойство флекс-а? text-align:center не в почете?

 

 

с сеткой не ясно, как наложить и как вообще ее сделать

Учитесь пользоваться инструментом разработчика. 

 

Можно попробовать так http://jsfiddle.net/ka25rdh3/3/

 

Зачем так усложнять? http://jsfiddle.net/ka25rdh3/4/

 

Признаю, хороший код