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

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

Обтекание картинки текстом и выравнивание блока картинок

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

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

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


« : 27.07.2015, 09:00:53 »

Приветствую уважаемые! Прошу помощи более опытных сотоварищей, не хватает своих знаний. 2 проблемы которые никак не решу.
1. Ссылка "Вернуться назад" никак не хочет размещаться ниже всех картинок и размещается слева.
2. Как выровнять по центру блок картинок.
Адрес проблемы http://забтех.рф/glavnaya/535-v-tekhnikume-proshel-den-otkrytykh-dverej-na-kotorom-prisutstvovalo-bolee-200-shkolnikov?template=accessibility
пс: пусть вас не смущает "странность" сайта, по действующему российскому законодательству каждое учебное заведение обязано иметь версию сайта для слабовидящих. Вот это она и есть.
пс2: надеюсь не ошибся разделом.
Записан
AlekVolsk
Профи
********

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

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



« Ответ #1 : 27.07.2015, 09:32:38 »

Для начала все ссылки с картинками объедините в один блок (сейчас их три, причем в первых двух всего по одной ссылке). В стилях пропишите:
Код
.clearfix {display:block;float:none;clear:both;}
и в конец блока добавьте <span class="clearfix"></span> - это заставит ссылку "вернуться назад" сместиться вниз.

Для всего блока картинок задайте выравнивание по центру, далее поправьте стили вывода ссылок:
Код
.highslide {
   outline: medium none;
   text-decoration: none;
   display: inline-block;
   float: none !important;
}
Записан
IzrA
Давно я тут
****

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

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



« Ответ #2 : 27.07.2015, 09:37:26 »

1.
Код:
#back_link {
  float: left;
  width: 100%;
}
2. Все картинки полижите в один параграф. Параграфу text-align:center; У картинок уберите float: left;
Вот содержимое div class="item-page" после исправлений.
Код:
<div class="item-page">

<h2>
  <a href="/glavnaya/535-v-tekhnikume-proshel-den-otkrytykh-dverej-na-kotorom-prisutstvovalo-bolee-200-shkolnikov">
В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. </a>
</h2>

<p style="text-align: justify;">Коллектив и студенты охотно приглашали учащихся школ на обучение &nbsp;в техникум по различным специальностям.&nbsp;</p>
<p style="text-align: center;">
  <a href="/images/vosprab/april2015/1/image035.jpg" class="modal"></a>
  <a style="margin: 0px 10px 0px 0px; padding: 5px;" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " onclick="return hs.expand(this, hs_image)" class="highslide" href="/images/vosprab/april2015/1/image035.jpg" id="thumb5351"><img class="hs_border" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " alt="image035" src="/plugins/content/hsimage/highslide/image.php?image=/images/vosprab/april2015/1/image035.jpg&amp;width=250&amp;height=1&amp;cropratio=&amp;quality=80&amp;color=fff&amp;reduce=1"></a>
  <span title="Close" onclick="return hs.close(this)" class="highslide-overlay closebutton" id="closebutton"></span>
  <a href="/images/vosprab/april2015/1/image036.jpg" class="modal"></a>
  <a style="margin: 0px 10px 0px 0px; padding: 5px;" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " onclick="return hs.expand(this, hs_image)" class="highslide" href="/images/vosprab/april2015/1/image036.jpg" id="thumb5352"><img class="hs_border" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " alt="image036" src="/plugins/content/hsimage/highslide/image.php?image=/images/vosprab/april2015/1/image036.jpg&amp;width=250&amp;height=1&amp;cropratio=&amp;quality=80&amp;color=fff&amp;reduce=1"></a>
  <span title="Close" onclick="return hs.close(this)" class="highslide-overlay closebutton" id="closebutton"></span>
  <a href="/images/vosprab/april2015/1/image037.jpg" class="modal"></a><a style="margin: 0px 10px 0px 0px; padding: 5px;" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " onclick="return hs.expand(this, hs_image)" class="highslide" href="/images/vosprab/april2015/1/image037.jpg" id="thumb5353"><img class="hs_border" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " alt="image037" src="/plugins/content/hsimage/highslide/image.php?image=/images/vosprab/april2015/1/image037.jpg&amp;width=250&amp;height=1&amp;cropratio=&amp;quality=80&amp;color=fff&amp;reduce=1"></a><span title="Close" onclick="return hs.close(this)" class="highslide-overlay closebutton" id="closebutton"></span><a href="/images/vosprab/april2015/1/image039.jpg" class="modal"></a><a style="margin: 0px 10px 0px 0px; padding: 5px;" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " onclick="return hs.expand(this, hs_image)" class="highslide" href="/images/vosprab/april2015/1/image039.jpg" id="thumb5354"><img class="hs_border" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " alt="image039" src="/plugins/content/hsimage/highslide/image.php?image=/images/vosprab/april2015/1/image039.jpg&amp;width=250&amp;height=1&amp;cropratio=&amp;quality=80&amp;color=fff&amp;reduce=1"></a><span title="Close" onclick="return hs.close(this)" class="highslide-overlay closebutton" id="closebutton"></span><a href="/images/vosprab/april2015/1/image040.jpg" class="modal"></a><a style="margin: 0px 10px 0px 0px; padding: 5px;" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " onclick="return hs.expand(this, hs_image)" class="highslide" href="/images/vosprab/april2015/1/image040.jpg" id="thumb5355"><img class="hs_border" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " alt="image040" src="/plugins/content/hsimage/highslide/image.php?image=/images/vosprab/april2015/1/image040.jpg&amp;width=250&amp;height=1&amp;cropratio=&amp;quality=80&amp;color=fff&amp;reduce=1"></a><span title="Close" onclick="return hs.close(this)" class="highslide-overlay closebutton" id="closebutton"></span><a href="/images/vosprab/april2015/1/image042.jpg" class="modal"></a><a style="margin: 0px 10px 0px 0px; padding: 5px;" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " onclick="return hs.expand(this, hs_image)" class="highslide" href="/images/vosprab/april2015/1/image042.jpg" id="thumb5356"><img class="hs_border" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " alt="image042" src="/plugins/content/hsimage/highslide/image.php?image=/images/vosprab/april2015/1/image042.jpg&amp;width=250&amp;height=1&amp;cropratio=&amp;quality=80&amp;color=fff&amp;reduce=1"></a><span title="Close" onclick="return hs.close(this)" class="highslide-overlay closebutton" id="closebutton"></span><a href="/images/vosprab/april2015/1/image045.jpg" class="modal"></a><a style="margin: 0px 10px 0px 0px; padding: 5px;" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " onclick="return hs.expand(this, hs_image)" class="highslide" href="/images/vosprab/april2015/1/image045.jpg" id="thumb5357"><img class="hs_border" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " alt="image045" src="/plugins/content/hsimage/highslide/image.php?image=/images/vosprab/april2015/1/image045.jpg&amp;width=250&amp;height=1&amp;cropratio=&amp;quality=80&amp;color=fff&amp;reduce=1"></a><span title="Close" onclick="return hs.close(this)" class="highslide-overlay closebutton" id="closebutton"></span><a href="/images/vosprab/april2015/1/image046.jpg" class="modal"></a><a style="margin: 0px 10px 0px 0px; padding: 5px;" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " onclick="return hs.expand(this, hs_image)" class="highslide" href="/images/vosprab/april2015/1/image046.jpg" id="thumb5358"><img class="hs_border" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " alt="image046" src="/plugins/content/hsimage/highslide/image.php?image=/images/vosprab/april2015/1/image046.jpg&amp;width=250&amp;height=1&amp;cropratio=&amp;quality=80&amp;color=fff&amp;reduce=1"></a><span title="Close" onclick="return hs.close(this)" class="highslide-overlay closebutton" id="closebutton"></span><a href="/images/vosprab/april2015/1/image048.jpg" class="modal"></a><a style="margin: 0px 10px 0px 0px; padding: 5px;" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " onclick="return hs.expand(this, hs_image)" class="highslide" href="/images/vosprab/april2015/1/image048.jpg" id="thumb5359"><img class="hs_border" title="В техникуме прошел «День открытых дверей», на котором присутствовало более 200 школьников. " alt="image048" src="/plugins/content/hsimage/highslide/image.php?image=/images/vosprab/april2015/1/image048.jpg&amp;width=250&amp;height=1&amp;cropratio=&amp;quality=80&amp;color=fff&amp;reduce=1"></a><span title="Close" onclick="return hs.close(this)" class="highslide-overlay closebutton" id="closebutton"></span></p>

</div>

UPD:
Уже ответили пока писал. Azn
Записан
AlekVolsk
Профи
********

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

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



« Ответ #3 : 27.07.2015, 09:39:46 »

Судя по всему, картинки выводятся плагином галереи.
Записан
zigzagrus
Осваиваюсь на форуме
***

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

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


« Ответ #4 : 27.07.2015, 18:35:39 »

Судя по всему, картинки выводятся плагином галереи.
да, вы правы, выводятся модулем highslide(hsimage). Поэтому в коде 3 абзатца, которые не получается собрать в один. Максимум что у меня получилось так это обрамить их одним DIVом, но выровнять по центру не удалось.
Записан
zigzagrus
Осваиваюсь на форуме
***

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

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


« Ответ #5 : 01.08.2015, 15:08:02 »

Очередная победа плагина надо мной 0:3. Толком не пойму работу плагина чтобы поправить код так как советовали. Или превьюшки центрируются, но сами вертикально выстраиваются, либо получилось все отцентровать, но первые 2 картинки из первых двух параграфов стоят особняком.
А нельзя как-то прописать CSS стили для этого кода, который сейчас формируется плагином чтобы все стало по центру?
Записан
Страниц: [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