28.04.2016, 21:55 | #31 |
Специалист
Регистрация: 16.06.2013
Сообщений: 322
Вес репутации: 152
|
Еще вот так работает.
Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Таблица</title> </head> <style> .img-responsive { display: block; width: 100%; max-width: 100%; height: auto; } </style> <body> <table> <tr> <td><img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png" alt="" /></td> </tr> </table> </body> </html> |
28.04.2016, 22:16 | #32 |
Дикий
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,551
Вес репутации: 360
|
Спасибо Но я там в 1 пункте писал про width: 100%.
Разве от display: block; что-то сильно изменится?
__________________
Делаю кулоны с опалами в стекле и не только! |
03.05.2016, 20:23 | #33 |
Дикий
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,551
Вес репутации: 360
|
Кто-то может покидать статистику. Что вообще в ней происходит после подключения адаптива или мобильной версии?
Сегодня просто увидел красоту: Но вдруг на выборке 10 - 20 сайтов все не так красиво.
__________________
Делаю кулоны с опалами в стекле и не только! |
14.09.2016, 17:24 | #34 | |
Дикий
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,551
Вес репутации: 360
|
Если кто-то еще использует Крутилку в партнерке Озона, могут быть полезны такие вот стили:
Цитата:
Подойду к прозрачным Крутилкам и Крутилкам с белым фоном, когда товары идут друг под другом. Хотя, они немного избыточны, так как у меня внешние ссылки дополнительно помечаются картинкой. И еще подключены стили из этой темы. Потому пришлось местами "обнулить".
__________________
Делаю кулоны с опалами в стекле и не только! |
|
15.09.2016, 04:39 | #35 |
Мастер
Регистрация: 17.07.2012
Адрес: Москва
Сообщений: 815
Вес репутации: 200
|
Покувыркавшись на нескольких сайтах с адаптацией под мобильники и узкие экраны, скажу так:
1. ДА, это ИМЕЕТ смысл! Рост посещаемости ~вдвое, положительная реакция поисковиков да, приносит результат. 2. Я лично при этом соблюдаю вот такие принципы и применяю вот такие решения: 2.1. Если у сайта изначально нет "постоянно висящей менюшки в определённом углу", а навигация вся сверху - вешаем ему стандартную кнопку "Наверх" яваскриптовую, причём достаточно широкую чтобы в неё легко было попадать, и чтобы она закрывала наименее значимую часть контента справа внизу. И чтобы появлялась только тогда, когда актуальна. я брал скрипт отсюда и редактировал под себя 2.2. На экране шириной менее 400 пикселей ВСЕ картинки и ВСЕ ссылки с текстом длиннее 10 символов СЛЕДУЕТ делать width:100% display: block и clearfix! Альтернативное решение - короткие тексты ссылок. См., например, у меня на http://arda.su/ (ссылки на альбомы, годы, синглы) - конструктивная ругань принимается, кстати. Ещё там есть изврат - старый вариант сайта с радикальным изменением дизайна страниц на малой ширине экрана 2.3. На малой ширине экрана надо или очень сильно уменьшать, или вообще гасить display: none логотип сайта и большую часть шапки. Иначе оно бессмысленно тратит место на экране. 2.4. на ширинах менее 400 пикселей тизеры новостей и статей сайта проще, лучше и юзабельнее сделать БЕЗ КАРТИНОК и БЕЗ ДАТ вообще, а вот шрифт этих ссылок увеличить до читабельного состояния. Последний раз редактировалось qkowlew; 15.09.2016 в 04:48. |
17.09.2016, 17:46 | #36 |
Дикий
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,551
Вес репутации: 360
|
qkowlew, спасибо за статистику! Редко присылают.
Я бы по 2.1 добавил, что можно сделать плавающей кнопку "бутерброда" и уже при клике по ней прокручивать вверх. У меня такая кнопка слева на http://dikij.com/ есть и на остальных сайтах - тоже сделал. Только там стрелка, так как "бутерброда" в шапке нет и впихнуть его некуда. 2.2 на arda.su неплохо бы добавить отступы от края в 1 - 2%. А вот про ссылки display: block - не совсем понял - зачем. Максимум делал ссылки display: inline-block с отступами. 2.3. Можно, но не очень люблю, когда ленятся и уже пикселях на 800 врубают "мобильную" версию без шапки. 2.4 Зависит от сайта. Можно убрать обтекание картинок, сделать width: 100% и display: block с margin: 5px auto например.
__________________
Делаю кулоны с опалами в стекле и не только! |
17.09.2016, 18:17 | #37 | |||
Мастер
Регистрация: 17.07.2012
Адрес: Москва
Сообщений: 815
Вес репутации: 200
|
Цитата:
Цитата:
Прикол отдельный тут в том, что проверка Яндекс-Вебмастером "сайт оптимизирован для мобильных устройств" подразумевает, в частности, отсутствие горизонтальной прокрутки. И, фактически, для более позитивного отношения яндекса, ЛУЧШЕ погасить ссовсем такую фиксированную-табличную шапку, если с ней не удалось справиться. Цитата:
|
|||
18.09.2016, 00:17 | #38 |
Дикий
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,551
Вес репутации: 360
|
Я бы не выдержал, разнес бы таблицу на блоки с обтеканием, сделал ширину контента 98 с margin 1% по краям.
Ну и логотип поставил бы по центру. Так он почти всегда выглядит лучше. Плюс, инлайн-блоки для верхнего меню с выравниванием по центру.
__________________
Делаю кулоны с опалами в стекле и не только! |
18.09.2016, 14:59 | #39 | ||
Мастер
Регистрация: 17.07.2012
Адрес: Москва
Сообщений: 815
Вес репутации: 200
|
Так как раз тизерные элементы я устал утрясать - они в этом движке для группы сайтов генерятся одинаково и очень ракообразно, и если я чуть сильнее исправлю этот кусок говнокода "в основной ветке" - поедет дизайн намного более посещаемых и сложных по структуре сайтов, за что клиенты полезут в бутылку.
Цитата:
Цитата:
Добавлено через 4 минуты Надо будет более обстоятельно перепроверить работу процентов в маргинах и паддингах. А то было дело, 98%+1%+1% не во всех браусерах образовывало div без горизонтальной прокрутки, и это бесило. Последний раз редактировалось qkowlew; 18.09.2016 в 14:59. Причина: Добавлено сообщение |
||
18.09.2016, 19:57 | #40 | |
Дикий
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,551
Вес репутации: 360
|
Цитата:
Если это не таблица, лучше прописать width: auto и margin-left: 1%; margin-right: 1%; Тогда ни padding вутри, ни рамка - не повлияют никак. Там еще есть варианты (с max-width, например) но все перечислять не буду. Еще гляньте http://htmlbook.ru/css/box-sizing
__________________
Делаю кулоны с опалами в стекле и не только! |
|
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Оптимизация сайта | koctik | Общие вопросы оптимизации | 5 | 13.07.2013 15:23 |
SEO оптимизация сайта | birja | Общие вопросы оптимизации | 2 | 13.04.2012 10:54 |
Задачка... 3 строчки на JS. Хелп! | MonAmur | Разработка и сопровождение сайтов | 3 | 08.10.2009 14:50 |
Оптимизация сайта | sunplant | Общие вопросы оптимизации | 9 | 25.11.2008 09:15 |
оптимизация сайта :( | pha | Яндекс | 1 | 10.12.2007 15:54 |
Часовой пояс GMT +3, время: 23:19.