infidel

1. Не адаптивная верстка.

2. Изображения галереи резиновые только по ширине, поэтому искажаются при изменении размера окна браузера.

3. Жуткий какой-то блок testimonials, не понятно зачем там эта анимация привидения(даже не знаю как сказать иначе).

4. При уменьшении окна до 740px пропадает левая вертикальная менюшка, хотя возможно так и задуманно.

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

http://jsfiddle.net/79t7nucn/- outline не влияет на положение элемента

Извините, не вижу смысла открывать для этого вопроса отдельную тему, но не хотелось бы ошибится:

 

можно ли считать что для тега li значение по-умолчанию display: block; или лучше это правило прописать в явном виде? спасибо

Насколько мне известно list-item отличается от block только наличием маркера списка. С подводными камнями не сталкивался, если таковые имеются.

Дайте ссылку на ваш сайт, или выложите на jsfiddle html и css.

может быть есть ещё варианты?

display:table, table-row, table-cell - по сути тоже самое что таблица, но считается более православным вариантом, для верстки блоков. Без табличной логики я не представляю как это сверстать, не прибегая к жестким извращениям.

Как быть чтобы при  увеличении  одного дочернего блока увеличивался родительский и остальные дочернии

 

Может стоит сверстать таблицей?

http://jsfiddle.net/3bmkkswm/- вот так добавлять

Ну в моём примере, тень при выделении правых элементов закрывает полоску слева. А как она будет закрывать псевдоэлемент? сделать тени z-index больше?

 

Да, только я не знаю насколько это кроссбраузерно, ведь у элемента с тенью position:relative а не absolute, вроде раньше в разных браузерах это по разному отрабатывало, хотя могу и ошибаться.

есть ссылка на превосходную статью на эту тему

Хорошая статья, спасибо. 

а зачем Вы использовали свойство letter-spacing?

Понятия не имею, в статье на которую я дал ссылку автор объясняет это тем что в webkit браузерах таким образом убирается отступ в 1px появляющийся при применении первых двух свойств. Сеанс бубнотерапии это на мой взгляд.

похоже, мою же...

Ага, забыл форкнуть). Поправил ссылку.

@Launder, Как вариант использовать предложенные ранее псевдоэлементы. Второй блок сделал выше чтобы было наглядно видно как проходит разделяющая линия.

 

 

кстати непонятно почему чтоб их склеить нужно было ставить margin: -2px

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

Тем, что левые столбцы станвятся уже правых на ширину этих линий

 

Они не становятся уже.

@Launder, По моему все решает .menu > li { box-sizing:border-box}, ваш довод против этого варианта так и не понял, зачем влиять на соседний блок, и чем это решение хуже чем calc, даже если влиять зачем то и надо?

Честно говоря не вникал в вашу проблему, вы бы дали ссылочку на jsfiddle с html, чтобы можно было наглядно посмотреть на результат выполнения кода без особых напрягов. Увидел, что вы видите решение проблемы в использовании разного кода в зависимости от поддержки, и самому стало интересно как это реализуется, и нагуглил. Полифилами сам никогда не пользовался, но полагаю там надо подлючить ихнюю либу + код реализующий поведение support(он же полифил) в случае если не поддерживается. Хотя скорее всего ваша проблема решается одним из предложенных выше способов, просто вы перемудрили где-то, опять же на 100% не уверен, возможно ваш случай уникален и вам непременно нужен support)

ссыль - вот в гугле нашел. Вроде идеально подходит, там и полифил есть.

height это высота содержимого, а не высота блока целиком, значение которого складывается из height, border и padding. Поэтому и ненулевая высота выходит.

Но все-таки мне кажется вы не правы насчет причины такого поведения, у самого то блока с height:0 нет никаких паддингов, паддинги есть у ссылки которая находится внутри этого блока.

первыи раз в жизне пытаюсь создать маленькую страничку

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

@rpmcmerphy, @media (max-width: 900px) http://cssdeck.com/labs/ryrbx9cq

сразу в адаптивное меню

http://cssdeck.com/labs/ryrbx9cq 

А почему тогда не помогает box-sizing?

Я не прав по поводу box-sizing оказывается, не знал(только что выяснил), что в случае если padding больше height/width либо если height/width не указано и при этом box-sizing:border-box то за высоту берется значение padding.

height это высота содержимого, а не высота блока целиком, значение которого складывается из height, border и padding. Поэтому и ненулевая высота выходит.

А почему тогда не помогает box-sizing?

@wwt, Спасибо, работает. Да я вобщем-то и не объяснял зачем это нужно, постарался локализовать по возможности проблему. Меню появляется плавно, при помощи animation, оно находится внутри .hid, а на элементе с display:table там есть рамка, которая некрасиво оттопыривается.

 

А почему этот паддинг вообще там проявляется? Kиньте кто-нибудь ссылку на статейку по теме плз. можно на английском.

Что мешает padding убрать для этой ссылки?

Ну там он очень удобно этот паддинг стоит, если его убирать всю менюшку придется переверстывать и долго думать как сделать чтобы анимация работала адекватно. А данный случай безнадежен? Мне то казалось логичным что если hidden и height:0 то ничего, что внутри видно не должно быть.

 

UPD: Ссылку починил в топик старте, теперь переходит куда надо.

Но фиддл все равно пустой.

Странно... Если скопировать ссылку в адресную строку, открывает нормально, если нажать действительно пусто.

UPD: Парсер форума коверкает ссылку.

вы ссылку дали на главную страницу фиддла, поменяйте потом кто0нибудь вам подскажет.

Действительно, спасибо, ум за разум заходит уже. Изменил ссылку.