Jump to content
  • 0

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


bgdn
 Share

Question

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

 

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

 

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

 

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

 

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

 

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

 

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

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

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

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

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

 

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

Link to comment
Share on other sites

  • 0

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

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

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 by bgdn
Link to comment
Share on other sites

  • 0

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

Работает IE10+

Edited by ows.nightwolf
Link to comment
Share on other sites

  • 0

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

Работает IE10+

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

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • 0

 

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

Работает IE10+

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

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

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

 

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy