- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Как удалить плохие SEO-ссылки и очистить ссылочную массу сайта
Применяем отклонение ссылок
Сервис Rookee
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
А обязательно ли упоминание "screen"? Например: @media screen and (max-width:600px)
Google обходится без этого screen и предлагает простое @media(min-width: 468px) в рекомендациях по стилям адаптивного блока.
Действительно интересно, спасибо :)
Я ориентировался на то, что кроме "screen" есть еще куча других параметров:
http://htmlbook.ru/css/value/media
screen - Экран монитора.
Видимо, пример из Гугла трактуется как all.
Адаптивные таблицы при помощи только CSS стилей 2
Развивая идею адаптивных таблиц, сделал такое вот интересное решение с прокруткой:
width: 100% !important;
overflow: auto !important;
display: block !important;
}
table tbody {display: table !important;
width: 99.9% !important;}
Здесь я обвожу таблицу рамкой, чтобы было понятнее, что она не обрезана.
Потом назначаю тегу table ширину 100% и делаю его контейнером с прокруткой для самой таблицы, роль которой теперь будет играть tbody.
У последнего я еще чуть уменьшил ширину, так как часть ее уходит на рамку.
Все это позволило сделать адаптивные таблицы с большим количеством колонок красивыми. :)
Почему не обернуть table, например, элементом div и не применить стили и прокрутку уже к нему?
Дело в том, что на сайтах бывает очень много таблиц. А у меня обычно доступ только к стилям. И для каждой правки требовалось бы отдельно просить администратора внести изменения.
Спасибо за отзывы!
Сегодня хочу добавить интересное. Адаптивные таблицы при помощи CSS стилей 3. Справляемся с thead и tbody одновременно.
Я уже писал про адаптацию таблиц для мобильных устройств. И писал про адаптивные таблицы при помощи стилей.
А в этот раз у таблиц на сайте клиента был не только tbody, но и thead. И если делать прокрутку по старому варианту, они сжимаются не одинаково, а в зависимости от содержимого. Поэтому CSS был мной немного переделан:
table:before {content: ""; display: table-cell !important; overflow: auto !important; width: 1% !important;}
Если использовать только первую строку стилей, таблица будет сжиматься нормально. Но вот растягиваться на 100% она не хочет. Только по ширине содержимого.
А вот добавление table:before c display: table-cell растягивает содержимое на 100%.
Магия :)
Ну и важный момент про шрифты!
Все что меньше 12px - не пройдет проверку в новом Яндекс Вебмастере! Кажется, там есть определенный порог по количеству слов (или символов) на странице - со шрифтом такого размера. Но я обычно не рискую.
Да и 12 пикселей - это уже совсем мелко для телефона.
Адаптивные таблицы при помощи CSS стилей 3
запилите онлайн демку?
в bootstrap есть пример с обертыванием таблицы дивом - http://getbootstrap.com/css/#tables-responsive
как по мне такой вариант предпочтителен, таблица останется исходной
в bootstrap есть пример с обертыванием таблицы дивом - http://getbootstrap.com/css/#tables-responsive
как по мне такой вариант предпочтителен, таблица останется исходной
Конечно предпочтительнее!
Зачем, если можно обернуть все в обычный div со стилями? :)
Промбема в другом. На сайтах бывают тысячи таблиц. И еще работают редакторы, которым придется отдельно рассказывать все и показывать...
Да, перепроверил прошлый свой пример. Там 1 колонка слишком сильно ужимается. Действительно нужно ставить в стилях ширину для каждой, либо прописать что-то наподобие width: 1%; тогда браузер сам подберет размер. Хотя, не очень люблю этот вариант.
---------- Добавлено 06.04.2016 в 02:45 ----------
запилите онлайн демку?
Блин. Я ее удалил уже. Вот сделал вам новую со всеми примерами: http://dikij.com/test2.php
Никаких красивостей и дополнительного кода. Только таблицы и как на них влияют разные стили и методы адаптации.
Решение довольно простое: Мы дополнительно задаем изображению width: 100% (не забываем про height: auto).
Картинка растягивается на весь контейнер и уменьшается вместе с ним. Как минус - нужно очень точно указывать стили, чтобы не растягивать маленькие изображения.
Применил твой совет к логотипу, но лого у меня не простое, а меняется при наведении (Png трюк с прозрачностью) Но вот выплыла проблема, как поставить теперь лого по центру нашего фона? надеюсь поможешь с данной проблемой
Почему логотипы, да и в целом картинки растягиваются и получаются такими страшными (порой с пикселизацией) в мобильном хроме? У большинства так.
Думаю, я и правда могу помочь в обоих случаях. Но я не умею править стили ПО ОПИСАНИЮ :)
Можно примеры?
Думаю, я и правда могу помочь в обоих случаях. Но я не умею править стили ПО ОПИСАНИЮ :)
Можно примеры?
https://jsfiddle.net/82nq9jug/4/
Андрей, надеюсь вы поможете. Хотя возможно есть смысл в уменьшении картинки ниже 600 по монитору