1 Тема від Paveldz

  • Paveldz
  • Paveldz
  • Користувач
  • Поза форумом
  • Дата реєстрації: 15.05.2015
  • Повідомлень: 78
    • Репутація: 10

Тема: Винести зображення сторінки joomla за межі контейнера

Всім доброго вечора.

Можете підсказати. Мені потрібно винести зображення за межі контейнера в джумлі. Потрібно для того щоб зображення відображалось на всю ширину екрану.

Або як зробити щоб один div вилазив за межі іншого?

Paveldz вебсайт

2 Відповідь від Djalin

  • Djalin
  • Djalin
  • Користувач
  • Поза форумом
  • Звідки: Ukraine
  • Дата реєстрації: 02.11.2014
  • Повідомлень: 1 561
    • Репутація: 441

Re: Винести зображення сторінки joomla за межі контейнера

воно?

Djalin вебсайт

3 Відповідь від Paveldz

  • Paveldz
  • Paveldz
  • Користувач
  • Поза форумом
  • Дата реєстрації: 15.05.2015
  • Повідомлень: 78
    • Репутація: 10

Re: Винести зображення сторінки joomla за межі контейнера

Djalin написав:

воно?

Справа в тому, що я якраз так і почав робити. Маю на увазі чере position absolute. Але зображення ніяк не хоче вилазити за межі контейнера в якому контент.

Paveldz вебсайт

4 Відповідь від Djalin

  • Djalin
  • Djalin
  • Користувач
  • Поза форумом
  • Звідки: Ukraine
  • Дата реєстрації: 02.11.2014
  • Повідомлень: 1 561
    • Репутація: 441

Re: Винести зображення сторінки joomla за межі контейнера

Телепати у відпустці - код в студію

Djalin вебсайт

5 Відповідь від Paveldz Востаннє редагувалося Paveldz (12.08.2015 08:51:28)

  • Paveldz
  • Paveldz
  • Користувач
  • Поза форумом
  • Дата реєстрації: 15.05.2015
  • Повідомлень: 78
    • Репутація: 10

Re: Винести зображення сторінки joomla за межі контейнера

Якщо взяти на прикладі цієї сторінки http://pepi.com.ua/stsenarii-sviat/199- … tkamy.html Мені потрібно щоб головне зображення сторінки pepi.com.ua_042.jpg було за межами <main id="content" role="main" class="span9"></main>. Я знаю, що частина коду яка відповідає за це зображення знаходиться в файлі /templates/шаблон/html/com_k2/default/item.php

<?php if($this->item->params->get('itemImage') && !empty($this->item->image)): ?>
    <!-- Item Image -->
    <div><span> <a  rel="{handler: 'image'}" href="<?php echo $this->item->imageXLarge; ?>" title="<?php echo JText::_('K2_CLICK_TO_PREVIEW_IMAGE'); ?>"> <img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:100%; " /> </a> </span>
      <?php if($this->item->params->get('itemImageMainCaption') && !empty($this->item->image_caption)): ?>
      <!-- Image caption --> 
      <span class="itemImageCaption"><?php echo $this->item->image_caption; ?></span>
      <?php endif; ?>
      <?php if($this->item->params->get('itemImageMainCredits') && !empty($this->item->image_credits)): ?>
      <!-- Image credits --> 
      <span class="itemImageCredits"><?php echo $this->item->image_credits; ?></span>
      <?php endif; ?>
      <div class="clr"></div>
    </div>
    <?php endif; ?>

В який файл його потрібно вставити щоб фотографія виходила за межі div content?

Paveldz вебсайт

6 Відповідь від Djalin

  • Djalin
  • Djalin
  • Користувач
  • Поза форумом
  • Звідки: Ukraine
  • Дата реєстрації: 02.11.2014
  • Повідомлень: 1 561
    • Репутація: 441

Re: Винести зображення сторінки joomla за межі контейнера

Пане ви ж розумієте що у різних шаблонів файли можуть називатись по різному?

Djalin вебсайт

7 Відповідь від Paveldz

  • Paveldz
  • Paveldz
  • Користувач
  • Поза форумом
  • Дата реєстрації: 15.05.2015
  • Повідомлень: 78
    • Репутація: 10

Re: Винести зображення сторінки joomla за межі контейнера

А ви могли б сказати як це зробити на стандартному шаблоні (protostar)? Я б тоді мав уявлення як це робиться.

Paveldz вебсайт

8 Відповідь від Ярослав

  • Ярослав
  • Гість

Re: Винести зображення сторінки joomla за межі контейнера

Можна змінювати css властивості для самого зображення.
http://i.imgur.com/HBNa5og.png

img {
    height: auto;
    vertical-align: middle;
    border: 0px none;
    border-radius: 4px;
    width: auto;
    position: relative;
    top: -2%;
    left: -2%;
}