Форум русской поддержки Joomla!® CMS
05.12.2016, 16:37:43 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Как вывести стили @media только для морды?

 (Прочитано 299 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Zegeberg
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 104



« : 11.08.2016, 03:46:26 »

Доброго дня, в силу специфики на адаптивном шаблоне все таблицы на внутренних таблицах показываются корректно за счёт уменьшения, а вот на морде слишком сжата table, поэтому сделал перенос столбиков по высоте. В результате на морде ок, на внутренних криво для мобильных. Можно ли как прописать @media только для таблицы на морде, чтобы не переделывать все таблицы на внутряке? Пример - вот http://stroyremontiruy.ru/, вот http://stroyremontiruy.ru/smesi-i-materialy/stroitelnye-smesi-i-materialy/326-tablitsy-sostava-i-proportsiy-betona-.html перенос поставл от 650 px. Спасибо.
Записан
Ilhom666
Живу я здесь
******

Репутация: +155/-0
Offline Offline

Сообщений: 1336



« Ответ #1 : 11.08.2016, 09:16:46 »

Можно ли как прописать @media только для таблицы на морде
задайте ей отдельный класс <table class="morda"> и прописывайте стили для него @media(***) {table.morda {***}}
Записан
Zegeberg
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 104



« Ответ #2 : 11.08.2016, 11:44:40 »

Указал HTML
Код:
<center>
<table class="mceItemTable">
<tbody><tr>
<td>
<div class="new_cont">
<center>
<h4><a href="remont.html">Потолок</a></h4>
</center>

И прописал в начале блока CSS
Код:
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@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.mceItemTable, thead, tbody, th, td, tr {
display: block;
}

Включается для всех таблиц, а не только для класса mceItemTable. Что не так?
И по ходу вопрос, как правильно прописать именно в этом классе таблицы расположение картинки по центру? Спасибо.
Записан
Ilhom666
Живу я здесь
******

Репутация: +155/-0
Offline Offline

Сообщений: 1336



« Ответ #3 : 11.08.2016, 12:19:01 »

если указываете
Код
table.mceItemTable, thead, tbody, th, td, tr
то правило и будет срабатывать для всего, что перечислено у вас через запятую
для картинок попробуйте
Код
img.table.mceItemTable {
margin: 0 auto;
}
Записан
Zegeberg
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 104



« Ответ #4 : 11.08.2016, 12:30:22 »

В HTML прописан класс на морде <table class="mceItemTable">, но если указываю в стилях
Код:
@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.mceItemTable, {
display: block;
}
То вообще ноль реакции.
Записан
Ilhom666
Живу я здесь
******

Репутация: +155/-0
Offline Offline

Сообщений: 1336



« Ответ #5 : 11.08.2016, 13:14:17 »

Код
table.mceItemTable, { 
display: block;
}
 
- запятую уберите
Записан
Zegeberg
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 104



« Ответ #6 : 11.08.2016, 13:45:50 »

Нет, не работает - надо именно для table class="mceItemTable"  чтобы @media работало с table, thead, tbody, th, td, tr   иначе не уходят колонки одна под другую.
Вот полный код HTML
Код:
<center>
<table class="mceItemTable">
<tbody><tr>
<td>
<div class="new_cont">
<center>
<h4><a href="remont.html">Потолок</a></h4>
</center>
<div class="new_img">
<img src="/images/stories/menu/remont_potolka.jpg">
</div>
<div style="clear: both;height: 10px;"></div>

<ul>
<li><a href="/remont/tehnologii-dlja-potolka/272-kosmeticheski-remont-potolka.html">Косметический ремонт потолка</a></li>
<li><a href="/remont/tehnologii-dlja-potolka/222-perekrasit-potolok.html">Как перекрасить потолок</a></li>
<li><a href="/remont/tehnologii-dlja-potolka/206-treshcina-na-potolke.html">Как заделать трещину на потолке</a></li>
<li><a href="/remont/tehnologii-dlja-potolka/78-smytj-pobelky.html">Как смыть старую побелку</a></li>
<li><a href="/remont/tehnologii-dlja-potolka/133-vybrat-krasku.html">Как выбрать краску для окрашивания потолка</a></li>
</ul>
</div>
</td>
<td>
&nbsp;&nbsp;&nbsp;
</td>
<td>
<div class="new_cont">
<center>
<h4><a href="/remont-sten.html">Стены</a></h4>
</center>
<div class="new_img">
<img src="/images/stories/menu/remont_sten.jpg">
</div>
<div style="clear: both;height: 10px;"></div>

<ul>
<li><a href="/remont-sten/tehnologii-dlja-sten/274-trafaretnaya-pokraska-sten-.html">Трафаретная покраска стен</a></li>
<li><a href="/remont-sten/tehnologii-dlja-sten/273-remont-shtukaturki-sten.html">Ремонт штукатурки углов и стен</a></li>
<li><a href="/remont-sten/tehnologii-dlja-sten/258-probit-schtroby.html">Как пробить ровные штробы</a></li>
<li><a href="/remont-sten/tehnologii-dlja-sten/236-kak-shpaklevat-steny.html">Как шпаклевать стены под покраску</a></li>
<li><a href="/remont-sten/tehnologii-dlja-sten/167-perekraska-sten.html">Как перекрасить стены</a></li>
</ul>
</div>
</td>
<td>
&nbsp;&nbsp;&nbsp;
</td>
<td>
<div class="new_cont">
<center>
<h4><a href="/smesi-i-materialy.html">Материалы</a></h4>
</center>
<div class="new_img">
<img src="/images/stories/menu/stroymaterialy.jpg">
</div>
<div style="clear: both;height: 10px;"></div>

<ul>
<li><a href="/smesi-i-materialy/stroitelnye-smesi-i-materialy/252-otlichiya-linoleuma.html">Бытовой и коммерческий линолеум: отличия и цены</a></li>
<li><a href="/smesi-i-materialy/stroitelnye-smesi-i-materialy/251-stekloholst.html">Стеклохолст (паутинка)</a></li>
<li><a href="/smesi-i-materialy/stroitelnye-smesi-i-materialy/264-bystrosohnyshchaya-stygka-pola.html">Быстросохнущая стяжка пола</a></li>
<li><a href="/smesi-i-materialy/stroitelnye-smesi-i-materialy/201-podlogka-pod-laminat.html">Как выбрать подложку</a></li>
</ul></div></td>
</tr>
</tbody></table>
</center>
<div style="clear: both;height: 10px;"></div>
<center>
<table class="mceItemTable">
<tbody><tr>
<td>
<div class="new_cont">
<center>
<h4><a href="/disain-interjera.html">Дизайн</a></h4>
</center>
<div class="new_img">
<img src="/images/stories/menu/dizayn_inter'yera.jpg">
</div>
<div style="clear: both;height: 10px;"></div>

<ul>
<li><a href="/disain-interjera/svegie-interiernye-reshenija/260-ustanovka-doborov.html">Установка доборов на монтажную пену</a></li>
<li><a href="/disain-interjera/samodelki/257-megkomnatnuy-portal.html">Межкомнатный портал своими руками</a></li>
<li><a href="/disain-interjera/svegie-interiernye-reshenija/240-vidy-karnizov.html">Виды карнизов для штор</a></li>
<li><a href="/disain-interjera/svegie-interiernye-reshenija/161-dekorativny-ugolok.html">Крепим декоративный уголок</a></li>
<li><a href="/disain-interjera/svegie-interiernye-reshenija/63-tehnologija-ustanovki-podokonnika.html">Установка подоконника</a></li>
</ul>
</div>
</td>
<td>
&nbsp;&nbsp;&nbsp;
</td>
<td>
<div class="new_cont">
<center>
<h4><a href="/kuhni-i-vannye-komnaty.html">Кухни</a></h4>
</center>
<div class="new_img">
<img src="/images/stories/menu/kukhni_vannye.jpg">
</div>
<div style="clear: both;height: 10px;"></div>

<ul>
<li><a href="/kuhni-i-vannye-komnaty/otdelka-vannyh-komnat/256-kondensat-na-trubah.html">Как избавиться от конденсата</a></li>

<li><a href="/kuhni-i-vannye-komnaty/remont-i-otdelka-kuhni/244-ustanovka-otkosov.html">Установка откосов</a></li>
<li><a href="/kuhni-i-vannye-komnaty/otdelka-vannyh-komnat/265-perefugovat-plitku.html">Как перефуговать плитку в ванной</a></li>
<li><a href="/kuhni-i-vannye-komnaty/otdelka-vannyh-komnat/110-gribok-v-vannoy.html">Как избавиться от грибка</a></li>
</ul>
</div>
</td>
<td>
&nbsp;&nbsp;&nbsp;
</td>
<td>
<div class="new_cont">
<center>
<h4><a href="/tematicheskie-statji.html">Статьи</a></h4>
</center>
<div class="new_img">
<img src="/images/stories/menu/stat'i_o_remonte.jpg">
</div>
<div style="clear: both;height: 10px;"></div>

<ul>
<li><a href="/tematicheskie-statji/populjarnye-statji/270-demontag-radiatora.html">Демонтаж и монтаж радиатора</a></li>
<li><a href="/tematicheskie-statji/populjarnye-statji/263-vyravnivanie-pola.html">Выравнивание пола по маякам</a></li>
<li><a href="/tematicheskie-statji/statji-po-remontu/253-vidy-schtukaturki.html">Штукатурка для внутренних работ</a></li>
<li><a href="/tematicheskie-statji/statji-po-remontu/159-podgotovka-gipsokartona.html">Подготовка гипсокартона под покраску</a></li>
</ul>
</div>
</td>
</tr>
</tbody></table>
</center>
Вот полный код CSS
Код:
@media
only screen and (max-width: 320px),
(min-device-width: 320px) and (max-device-width: 450px) {

/* 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: ; }
}
Записан
yandex_hb
Давно я тут
****

Репутация: +21/-1
Offline Offline

Пол: Мужской
Сообщений: 348



« Ответ #7 : 11.08.2016, 14:00:28 »

Цитировать
Включается для всех таблиц, а не только для класса mceItemTable. Что не так?
Код:
table.mceItemTable,
table.mceItemTable thead,
table.mceItemTable tbody,
table.mceItemTable th,
table.mceItemTable td,
table.mceItemTable tr {
display: block;
}
table.mceItemTable img {margin:0 auto}
Записан
Zegeberg
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 104



« Ответ #8 : 11.08.2016, 14:12:25 »

Спасибо, это то что нужно, что-то сам не допёр. По ходу не подскажите, как в десктопной версии указать одинаковой ширину td, а то от заголовка всё пляшет - больше знаков в нём шире столбец?
Записан
yandex_hb
Давно я тут
****

Репутация: +21/-1
Offline Offline

Пол: Мужской
Сообщений: 348



« Ответ #9 : 11.08.2016, 14:34:53 »

td {width:25%} или можно через table-layout
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet