Дикий блог

Жареные жуки и фрукты из Тайланда          Ну, не все мне писать про работу. Это же, по идее, личный блог! :) Сегодня я расскажу про жареных сверчков из Тайланда, гусениц шелкопряда... и шкаф. Хотя, что рассказывать про шкаф? Купили для детской и собрали.          Как я уже писал, вместо свадьбы мы отправились в свадебное путешествие в Тайланд. По совместительству - первый выезд за границу для обоих. Да, это была масса впечатлений. А теперь вот очень захотелось освежить воспоминания.         ... : http://dikij.com/blogger/2016/?id=19

Адаптивные таблицы при помощи только CSS стилей!          Я уже писал про разные способы сделать таблицы адаптивными. При работе с сайтом клуб-лада.рф получилось сделать адаптивную с горизонтальной прокруткой - только при помощи стилей (на фото - справа внизу).          Вот пример CSS, который был использован: table border: 1px solid #333333; width: 100% !important; overflow: auto !important; display: block !important; table tbody display: table !important; width: 99.9% !important;          Здесь я обвожу таблицу рамкой, чтобы было понятнее, что она не обрезана, а может прокручиваться по горизонтали.          Потом назначаю тегу table ширину 100% и делаю его: http://dikij.com/blogger/2016/?id=18

max-width не работает в Firefox и IE 11 для изображений (тег img)          При недавней переделке сайта florets.ru возникла потребность очень корректно уменьшать огромное количество фотографий разных размеров.          Большинство современных браузеров вполне корректно понимают max-width: 100% и уменьшают изображение, если оно не помещается в контейнер. С IE 11 и Firefox такого не происходит. По какой-то причине эти браузеры считают, что max-width: 100% относится к истинной ширине изображения, а не к ширине в контейнере.          Решение для max-width в Фаерфоксе и ИЕ 11 довольно: http://dikij.com/blogger/2016/?id=17

Делаем мобильный сайт так, чтобы это никто не заметил          При переделке сайта vedmochka.net под мобильные устройства я столкнулся с задачей скрыть рабочую версию от посетителей. Это было связано с высокой посещаемостью портала.          Так как работаю я всегда с живой версией сайта, а половину времени адаптации занимает работа с контентом, был выбран простой и действенный вариант:          Этот мета тег принудительно ставит ширину контента 1024 пикселей для мобильных устройств. А на десктопе позволяет: http://dikij.com/blogger/2016/?id=16

Адаптивная верстка таблиц. От мучений к разгрому          Я сейчас заканчиваю переделку сайта petergid.ru, состоящего процентов на 80 из сплошных таблиц. И что-то мне уже давно хочется рассказать немного о том, что с этими таблицами можно сделать в адаптивном дизайне.          Начну я с полезных советов, а закончу полным разгромом.          Для начала, неплохо бы попробовать с таблицей договориться. Например, настроив автоматические переносы слов в ней через hyphens: auto; к сожалению, работает это далеко не во всех браузерах. Но: http://dikij.com/blogger/2016/?id=15

Как сделать кнопку «Полная версия сайта» для адаптивного дизайна?          Хоть я и стараюсь верстать сайты так, чтобы при повороте «боком» посетитель получал полную версию сайта. Но регулярно возникают вопросы - как сделать кнопку для переключения к полной версии сайта.          Самое интересное, что это не совсем очевидно именно для адаптивного дизайна. У него нет как таковой полной версии. Все зависит от ширины экана и размера контента.          Но сейчас я покажу самый простой способ и даже приведу: http://dikij.com/blogger/2016/?id=14