Новости Joomla

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

kvestel

  • Осваиваюсь на форуме
  • 22
  • 0 / 0
Здравствуйте! Подскажите как сделать так что бы фото в таблице уменьшались адаптивного шаблона? Подробнее: Есть сайт с адаптивным шаблоном, я в материал вставляю таблицу и в нее размещаю фотки, сохраняю, смотрю на сайте все ровно, но когда я уменьшаю браузер, фото начинают съезжать в право не уменьшаясь, а если вставляю фото без таблицы то все уменьшается и все хорошо.Таблица нужна что бы в одну строчку можно было разместить несколько фото.Как сделать что бы фото уменьшались в таблице вместе с сайтом?

Нагляднее будет test.nikolasmironov.ru (не примите за какую нибудь рекламу, просто помощь нужна) В Chrome и Яндекс браузере все норм, а вот в эксплорере и мазиле все едет при уменьшении браузера.
« Последнее редактирование: 14.01.2015, 09:47:05 от kvestel »
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
*

darkghost

  • Живу я здесь
  • 2212
  • 97 / 0
если эта таблица прописана вручную - так проще ее выбросить и организовать это же через <div>
и в них установить эти фото как бэкграунд - тогда при уменьшении размера? <div>-ы складываются друг под другом и идет масштабирование фото -- подробнее --->>
Спойлер
[свернуть]
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
darkghost У него же не просто фото, это превьюшки модального окна, поэтому
Цитировать
установить эти фото как бэкграунд
не совсем катит.
Сам не люблю табличную верстку, тем более что CSS bootstrap-овской сетки уже есть,
но т.к. это материал, вводить туда дивы, отключать редактор может оказаться непосильным трудом :(
*

kvestel

  • Осваиваюсь на форуме
  • 22
  • 0 / 0
http://bit.ly/1yaFEbe
По сути, да, фото теперь уменьшаются и встают ровно, но все остальные которые я уменьшил в статьях, что бы можно было при нажатии увеличить, теперь в полный размер на всех страницах, это не хорошо.
*

kvestel

  • Осваиваюсь на форуме
  • 22
  • 0 / 0
если эта таблица прописана вручную - так проще ее выбросить и организовать это же через <div>
и в них установить эти фото как бэкграунд - тогда при уменьшении размера? <div>-ы складываются друг под другом и идет масштабирование фото -- подробнее --->>
Спойлер
[свернуть]


Таблица сделана с помощью редактора JCE, вот так она выглядит:
Код

<div style="text-align: center;">
<table cellpadding="5" align="center">
<tbody>
<tr>
<td><img class="f" src="images/ysadb/4.jpg" alt="" width="250" height="188" />
</td>
<td><img class="f" src="images/ysadb/5.jpg" alt="" width="250" height="188" />
</td>
<td><img class="f" src="images/ysadb/6.jpg" alt="" width="250" height="188" />
</td>
</tr>
<tr>
<td><img class="f" src="images/ysadb/7.jpg" alt="" width="250" height="188" />
</td>
<td><img class="f" src="images/ysadb/8.jpg" alt="" width="250" height="188" />
</td>
<td><img class="f" src="images/ysadb/9.jpg" alt="" width="250" height="188" />
</td>
</tr>
</tbody>
</table>    </div>


Как бекграунд не получится, они при нажатии увеличиваться должны
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
По сути, да, фото теперь уменьшаются и встают ровно, но все остальные которые я уменьшил в статьях, что бы можно было при нажатии увеличить, теперь в полный размер на всех страницах, это не хорошо.
Ничего не понял -что, где не хорошо, подробнее, лучше с скринами.
Если Вы хотите чтобы работал правильно адаптивный шаблон, о размерах в пикселях нужно забыть, или ставить их через медиа-запросы.
В идеале перейти на блочную верстку, если навыки позволяют.
Картинки лучше иметь в двух размерах - для миниатюр и для модального окна, уменьшится нагрузка на сервер

*

kvestel

  • Осваиваюсь на форуме
  • 22
  • 0 / 0
Ничего не понял -что, где не хорошо, подробнее, лучше с скринами.
Если Вы хотите чтобы работал правильно адаптивный шаблон, о размерах в пикселях нужно забыть, или ставить их через медиа-запросы.
В идеале перейти на блочную верстку, если навыки позволяют.
Картинки лучше иметь в двух размерах - для миниатюр и для модального окна, уменьшится нагрузка на сервер



Фото которые были уменьшены и разбросаны по статье(справа, слева) теперь приняли свой настоящий размер.
Скрин https://yadi.sk/i/_evuB_bQdxiTT
На счет миниатюр, так компонент сам создает миниатюры при их уменьшении.
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
1. Расскажите как и где вы исправили, выложите под спойлер фрагмент кода.
2. Укажите адрес (наименование/путь) страницы где проблемы - со скрина не понял.
Проблема решаема- чтобы не срабатывало свойство, нужно указать где применяется это свойство, У какого родителя, тогда у остальных оно применяться не будет.
Здесь важно найти уникального родителя.
*

kvestel

  • Осваиваюсь на форуме
  • 22
  • 0 / 0
1. Расскажите как и где вы исправили, выложите под спойлер фрагмент кода.
2. Укажите адрес (наименование/путь) страницы где проблемы - со скрина не понял.
Проблема решаема- чтобы не срабатывало свойство, нужно указать где применяется это свойство, У какого родителя, тогда у остальных оно применяться не будет.
Здесь важно найти уникального родителя.

Я менял и смотрел на денвере.Вот сейчас фото расположены маленькие https://yadi.sk/i/MHza9d4odxnhB  но после того как я внес изменения которые вы показали на скриншете height: 100% !important; и width: 100% !important; все эти фото приняли свой размер(большой) как на скриншете который показывал ( https://yadi.sk/i/_evuB_bQdxiTT ) Исправлял по пути www\media\jui\css\bootstrap.min.css   тут сам файл CSS https://yadi.sk/d/JB0yxepEdxnRD

И это со всеми фотками на сайте которые я уменьшал для того что бы при нажатии на них фото увеличивалось.
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Я извиняюсь, но если хотите чтобы Вам помогли, то отвечайте правильно на поставленные вопросы.
Цитировать
Расскажите как и где вы исправили, выложите под спойлер фрагмент кода
bootstrap.min.css я найду и у себя, как вы представляете как там искать Ваши правки, тем более в одной строке.
Цитировать
. Укажите адрес (наименование/путь) страницы где проблемы - со скрина не понял.
А страница нужна, чтобы увидеть как там выводятся изображения.
*

kvestel

  • Осваиваюсь на форуме
  • 22
  • 0 / 0
Я извиняюсь, но если хотите чтобы Вам помогли, то отвечайте правильно на поставленные вопросы.bootstrap.min.css я найду и у себя, как вы представляете как там искать Ваши правки, тем более в одной строке.А страница нужна, чтобы увидеть как там выводятся изображения.

Код
.thumbnail>img{display:block;max-width:100%;height: 100% !important;margin-right:auto;width: 100% !important;margin-left:auto}
Это имеете ввиду?

А страница http://test.nikolasmironov.ru/index.php/proekt-v-nikulskom
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Цитировать
А страница http://test.nikolasmironov.ru/index.php/proekt-v-nikulskom
я не вижу разницы
Цитировать
test.nikolasmironov.ru
и там и там изображения в таблице в виде галереи, а где страница на которой
Цитировать
Фото которые были уменьшены и разбросаны по статье(справа, слева) теперь приняли свой настоящий размер.
приведенная на сриншоте?
Теперь по пороядку:
1. Не меняйте стили в исходных CSS, правильно дописать в конец то что Вы правите
Код
.thumbnail>img { 
height: 100% !important;
width: 100% !important;
}
!important позволяет повысить приоритет стиля. (http://htmlbook.ru/css/!important)
Поэтому верните стиль .thumbnail>img в исходное состояние.
2. Допишите в конец таблицы
Код
 td .thumbnail>img { 
height: 100% !important;
width: 100% !important;
}
Это позволит применить стили только к  изображениям  расположеным в таблице,  должно помочь
*

kvestel

  • Осваиваюсь на форуме
  • 22
  • 0 / 0
В мазиле все получилось, спасибо большое.А в эксплорере все по старому.
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
А где Вы видели IE на мобильных устройствах  ;)
*

kvestel

  • Осваиваюсь на форуме
  • 22
  • 0 / 0
А где Вы видели IE на мобильных устройствах  ;)

Ну да в принципе))), спасибо большое за все.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Картинка в шаблоне

Автор Alkor94

Ответов: 13
Просмотров: 2563
Последний ответ 23.05.2018, 03:04:28
от Alkor94
Добавить позицию модуля в шаблоне traction

Автор amaddeus

Ответов: 1
Просмотров: 1686
Последний ответ 27.04.2017, 22:23:31
от darkghost
Не работает mega menu в шаблоне sj_jare

Автор premisse

Ответов: 5
Просмотров: 3734
Последний ответ 28.02.2017, 21:35:24
от ddenov
Save failed в шаблоне YOO Nano3

Автор svarg

Ответов: 8
Просмотров: 3610
Последний ответ 06.01.2017, 18:34:00
от mogylshik
Решено: Социальные иконки в шаблоне Yoo Radiance

Автор Virocracy

Ответов: 7
Просмотров: 4938
Последний ответ 26.07.2016, 18:03:04
от OFFlineby