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

Zegeberg
На сайте с 30.09.2010
Offline
254
#41

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

.top-menu>ul>li {

float: left;

padding: 0 47px;

position: relative;

height: 44px;

}

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

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

Ссылки с форумов, блогов и соц сетей (http://forumok.com/p/c1710b6b/) Живой текст для сайта/магазина//Стихи с поздравлением Аудит, возвращение трафика на сайты - личка, скайп Zegeberg.
богоносец
На сайте с 30.01.2007
Offline
699
#42

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

Zegeberg
На сайте с 30.09.2010
Offline
254
#43

Шаблон

<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}

D.iK.iJ
На сайте с 26.05.2013
Offline
184
#44

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

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

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

@media screen and (max-width: 775px) {
.sidebar {display: none !important;}
}
Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
Zegeberg
На сайте с 30.09.2010
Offline
254
#45

Возник такой вопрос - хочу одну таблицу на морде вывести по высоте, то есть, один блок под другим, на остальных страницах оставить сжатие, как есть. На морде отдельный класс таблицы 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/

D.iK.iJ
На сайте с 26.05.2013
Offline
184
#46
Zegeberg:
Возник такой вопрос - хочу одну таблицу на морде вывести по высоте, то есть, один блок под другим, на остальных страницах оставить сжатие, как есть.

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

Думаю, так

.mceItemTable td {
display: block !important;
}

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

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

Zegeberg
На сайте с 30.09.2010
Offline
254
#47

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

table.mceItemTable,

table.mceItemTable thead,

table.mceItemTable tbody,

table.mceItemTable th,

table.mceItemTable td,

table.mceItemTable tr {

display: block;

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

D.iK.iJ
На сайте с 26.05.2013
Offline
184
#48

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

/* Адаптируем Озон */
.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;}
}

Пример.

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

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

ExpressAutoComUa
На сайте с 05.10.2008
Offline
87
#49

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

У каждого сайта своя статистика.
P1otr
На сайте с 13.04.2012
Offline
136
#50

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

>>>>>>LinkBoss.net - Трастовые ссылки для увеличения трафика в 10 раз! (http://linkboss.net/)<<<<<<

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий