Советы Артёма Поликарпова и Коли Митина

За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично и не разваливалась?

Мы всегда стараемся ответить на ваши вопросы. Кроме нашего совета, вы получите интеллигентные отзывы посетителей нашего сайта.

Открыты 5 апреля 2007 года.

В архиве

Андрей ТихановТехнический дизайн и графика
Евгений ЛучининКомпоновка и стиль информационных сайтов
Артём ГорбуновПереговоры и отношения с клиентами
Иван БогдановЛоготипы и фирменные стили
Родион ЖабревРекламная ретушь: психология, обработка, подача
Артём Поликарпов и Коля МитинДизайн и технологии: вёрстка, скрипты, браузеры
Таня МисютинаВизуализация данных
Антон ШнайдерЛоготипы и фирменные стили
Владимир БеляевЮридическая сторона: договоры, права и товарные знаки
Руст КулматовВеб-разработка
Аня ДаниловаШрифт
Илья СинельниковПереговоры и отношения с клиентом
Фёдор БорщёвУправление разработкой
Людмила СарычеваТекст, редактура и информационный стиль
Юрий МазурскийВеб-разработка
Константин МозговойИнтерфейс

Здравствуйте, Артём. Подскажите, с чего начать изучение ЦСС ? С чего начинали вы?

Артём, можно ли заверстать несколько разноширинных элементов через равные промежутки в резиновом контейнере, пользуясь лишь ЦСС ?

Как правильно сверстать такое меню?

Расскажите, как правильно организовать взаимодействие разработчиков фронтенда и бэкенда?

Удачное ли решение на сайте в поле пароля указывать, что нажат капслок, как на Маке? Нигде не встречал.

Как сверстать точечки в таком меню?

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

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

Как принудительно включать полную версию на мобильном устройстве?

Я использую Компас, поэтому медиавыражения содержатся в коде основного стиля. Вынести их во внешний файл для того, чтобы подключать и отключать, не получается, вернее, неудобно. на <body> тоже лишает удобства подключать медиавыражения в любом месте каскада.

Сталкивались ли вы с подобной проблемой, как решали?

Поделитесь, как вы делаете кроссбраузерные кнопки?

Коля, Артём! Научите, пожалуйста, как сделать такой же клёвый таймлайн, как на главной бюро?

Расскажите, пожалуйста, как реализованы фотографии участников в Бюросфере.

Верстаю зубчатый край у резинового блока, смущает, как он не вовремя обрывается. Можно ли оставить только целое количество зубчиков? Или я слишком заморочился?

Есть такая интерактивная карта: http://rozma.com.ua/dealers.html

Информация показывается через :hover.

Можно ли реализовать вместо этого всплывание блочка через нажатие только на чистом ЦСС ? И если нет, то как оптимальнее всего это сделать?

Необходимо сделать : justify, но чтобы последняя строка центрировалась, как Текст может меняться.

Подскажите, как реализовать такое?

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

Заметил, что выделение текста иногда странно себя ведёт. Немного покопавшись в ХТМЛ и ЦСС , я понял, что это зависит от наличия position:relative у « родителя».

Стоит ли обращать внимание на такие мелочи при вёрстке?

Меня интересует вопрос миграции базы данных между различными версиями проекта: для разработчиков, менеджерской, боевой.

Как это организовано у вас, какие инструменты используете?

Конечно, к вёрстке вопрос относится косвенно, но всё же: как вы храните данные для многоязычных сайтов?

Существует масса подходов:

когда переводы выносятся в отдельную табличку с id, owner_key, lang_id, string, text, где owner_key — сгенерированный ключ ( например, MD5 ) для связи основной таблицы с таблицей переводов;
когда для каждой таблицы делается отдельная таблица с переводами и owner_key — это id основной таблицы;
когда таблица переводов имеет вид id, ru, en, de, …;
или тупо все поля в основной таблице дополняются полями переводов.

Сам пользуюсь вариантом id, ru, en, de, потому что большинство многоязычных сайтов редко переводятся больше чем на 5 языков, а если и переводятся, то информации на них немного. Но даже в этом варианте неудобно писать запросы, например, для удаления строк, когда нужно удалять все зависимые переводы. Случаи со склонениями по падежам в интерфейсе настолько редки, что можно обрабатывать их отдельно. Подумываю перейти на вариант « тупо писать все переводы в основной таблице», но хотел бы спросить вашего совета.

Пытался сверстать вот такой элемент. Его размеры 380×55. Проблема в том, что в разных браузерах блок отображается — ровно, всё скачет.

Как сверстать этот блок, чтобы он корректно отображался в разных браузерах и системах? Помогите с кодом.
Как правильно распределить пространство между блоками, учитывая, что дней может быть как 5, так и 15? Остальное особо не изменяется.

Как правильно задавать и комбинировать верхние и нижние отступы у заголовков и абзацев?

Например, обычно у h2 желателен большой отступ сверху для отделения от предыдущего абзаца. Но когда h2 идёт сразу же после h1, получается слишком большой отступ между ними. Можно ли через ЦСС отследить или предупредить подобные случаи?

Как реализовать вёрстку блоков с разной высотой, как на « Пинми»?

Как реализована висячая пунктуация на сайте бюро, в частности — в « Советах»?

Я не очень хорошо владею регулярными выражениями. Как на Яваскрипте распарсить произвольный УРЛ , определить протокол, домен, путь, , хеш?

Подскажите, как правильно сделать подчёркивание многострочного текста, чтобы линия была, допустим, в три пикселя?

Артём, как сделать клёвый вертикальный градиент на тексте?

Артём, можно ли оценить уровень кандидата на вакансию верстальщика, попросив его на собеседовании написать несколько ручкой на бумажке, без компьютера и Гугля?

Здравствуйте, уважаемые советчики. Подскажите пожалуйста, как реализовать самым простым способом скрипт, превращающий ссылку в текстовое поле?

Артём и Коля, раскажите, пожалуйста, как правильно сверстать таббар на ХТМЛ5 и ЦСС3 фиксированной высоты, прибитый к низу окна, и чтобы всегда оставался на экране, — в общем, как в мобильных приложениях. Собственно, это и нужно для отображения на мобильных устройствах.

Дорогие советчики, возникла реальная потребность в вашем совете.

Имеется страница, на которой размещены блоки с картинками шириной 600 пикселей и произвольной высотой.

Но возникла проблема в том, что иногда нужно их быстро уменьшить до ширины в 300 пикселей. Есть ли возможность быстро решить этот вопрос с масштабированием? Может, есть функция Яваскрипта для масштабирования картинок?

Вопрос Арёму Поликарпову. Каким способом можно сделать загрузку кастомных шрифтов приятной, без скачков и пустых блоков с текстом?

Артём, объясните, пожалуйста, в чём преимущество div перед table. Кроме того, что это молодёжно и уменьшает размер кода.

Здравствуйте, уважаемые советчики!

Последнее время довольно часто вижу в дизайне сайтов заголовки, выровненные по центру и обрамлённые линиями с двух сторон. Интересно, а можно ли сделать это, используя лишь один тег?

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

Как размыть объект? Допустим я открыл фенсибокс, он закрыл мне контент полупрозрачной пеленой. Я хочу, чтобы закрытый контент немного размылся.

Можно вообще такое сделать?

Прошу совета по вёрстке. Как выровнять картинку внутри дива по центру, если её ширина больше ширины дива? Свойство для дива срабатывает, только если картинка меньше дива.

Недавно меня спросили, как правильно разделять разряды чисел. Ответ однозначный — тонким пробелом.

В комментариях привели аргумент против: тонкий пробел создаёт трудности, если переносить число из веба в калькулятор или любую другую программу, которая работает с числами.

Но по сути ведь проблемы нет. Тонкий пробел — это ведь пустота, её можно сделать , не мешая копипасту и не создавая проблем на вёрстке. Но вот как?

Как вы относитесь к инициативе Микрософта по выводу ИЕ 6 с рынка акцией « Интернет Эксплорер 6 Каунтдаун»?

Имеют ли подобные акции cмысл, особенно, учитывая, что эффект воздействия на оставшихся пользователей снижается?

Есть ли у вас мысли, как Микрософт должен был поступить глядя на « неубиваемость» шестого? Как вы лично относитесь к ИЕ 6 и как долго будете поддерживать его в своих проектах?

Как пользоваться mod_rewrite, чтобы получались красивые урлы? ( Дополнительный вопрос: как сделать так, чтобы при этом не ломались все относительные ссылки?)

Артём, как вы подключаете стили для ИЕ?

Научите, пожалуйста, правильно верстать формы авторизации и т. п. Перерыл интернет афари Дев центр», но не нашёл материалов о том, как сверстать форму так, чтобы Keychain Access на маке предложил сохранить логин и пароль.

Кстати, Артём, а как верстать радиокнопки имени Плотникова? Чтобы всё ровно попадало куда надо.

Как проработать верстальщиком всю жизнь?

Здравствуйте, подскажите, как лучше сверстать данные элементы без ЦСС 3?

Стоит ли наращивать вложенность тегов для структурированности кода?

Например, список комментариев ( выделение отдельных комментариев не понадобится). Его можно оформить так:

А можно так ( проще, но все в кучу):

Последний способ увеличивает скорость сайта, но не возникнут ли потом проблемы?

Очень долго бился над одной задачей, которую так и не смог решить. Взгляните, пожалуйста.

Как можно с помощью ЦСС реализовать этот пример, используя в разметке только один тег? Полоска должна быть резиновой — меняться в зависимости от текста, также должен настраиваться отступ между текстом и линией.

Хочу сделать смену языка на сайте без перезагрузки страницы (и без аякса)

Вопрос касается ХТМЛ . Скажите пожалуйста, действительно ли необходимо цитаты внутри предложения заключать в тег <q> ( с прописанными в ЦСС кавычками)? Или вполне уместно обойтись без него и вручную ставить «…»?

В ПХП , Яваскрипте и Джейквери одинарная и двойная кавычки, вроде бы, равнозначны. Плюс этого в том, что их комбинирование позволяет улучшить читабельность кода: не нужно экранировать кавычки внутри сложных команд. Минус — в лёгком беспорядке ( заметил, что в одних и тех же ситуациях ставлю то ', то ").

Когда лучше использовать одинарные, а когда двойные кавычки в программировании? Есть ли правила хорошего тона, а может и функциональная разница?

Как любой порядочный начинающий дизайнер я занялся созданием своего ( очень нужного!) блога и портфолио. И решил размеры шрифта, отступов, интерлиньяжа задать в емах ( em). попадались несколько статей, что пиксели — это каменный век.

Не могли бы вы разжевать этот момент? В каких единицах стоит задавать размеры шрифта?

В Сафари на Маке можно прокрутить страницу за её пределы. У меня Виндоус, а у дизайнера Мак, и он говорит, что мои скрипты, завязанные на значения скрола, странно ведут себя при таком оттягивании.

Есть универсальное решение?

Используете ли вы готовые ЦМС ? И как вы к ним относитесь, например, к Вордпрессу, Друпалу, Джумле? И то же по фреймворкам — « Симфони» или в этом духе? Пользуетесь ли вы работой, которая уже была сделана , чтобы упростить жизнь?

Как победить кривой рендеринг трансформированного (skew) текста на Винде?

Размеры картинки заранее неизвестны. Подпись располагается под картинкой. Возможно ли с помощью ЦСС сделать так, чтобы длинная подпись не вылезала за край картинки, а переносилась на следующую строку?

Как выровнять два плавающих блока по базовой линии, если в одном из них кнопка?

Вопрос по вёрстке. Мне нужно особенно выровнять абзац, у которого внутри есть картинки. Как в ЦСС работать с родителями?

Необходимо создать галерею, где число картинок меняется в зависимости от ширины браузера. Высота галереи ограничена тремя строками. Возможно ли сделать это только с помощью ЦСС ?

Задался вопросом, в какой кодировке всё же лучше делать сайт?

Как выбор кодировки может повлиять на кроссбраузерность или ещё?

И, наконец, как правильно обращаться с кодировкой на страницах или при обращении к БД?

Задаю популярный среди новичков вопрос Артёму Поликарпову.

Как верстать ссылки вида http://site.ru/#news, чтобы при нажатии на них сайт не загружался заново, а просто выскакивало новое содержание без перезагрузки. Как это работает, можно посмотреть на сайте chopapp.com, кликнув на «Would you like to know more?»

Очевидно, что бюро против капчи. Но есть сайты, которые реально страдают от мусора, получаемого с форм. Как вы обходитесь без проверки на робота?

Дизайнеры всё время изощряются с тенями и красивыми формами.

Вопрос такой — как проще всего сверстать нестандартный <select>?

Одной из особенностей таблиц является то, что их минимальная ширина далеко не всегда зависит от указанной в ЦСС . Проблема в том, что их ширина зависит от контента. То есть она не сжимается меньше суммы максимальных ширин всех ячеек.

Как решать такую задачу?

Здравствуйте, сотрудники бюро.

Я верстальщик, который часто работает в Фотошопе для создания шаблонов. У меня следующий вопрос: для определения цвета я использую пипетку, а чтобы скопировать этот цвет, мне приходится тыкать в поле с цветом, выделять его и потом только копировать.

Как в этом случае поступают ваши верстальщики, и может вообще поделитесь советами для быстрого и удобного использования Фотошопа верстальщиком?

Расскажите, пожалуйста, какую технику вы используете для работы со знаком рубля при вёрстке сайтов?

📎📎📎📎📎📎📎📎📎📎