kattiperk

Инлайн-блоковый вообще-то - http://joxi.ru/gmve5EqSxDRQ1r http://www.w3schools.com/tags/tag_img.asp @Get to heaven, это что такое у нас тут - http://joxi.ru/KAx5WQzC4DjbOr Margin добавляется. Что не так у тебя?

Можно кроме селектов. Для них лучше плагин - select2 https://select2.github.io/

Хватит

Margin на высоту меню дайте шапке. Так как с позицией fixed элемент уходит из потока - "The element is positioned relative to the browser window" Отредактируйте на фиддл код, плохо там

Прошу - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

О, спасибо. Примерно так и делаю, но что-то взбесил на этот раз макет и отношение заказчиков.

.tabs-link:hover:after { visibility: visible; }

Если честно, то нет. У меня есть чем заняться, а не выполнять работу дизайнера.

.icon - дает всем это изображение .fb, .mail - дает позицию каждой иконки (:hover аналогично) Например, ширина .icon = 30px*30px. Дополнительный класс .twitter сообщает, что твоя позиция иконки - background-position: -30px -30px; То есть по Х - отойди вправо на -30 пикселей, а по Y - вниз на -30 пикселей, а всё остальное скрыто, так как область 30*30 пкс. Для остальных классов .fb, .mail мы орудуем только значением background-position. http://joxi.ru/brR8kNluQRN7p2 - что размыто, то скрывается.

Здравствуйте. Недавно появился заказ, который меня немного насторожил тем, что дизайном заведовал дизайнер-маркетолог. На первый взгляд макеты для десктопа неплохие, как обычно. Потом через время предоставили для планшетов и мобильных. Вот с этого момента подробнее: 1. Макеты с одинаковыми блоками для разных страницы отличаются 2. Мобильное меню с непонятно откуда взятыми пунктами, которых не было в десктопной версии. Их то 6 пунктов, а в моб. - 8 (совершенно новых )+вложенности до 2 уровня. 3. Мелочи вроде разных padding по краям, также нижние и верхние отступы разнятся у одинаковых блоков. 4. Немного нелогичное построение блоков - у десктопа одна структура (фото>заголовок>текст>кнопки), для планшетов (заголовок>фото>кнопки>текст), для телефонов (заголовок>фото>текст>кнопки). Также нет состояния при наведении на кнопки и при нажатии. Когда увидела макет, дала список вопросов, составили что-то вроде ТЗ, в котором опять таки ответили не на все вопросы. Например, про наведение так и не определились, но чтоб была рамочка Ну и далее мелкие несовпадения, которых накапливалось очень много и приходилось писать длинные письма дизайнеру-маркетологу, потому что каждый отличающийся отступ, не тот цвет и новая непонятная рамка стоит добавления нового класса. Самый распространенный ответ - а вы как думаете? или на ваше усмотрение. То, что я думаю - дизайн не проработанный (планшетный и мобильный), и чтоб мне решить, надо потратить время на анализ что было и как будет и будет ли оно удобно. В общем, неделю таких переписок - и мне это порядком надоело. Макет они дорабатывать не собираются. Предоплату я отработала, так как есть страницы для всех версий, кроме меню и 2-х форм отправки (которые, кстати, только для десктопа сделаны). Думаю дальше отказаться, потому что это не стоит потраченного времени и того, что осталось мне доплатить, денег не потребую. К чему я это написала. Как распознать на ранней стадии, какие ошибки или несоответствия скрывает в себе макет? Как составить здравое ТЗ, если все нюансы появились в процессе верстки? Если нет ТЗ от заказчика по макету, стоит ли тратить время на его написание с моей стороны или это дело заказчика (это всё потраченное время, которое никто не оплатит, кроме увеличения стоимости верстки ненамного)? Стоит ли прислушиваться к себе и не брать заказы от дизайнера-маркетолога :)? Могу я взять работу в портфолио, так как 90% выполнено мной (брала заказ отчасти потом, что понравились макеты)? P.S. макеты не прикрепляю по не- известным причинам

Выровнять по левой стороне. Но поместить блоки в еще один контейнер, который выровнять по центру margin: 0 auto;

1. Это у нас заголовок-ссылка - http://joxi.ru/Q2KxaXps9oQG9A 2. Проще сделать спрайт с белыми значками соц. контактов, а цвет фона задавать через стили. Универсальность - 100% http://joxi.ru/eAO4ny7F4oVqjr 3. Скорее top-menu - http://joxi.ru/4AkOk1pcM7DBLA 4. Не ленитесь присвоить им классы - http://joxi.ru/E2pkNJdSB6DJWm 5. Зазор между инлайн-блок элементами - http://joxi.ru/xAeeR31SYnKBXA 6. Что будет с картинкой, если она не по ширине слайдера будет? Стилей для нее нет. 7. Ширину слайдера можно дать в 100%, если мы его используем в другой контейнер не привязываясь к ширине 8. Полоски сделаны хорошо, но это всё-таки заголовок, оберните его в h$ - http://joxi.ru/eAO4ny7F4oVbjr 9. Тут неверно - http://joxi.ru/ZrJqZnXt1o8gdA . В таком случае пишем, то margin: 0 24px; для каждого блока, но у общего контейнера отнимает это же margin: 0 -24px;. В таком случае не нужны :nth-child(3). А идеально было бы задать контейнеру класс, к примеру, .three-column-wrapper, а содержимому просто .column. Далее .three-column-wrapper { margin: 0 -24px; font-size: 0; /*убираем зазоры*/ } .three-column-wrapper .column { width: 33.3333333%; margin: 0 24px; } 10. Зачем дали высоту? http://joxi.ru/Dr8nxw6fk69Wb2 11. Там же - кнопка из-за этого стала position: absolute; 12. Там же - если текста будет больше? Еще, вы проделали лишнюю работу по отступам, продать дали бы родителю padding. 13. Футер не прижат к низу - http://joxi.ru/v29JkwWsGPJwQA 14. Дайте классы инпутам формы 15. Нет стилей ни к одной картинке в превью статьи, когда картинка слева. У вас стоят заглушки одного размера. А теперь поставьте разных размеров и увидите разницу. 16. Видимые заголовки обозначены просто ссылками, а должны быть h2, или h3 ... Пока всё, дальше сами

display: table-cell; или flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Может, чего-то не хватает - http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

margin-left в 20px дает такое дайте ему padding-left: 20px; box-sizing: border-box; , если нужен тот отступ или width: calc (50% - 20px);

Да, я знаю. Если пойдем наоборот - напишем для мобильных. А расширять - это давать блокам с display: none; > display: block; ? Мы их все равно загрузим для телефонов, получается?

Эм? То есть с мобильного я недостойна видеть весь контент сайта? Автор, что именно лишнее? Да, я пользуюсь display: none; , но не для сокрытия блоков. Разве что из-за магического дизайна приходится дублировать блоки, они в мобильной не в потоке идут, например. Но это было один раз-то.

97% - отличный показатель Картинки пережимать не надо, ужали по максимуму - всё, иначе будет потеря качества значительная. Да, ходит такое мнение, что пока не загрузит <head>, не выведет разметку с контентом. Скорее всего означает, что .css большой, и пока он тут грузится,контент бы уже давно загрузился и пользователь читал текст, а потом появились бы стили и текст стал красивым. Проверьте, если хотите, тут - http://www.testmycss.com/ Вот статья, где хорошо написано про то, кто и когда загружается, кто кого блокирует и как исправить - https://varvy.com/pagespeed/critical-render-path.html Насчет gzip - http://seo-mayak.com/sozdanie-bloga/skorost-zagruzki/kak-vklyuchit-gzip-szhatie-i-uskorit-sajt.html Еще на хостинге можно настроить без дописывания в .htaccess, просто поставив галку там где надо в разделе личного кабинета.

Точно, :after не стоит Берите это /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; }

Стоит у .row класс .clearfix Ваш CSS - .container .cols имеет float: left; Зачем? Бутстрап и так их расположит рядом.

Для тега <body> обнулите margin: 0; padding: 0;

Да, что-то в этом примере есть, спасибо. Насчет Safari я знаю, а заказчики - нет. Наверное, придётся им тоже узнать.

Да можно. Но мне не нравится, что flex плохо работает в Safari на Windows. Всё равно как-то негармонично это всё.

Здравствуйте. Верстаю макет, рассчитан для мобильных и планшетов, резиновый временами. Есть такой блок - http://joxi.ru/1A59OwzSKyoyPA . Это вариант для десктопов. Далее для планшетов - http://joxi.ru/V2Ve8MBS0J1DLm . И для мобильных - http://joxi.ru/DrlO1yQc4OMjRA Как будучи в здравом уме и хорошем психическом состоянии сверстать логично, без использования скрытых блоков, типа с заголовком или списком, которые расположены не правильно, как по мне, в планшетной и мобильной версии. Вообще, стоил ли попросить другой дизайн или намекнуть дизайнеру, что он немного не понимает, как верстается из десктопного варианта в мобильные?

http://howtocenterincss.com/