Оптимизация сайта для планшетов и телефонов - 2

Не могу перевести px в % на горизонтальном меню, вот часть css:

.top-menu>ul>li {

float: left;

padding: 0 47px;

position: relative;

height: 44px;

}

При выводе процентов пункты меню уходят вниз.

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

Выкладывайте бОльший кусок CSS и HTML.

Шаблон

<div class="top-menu">

<jdoc:include type="modules" name="topmenu" />

</div>

CSS

.top-menu>ul{display:inline-block;margin-top:10px}

.top-menu>ul>li{float:left;padding:0 47px;position:relative;height:44px}

.top-menu>ul>li:first-child{margin-left:0}

.top-menu>ul>li>a{color:#71d2f9;font:15px Verdana;text-decoration:none;text-shadow:-1px -1px #474747, 1px 1px #565656;}

.top-menu>ul>li.active>a>span{font:14px Verdana;color:#fff;text-shadow:0 0 3px #fff}

.top-menu>ul>li:hover ul{display:block;behavior:url(csshover3.htc);}

.top-menu>ul>li ul{width:90%;background:url(../images/op.png) 0 0 repeat;box-shadow:3px 3px 5px #494949;-webkit-box-shadow:3px 3px 5px #494949;-moz-box-shadow:3px 3px 5px #494949;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-khtml-border-radius:3px;behavior:url(PIE.htc);padding:10% 10% 10% 10%;border:1px solid #101010;position:absolute;top:33px;left:-1%;display:none;z-index:1000;}

.top-menu>ul>li ul li{text-align:left;margin-top:20px;}

.top-menu>ul>li ul li:first-child{margin-top:0}

.top-menu>ul>li ul li a{font:14px Verdana;color:#fff;text-decoration:none;}

.top-menu>ul>li ul li a:hover{text-decoration:underline}

Лично мне этот кусок тоже ничего не говорит, так как тут нет меню, а только его вставка :)

Если не затруднит - скиньте ссылку на сайт в личку, я гляну что можно сделать.

Чтобы панели не отображались, гляньте их id или класс. Вот пример, если у панелей класс .sidebar и убрать их нужно при ширине экрана 775 пикселей.

Возник такой вопрос - хочу одну таблицу на морде вывести по высоте, то есть, один блок под другим, на остальных страницах оставить сжатие, как есть. На морде отдельный класс таблицы mceItemTable как указать, чтобы @media

only screen and (max-width: 320px),

(min-device-width: 320px) and (max-device-width: 650px).... то есть стиль вывода по высоте работал только для этого класса. Сейчас стиль такой

@media

only screen and (max-width: 320px),

(min-device-width: 320px) and (max-device-width: 650px) {

/* Force table to not be like tables anymore */

table, thead, tbody, th, td, tr {

display: block;

}

/* Hide table headers (but not display: none;, for accessibility) */

thead tr {

position: absolute;

top: -9999px;

left: -9999px;

}

tr { border: 1px solid #ccc; }

td {

/* Behave like a "row" */

border: none;

border-bottom: 1px solid #eee;

position: relative;

padding-left: 50%;

}

td:before {

/* Now like a table header */

position: absolute;

/* Top/left values mimic padding */

top: 6px;

left: 6px;

width: 45%;

padding-right: 10px;

white-space: nowrap;

}

/*

Label the data

*/

td:nth-of-type(1):before { content: ; }

td:nth-of-type(2):before { content: ; }

td:nth-of-type(3):before { content: ; }

td:nth-of-type(4):before { content: ; }

td:nth-of-type(5):before { content: ; }

td:nth-of-type(6):before { content: ; }

td:nth-of-type(7):before { content: ; }

td:nth-of-type(8):before { content: ; }

td:nth-of-type(9):before { content: ; }

td:nth-of-type(10):before { content: ; }

}

Что не делаю или для всех таблиц или ни для одной. Спасибо, если есть идея.

Ида, сама таблица на морде, для неё одно и затеялось всё http://stroyremontiruy.ru/

Это таблица, где Потолок, стены и прочее?

Думаю, так

Нужно добавить в стили к @media screen and (max-width: 1000px) {

А где там еще такие таблицы есть?

Есть, ну там класс другой. Решил пока так

table.mceItemTable,

table.mceItemTable thead,

table.mceItemTable tbody,

table.mceItemTable th,

table.mceItemTable td,

table.mceItemTable tr {

display: block;

Не могу только td выровнять почему-то в десктопе не все колонки одинаковы - ума пока не приложу, а на мобильных всё ок уже.

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

Пример.

Подойдут к прозрачным Крутилкам и Крутилкам с белым фоном, когда товары идут друг под другом.

Хотя, они немного избыточны, так как у меня внешние ссылки дополнительно помечаются картинкой. И еще подключены стили из этой темы. :) Потому пришлось местами "обнулить".

DiKiJ, как тестируете алгоритм адаптации сайта и мобильную версию? Какой софт используете и какие основные разрешения задаете для тестовой проверки?

Ой, для этого можно и сервис гугла использовать https://www.google.com/webmasters/tools/mobile-friendly/?hl=ru и много сторонних сервисов