Решение проблем + оценка вёрстки

[bgdn]

Здравствуйте! Прошу прощения, если написал не туда.

 

После двух-недельной теории решил сверстать свой первый макет, но как обычно первый блин оказался комом. Верстал по методу mobile first. Макет брал отсюда. А вот вёрстка: bgdn.16mb.com/ (грузится долго).

 

Прошу адекватную оценку вёрстки (не учитывая те проблемы, которые я описал ниже) а так же помощь в решении следующих проблем:

 

1) Примерно с ширины  браузера от 822px до 842px выпадает вниз блок Services. В чем проблема? Ведь ширины для плавающего блока достаточно (2 блока по 50%). Сейчас обнаружил, что блок выпадает при вытекании текста из блока выше (about whitesquare), но решение так и не могу найти.

 

2) Не могу сделать так чтобы логотипы компаний (Блок our-clients в самом низу) маштабировались в зависимости от окна браузера. Основная проблема в том, что картинки разной высоты и ширины, из-за этого они начинают скакать. Картинки делал спрайтами. (Может нужно было тегом img?)

 

Заранее спасибо! Сильно не ругайтесь.

 

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

[kattiperk]

Логотипы спрайтом не делают. Только картинками, так как пользователь может его сохранить. И на лого всегда ссылка.

При адаптивном:

max-width и всё будет становиться меньше, не перегружая картинку.

 

Пиши с вопросами.

[bgdn]

Логотипы спрайтом не делают. Только картинками, так как пользователь может его сохранить. И на лого всегда ссылка.

При адаптивном:

max-width и всё будет становиться меньше, не перегружая картинку.

 

В общем так и не смог решить ни 1 ни 2 проблему.

 

http://codepen.io/anon/pen/JddOxv?editors=110- Вот собственно изобразил с помощью блоков мою ситуацию. Ширина и высота блоков в codepen полностью взяты с логотипов компаний на моем сайте. В данный момент при изменении ширины браузера они подстраиваются под ширину и уходят вниз если им не хватает места. Мне же нужно чтобы они не прыгали вниз, а маштабировались в зависимости от ширины браузера, т.к на мобильных они смотрятся не очень.

 

Если бы изображения были одинаковой ширины, то проблем бы не возникло, т.к можно было бы задать width: 14% грубо говоря (100 / 7 = 14.2857...) и они бы свободно влезали во всю ширину и маштабировались.

 

 

Пиши с вопросами.

 

 

Спасибо. Как будут появляться буду писать

 

 

UPD. 1 проблему решил задав блоку Services clear: left;

Edited May 1, 2015 by bgdn

[ows.nightwolf]

Можно воспользоваться flex-box'ом(статья, обучающее видео), только логотипы тогда надо делать отдельными картинками: пример. Тогда CSS свойство display: flex; вешается на <ul>, flex: 1 1 auto; вешается на <li>, а для картинок устанавливается width: 100%;

Работает IE10+

Edited May 1, 2015 by ows.nightwolf

[MaxWall]

Можно воспользоваться flex-box'ом(статья, обучающее видео), только логотипы тогда надо делать отдельными картинками: пример. Тогда CSS свойство display: flex; вешается на <ul>, flex: 1 1 auto; вешается на <li>, а для картинок устанавливается width: 100%;

Работает IE10+

Последние слова откладывают флексбоксы на пару лет еще )

А так конечно удобная тема.

Но аццкий вид, когда все префиксы развернуты и неподдержка в ИЕ9... нет уж, пока рано )

[lexxcode]

Последние слова откладывают флексбоксы на пару лет еще ) А так конечно удобная тема. Но аццкий вид, когда все префиксы развернуты и неподдержка в ИЕ9... нет уж, пока рано )

Все нормально. Уже давно пора забить на весь этот мусор а-ля IE10- 

[ows.nightwolf]

 

Можно воспользоваться flex-box'ом(статья, обучающее видео), только логотипы тогда надо делать отдельными картинками: пример. Тогда CSS свойство display: flex; вешается на <ul>, flex: 1 1 auto; вешается на <li>, а для картинок устанавливается width: 100%;

Работает IE10+

Последние слова откладывают флексбоксы на пару лет еще )

А так конечно удобная тема.

Но аццкий вид, когда все префиксы развернуты и неподдержка в ИЕ9... нет уж, пока рано )

 

Для IE9 можно либо сделать отдельный стиль чтоб было минимально похоже (что-то типа флоутами или еще как-нибудь, в зависимости от задачи), либо подключить JS полифил если совсем уж хоццо чтоб везде одинаково было.