Старый 28.04.2016, 21:55   #31
Специалист
 
Регистрация: 16.06.2013
Сообщений: 340
Вес репутации: 80
poster - просто великолепная личностьposter - просто великолепная личностьposter - просто великолепная личностьposter - просто великолепная личностьposter - просто великолепная личностьposter - просто великолепная личностьposter - просто великолепная личность
По умолчанию

Цитата:
Сообщение от D.iK.iJ Посмотреть сообщение
Вот все решения, которые удалось найти:
Еще вот так работает.

Код 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>
poster вне форума   Ответить с цитированием
Старый 28.04.2016, 22:16   #32
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,523
Вес репутации: 288
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Smile

Спасибо Но я там в 1 пункте писал про width: 100%.
Разве от display: block; что-то сильно изменится?
D.iK.iJ вне форума   Ответить с цитированием
Старый 03.05.2016, 20:23   #33
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,523
Вес репутации: 288
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
По умолчанию

Кто-то может покидать статистику. Что вообще в ней происходит после подключения адаптива или мобильной версии?

Сегодня просто увидел красоту:


Но вдруг на выборке 10 - 20 сайтов все не так красиво.
D.iK.iJ вне форума   Ответить с цитированием
Старый 14.09.2016, 17:24   #34
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,523
Вес репутации: 288
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Lightbulb

Если кто-то еще использует Крутилку в партнерке Озона, могут быть полезны такие вот стили:

Цитата:
/* Адаптируем Озон */
.OzonRev_tbMax {margin-bottom: 15px;}
img.OzonRev_border0 {height: 15px !important;}
div.OzonRev_logo > a {background: none !important; padding-right: 0px !important; border-bottom: 0px !important;}
.OzonRev_skin_12 .PartnHead .PartnHeadLogo > a {background: none !important;}
.OzonRev_skin_0 .PartnHead .PartnHeadLogo > a {background: none !important;}
.OzonRev_pad5_1 a {border-bottom: 0px !important; background: none !important; padding-right: 0px !important;}
.OzonRev_skin_12 a.OzonRev_detailName {background: none !important; padding-right: 0px !important;}
.OzonRev_skin_0 a.OzonRev_detailName {background: none !important; padding-right: 0px !important;}
a.OzonRev_podrLink {background: none !important; padding-right: 0px !important;}
td.OzonRev_tdPic {width: 90px !important; max-width: 90px !important; padding-right: 10px; padding-bottom: 10px;}
td.OzonRev_tdPic a img {width: auto !important; max-width: 100% !important; height: auto !important; max-height: 120px !important;}
td.OzonRev_tdDetail {width: auto !important;}
td.OzonRev_tdSale {width: 112px !important;}

@media screen and (max-width: 500px) {
td.OzonRev_tdPic {display: block !important; float: left !important;}
td.OzonRev_tdDetail {display: inline !important;}
td.OzonRev_tdDetail a {word-break: break-word !important;}
td.OzonRev_tdSale {width: 100% !important; display: block !important; padding-left: 0px !important; padding-right: 0px !important; padding-bottom: 15px !important; clear: left !important; margin-top: -10px !important;}
.OzonRev_skin_12 div.OzonRev_priceTitle {display: inline-block !important; width: auto !important;}
.OzonRev_skin_12 div.OzonRev_priceValue {display: inline-block !important;}
.OzonRev_skin_0 div.OzonRev_priceTitle {display: inline-block !important; width: auto !important;}
.OzonRev_skin_0 div.OzonRev_priceValue {display: inline-block !important;}
.OzonRev_pad5_1 {display: inline-block !important; padding-top: 0px !important; height: 23px !important; vertical-align: middle !important; padding-bottom: 7px !important;}
img.OzonRev_imgBay {width: 24px !important;}
}
Пример.
Подойду к прозрачным Крутилкам и Крутилкам с белым фоном, когда товары идут друг под другом.
Хотя, они немного избыточны, так как у меня внешние ссылки дополнительно помечаются картинкой. И еще подключены стили из этой темы. Потому пришлось местами "обнулить".
D.iK.iJ вне форума   Ответить с цитированием
Старый 15.09.2016, 04:39   #35
Мастер
 
Регистрация: 17.07.2012
Адрес: Москва
Сообщений: 783
Вес репутации: 127
qkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущее
По умолчанию

Покувыркавшись на нескольких сайтах с адаптацией под мобильники и узкие экраны, скажу так:

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.
qkowlew вне форума   Ответить с цитированием
Старый 17.09.2016, 17:46   #36
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,523
Вес репутации: 288
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
По умолчанию

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 например.
D.iK.iJ вне форума   Ответить с цитированием
Старый 17.09.2016, 18:17   #37
Мастер
 
Регистрация: 17.07.2012
Адрес: Москва
Сообщений: 783
Вес репутации: 127
qkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущее
По умолчанию

Цитата:
2.2 на arda.su неплохо бы добавить отступы от края в 1 - 2%. А вот про ссылки display: block - не совсем понял - зачем. Максимум делал ссылки display: inline-block с отступами.
инлайн блок поверх уже имеющегося непрямого дизайна может давать спецэффекты, с которыми я столкнулся на промежуточном этапе возни с например http://beta-press.ru (там ещё стояла задача сохранить совместимость имеющегося PHP движка с его обновлениями автором, хехе. Что решительно уменьшало пространство для манёвра). Потому я как-то перестал его активно применять.

Цитата:
2.3. Можно, но не очень люблю, когда ленятся и уже пикселях на 800 врубают "мобильную" версию без шапки.
Согласен, тоже не очень люблю. Но при исходной таблице фикс ширины 960px с фиксированными размерами картинок в ячейках и (тадам!) точно подогнанных однопиксельных рамочках это бывает такой адЪ, что проще погасить это всё ( см. тот же бета-пресс ) и (если движок позволяет) нарисовать вместо этого более резиновую шапочку.

Прикол отдельный тут в том, что проверка Яндекс-Вебмастером "сайт оптимизирован для мобильных устройств" подразумевает, в частности, отсутствие горизонтальной прокрутки. И, фактически, для более позитивного отношения яндекса, ЛУЧШЕ погасить ссовсем такую фиксированную-табличную шапку, если с ней не удалось справиться.

Цитата:
2.4 Зависит от сайта. Можно убрать обтекание картинок, сделать width: 100% и display: block с margin: 5px auto например.
Ага. Зависит. И при вертикальной картинке тизерная картинка сжирает весь экран, а квадратная - больше половины, хехе. Так что это только при тизерных картинках исключительно горизонтальной ориентации.
qkowlew вне форума   Ответить с цитированием
Старый 18.09.2016, 00:17   #38
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,523
Вес репутации: 288
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Lightbulb

Я бы не выдержал, разнес бы таблицу на блоки с обтеканием, сделал ширину контента 98 с margin 1% по краям.
Ну и логотип поставил бы по центру. Так он почти всегда выглядит лучше. Плюс, инлайн-блоки для верхнего меню с выравниванием по центру.

D.iK.iJ вне форума   Ответить с цитированием
Старый 18.09.2016, 14:59   #39
Мастер
 
Регистрация: 17.07.2012
Адрес: Москва
Сообщений: 783
Вес репутации: 127
qkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущееqkowlew - прекрасное будущее
По умолчанию

Цитата:
Сообщение от D.iK.iJ Посмотреть сообщение
Я бы не выдержал, разнес бы таблицу на блоки с обтеканием
Так как раз тизерные элементы я устал утрясать - они в этом движке для группы сайтов генерятся одинаково и очень ракообразно, и если я чуть сильнее исправлю этот кусок говнокода "в основной ветке" - поедет дизайн намного более посещаемых и сложных по структуре сайтов, за что клиенты полезут в бутылку.

Цитата:
Ну и логотип поставил бы по центру. Так он почти всегда выглядит лучше.
Это уже я "так и не решил, как лучше" и "оставил как клиент сказал ДА!!!" на получившейся картинке. Согласен, дошлифовать было можно. В данном случае логотип квадратненький и задуман изначально как "верхний левый угол страницы".

Цитата:
Плюс, инлайн-блоки для верхнего меню с выравниванием по центру.
Вот это, пожалуй, верно.

Добавлено через 4 минуты
Цитата:
Сообщение от D.iK.iJ Посмотреть сообщение
Я бы не выдержал, разнес бы таблицу на блоки с обтеканием, сделал ширину контента 98 с margin 1% по краям.
Надо будет более обстоятельно перепроверить работу процентов в маргинах и паддингах. А то было дело, 98%+1%+1% не во всех браусерах образовывало div без горизонтальной прокрутки, и это бесило.

Последний раз редактировалось qkowlew; 18.09.2016 в 14:59. Причина: Добавлено сообщение
qkowlew вне форума   Ответить с цитированием
Старый 18.09.2016, 19:57   #40
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,523
Вес репутации: 288
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
По умолчанию

Цитата:
Сообщение от qkowlew Посмотреть сообщение
Надо будет более обстоятельно перепроверить работу процентов в маргинах и паддингах. А то было дело, 98%+1%+1% не во всех браусерах образовывало div без горизонтальной прокрутки, и это бесило.
Дело обычно в рамке в 1px.
Если это не таблица, лучше прописать width: auto и margin-left: 1%; margin-right: 1%;
Тогда ни padding вутри, ни рамка - не повлияют никак.

Там еще есть варианты (с max-width, например) но все перечислять не буду.

Еще гляньте
http://htmlbook.ru/css/box-sizing
D.iK.iJ вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оптимизация сайта 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, время: 00:14.