Temiks

Здравствуйте. Решил сверстать макет в относительных величинах %, em, rem с адаптивностью к мобильным устройствам. Только вот единицу измерения rem opera mini не поддерживает вовсе Поискав в интернете, нашел решение использовать "двойные элементы". То есть, если мы задаем внешний или внутренний отступ в rem margin: 1rem;padding: 2rem;То для оперы мини нужно дополнительно дописать свойства в px: margin: 16px;padding: 32px;margin: 1rem;padding: 2rem;Код получается громоздким и не чувствуешь той легкости верстки, которую получаешь от rem. Собственно, как поступаете вы в этом случае? Может используете скрипт, который определяет пользователя и при необходимости конвертирует все относительные величины в статичные? А может и вовсе все верстаете на em с использованием вот таких ужасных отступов? margin: 0 0 0.52857142857142857142857142857143em;

О, спасибо за совет, попробую.

Да, у него было изображение размером в 5000рх, но как делать он показывал на примере маленького изображения. Наверное ошибся Жаль. Верстаю из free psd макета

Здравствуйте, есть вопрос по поводу оптимизации изображения под ретину разрешение. Есть обычный .psd макет, из него вырезаем изображение размером, к примеру 100 на 100 рх, сохраняем его в формате .jpg или .png. Для ретина дисплеев нужно это же изображение в размере 200 на 200 рх, вопрос, как же его сохранить без потери качества? -- p.s Смотрел видео урок (http://youtu.be/jEtvucZTQMQ?t=27m), где автор открыл изображение через фотошоп -> нажал на "сохранить для веб" -> указал размер в два раза больше -> сохранил. В результате, у него получилось изображения в два раза больше и без потери качества (исходник в формате .jpg). Проделал тоже самое - не получилось, картинка плывет. Как быть в такой ситуации?

Добрый вечер. Возникла одна проблема: нужно реализовать фиксированное меню, у которого ширина зависит от ширины контента. Контент имеет минимальную и максимальную ширину, в случае последнего - выравнивается по центру экрана. Так же сам блок контента унаследовал отступы элемента body в размере 62px; Т.е как это все должно быть на изображении: -- Прописал блоку с position: fixed следующие: box-sizing: border-box;position: fixed;width: 100%;max-width: 1600px; // блок контентаheight: 100px;И все бы ничего, только если ширина экрана меньше 1600рх, то получается вот это: -- Помогите, пожалуйста, исправить p.s играл с положительным и отрицательным margin-ом и padding-ом, но все равно не получилось UPD: Я в общем не знаю почему, но когда я создаю тему на этом форуме, меня после как-будто осеняет -- В общем решение простое то: 1. Блоку с position: fixed прописываем width: 100%;left: 0;padding: 0 62px; // в моем случае нужны минимальные оступы2. В нем создаем блок, которому пишем min-width: 600px;max-widht: 1600px;height: 100px;margin: auto;-- Вот и задача решена. Может кому-то будет полезно. Enjoy!

Тоже подумывал об таких методах в блочной верстке Немного потестил страницу и нашел два бага: 1. В Firefox'e если заходить на страницу без кэша то получается вот это: Если же перезагрузить страницу или же потянуть за край браузера - приходит в нормальное состояние, во всю ширину экрана В Хроме все хорошо. Как можно исправить? 2. Есть вот такие пробелы при определенной ширине окна: (это из-за неправильного округления процентов?)

Спасибо. Воспользовался вашим советом, вот только что-то пошло не так и получилось следующие: -- Как можно исправить? Код можно посмотреть тут (тестовая страница) Нет, не случайность. UPD: не совсем корректно исправил JS код, теперь все работает, спасибо!

Резина

Здравствуйте. Нужен совет как лучше сделать, таблицей или блоками -- Думаю сделать таблицей...

Здравствуйте. Не могу разобраться с одной проблемой. Есть блок(список), у которого стоит отрицательный margin c левой и с правой стороны соответственно. .horizontal-list { overflow: hidden; margin: 0 -35px;}Собственно проблема: при уменьшении окна браузера менее 900px в ширину, справа образуется отступ равный все те же 35px и становится виден задний background body-тега. -- Можно это как то исправить не убирая отрицательные отступы(выступы) у списка? Код можно посмотреть тут -- Так же черкану тут: HTML: <div class="row post" > ... <ul class="horizontal-list" > <li class="col-md-4" > ... </li> <li class="col-md-4" > ... </li> <li class="col-md-4" > ... </li> </ul></div>CSS: .horizontal-list { overflow: hidden; margin: 0 -35px;}.horizontal-list li { margin: 0 0 35px;}.horizontal-list .col-md-4 { float: left; padding: 0 58px;}—- UPD: Очень сильно извиняюсь за свою тупость. Решение простое. К блоку .row нужно прописать свойство overflow: hidden;-- Вопрос снят.

Благодарю.

Думаю макет рисовался для FullHD экранов, а для меньших разрешений должен уже продумывать верстальщик, что ли. Но все же, я не забил бы на разрешение 1280, т.к по статистике вк это примерно 3.5-3.8 миллионов пользователей в сутки и это редизайн соц. сети. Спасибо, почитаю, а то приходится все ручками вырезать, подгонять, измерять, кодить

Я в общем помудрил в вашем макете, позадавал левому, центральному и правому блоку display: table-cell, vertical-align: top; убрал минимальную ширину в 1400рх, и все встало на свои места, практически, только осталось центральные колонки контента(ленту пользователя) задать в процентах с использованием box-sizing: border-box и отступы. (при этом немного рассыпалось навигационное меню слева) И почему вы предлагаете забыть про полурезину?

Хорошо было бы, если бы сделал полурезину, на 1280рх полоса прокрутки Так же в левом меню ссылку сделал бы на все строчку вместе с иконкой. (так же hover эффекты добавил бы, но то уже по желанию.) И да, шрифт нужно править, в некоторых местах его практически не видно. p.s спрайт иконок вручную делал или каким-то сервисом?

Да, именно это!

Спасибо за наводку

Здравствуйте. Подскажите, пожалуйста, качественный скрипт сортировки работ по категориям в портфолио.

Немного изменилась ситуация, теперь нужно сделать несколько выпадающих окон разной ширины (одно примерно 300рх, другое - на всю ширину экрана.) Пример: Метод Z1gnet теперь не подходит. Решил проблему с дописыванием лишней строчки: <span class="border-none" ></span>и задал ему стиль: .border-none { display: none; width: 100%; height: 2px; background: lightgray; position: relative; bottom: 0px; z-index: 2;}Можно ли обойтись без дополнительного дописывания span'a? Выпадающему списку нельзя поставить z-index: -1; Код можно посмотреть тут

Спасибо большое!

Не совсем.

Да, решил проинформировать человека -- Вот только есть подергивания назад, получается когда период скролинга заканчивается, с этим ничего нельзя поделать? Все разобрался. Картинке поставил repeat x, а скролинг -(размер всей картинки)

Да, вот так, спасибо большое! Спасибо, но работает только в хроме, firefox стоит на месте

Здравствуйте. Недавно на одном случайном сайте видел одну интересную штуку: у заднего фона блока контента была горизонтальная анимация. На фоне была склейка разных фотографий, которые автоматически скролились влево. Как можно подобное реализовать? Заглядывал в код, вроде сделано было через transparent. К сожалению в закладки не добавил и в гугле найти не смог что-то похожее -- p.s. прикреплю изображение, про что я описывал (на заднем фоне одна цельная фотография)

http://htmlforum.ru/index.php?showtopic=50199

Да можно было бы и не только таким способом, а еще и margin-bottom: -1px; но все дело в position: absolute;