0 Пользователей и 1 Гость просматривают эту тему.
  • 9 Ответов
  • 573 Просмотров
*

Zegeberg

  • Осваиваюсь на форуме
  • 123
  • 0
Доброго дня, в силу специфики на адаптивном шаблоне все таблицы на внутренних таблицах показываются корректно за счёт уменьшения, а вот на морде слишком сжата 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

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

Zegeberg

  • Осваиваюсь на форуме
  • 123
  • 0
Указал 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

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

Zegeberg

  • Осваиваюсь на форуме
  • 123
  • 0
В 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

  • Живу я здесь
  • 1304
  • 166
Код: css
table.mceItemTable, { 
display: block;
}
- запятую уберите
*

Zegeberg

  • Осваиваюсь на форуме
  • 123
  • 0
Нет, не работает - надо именно для 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

  • Давно я тут
  • 358
  • 21
Цитировать
Включается для всех таблиц, а не только для класса 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

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

yandex_hb

  • Давно я тут
  • 358
  • 21
td {width:25%} или можно через table-layout
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

@media screen - не всегда работает

Автор darkghost

Ответов: 6
Просмотров: 237
Последний ответ 01.06.2017, 12:08:11
от dmitry_stas
VT media шаблон в слайдере в IE прогрессбар съезжает вниз

Автор wishlight

Ответов: 0
Просмотров: 352
Последний ответ 26.04.2017, 19:26:53
от wishlight
Как правильно прописать @media?

Автор stendapuss

Ответов: 16
Просмотров: 927
Последний ответ 19.04.2017, 07:48:29
от stendapuss
Как вывести заголовок модуля - меню в две строки?

Автор Flame

Ответов: 3
Просмотров: 1325
Последний ответ 03.11.2016, 23:32:55
от pashaiglesias
[Решено] CSS стиль только на одной странице

Автор slepoy

Ответов: 6
Просмотров: 2839
Последний ответ 29.10.2016, 13:00:41
от 57tr